/* ========================================
   레거시 헤더/푸터 보호 - 새 CSS 영향 차단
   v11: 헤더 세로 중앙 정렬, 모바일 사이드바 하단 배치
   v13: 모바일 글씨 깨짐 현상 수정
        - 도메인 이름 세로 한 글자씩 표시 방지
        - 모바일에서 우측 짤림 현상 수정
   v14: 햄버거 메뉴 관련 스타일 삭제 (header_user_layer.css와 충돌 방지)
        - fold 클래스 기반 모바일 메뉴 스타일 제거
        - 헤더 스타일은 header_user_layer.css에서 관리
   v15: 서버환경 드롭다운 텍스트 짤림 수정
        - 모바일에서 드롭다운 세로 배치
        - 텍스트 전체 표시
   v16: 그누보드 선택값 g 글자 짤림 수정
   v17: 모바일 도메인 카드 [대표] 배지/금액 정렬
   v18: 입력박스 힌트 폰트 크기 수정
   v19: 모바일 푸터 레이아웃 수정
        - Family Site 정렬 / 드롭다운 짤림
        - 사업자정보확인 밑줄 제거
   v20: 도메인명 길이 초과 시 처리 (PC/모바일 공통)
   v21: 슬라이드 패널 스크롤바로 인한 입력폼 잘림 수정
   v22: 에러 상태 입력박스 배경색 추가
   ======================================== */

/* 전체 페이지 배경 회색 */
body {
    background-color: #f5f7fa !important;
}

/* 헤더 영역 - hosting2_abs.css, hosting2_main_css_sp.css 스타일 덮어쓰기 */
#header {
    font-size: 16px !important;
}

/* 로고 - 상품페이지와 동일하게 */
#header h1.logo,
#header .logo {
    padding: 0 !important;
    font-size: 32px !important;
    font-family: "Noto Sans KR", "맑은 고딕", Dotum, sans-serif !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

#header .logo a,
#header .logo > a,
#header.login .logo > a,
#header.login h1.logo > a {
    font-size: 32px !important;
    line-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* 로고-GNB 사이 여백 - 상품페이지 layout.css와 동일하게 */
#header h1.logo > a,
#header .logo > a {
    margin: 0 100px 0 0 !important;
}

@media (min-width: 1330px) {
    #header h1.logo > a,
    #header .logo > a {
        margin: 0 100px 0 0 !important;
    }
}

/* 로고-브랜드 사이 여백 */
#header .logo .brand {
    margin-left: 8px !important;
}

/* 데스크탑 헤더 - 세로 중앙 정렬 (상품페이지와 동일하게) */
@media (min-width: 1330px) {
    #header .gInner {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* GNB 메뉴 세로 정렬 - 나의서비스관리 기준 */
    .gnb {
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 구분자(|) 세로 정렬 */
    #header .menu > li.divide:before {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* 챗봇 버튼 세로 정렬 */
    .gnb li:last-child,
    .gnb .btnAIChatbot {
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ========================================
   모바일 헤더 스타일 (1024px 이하)
   ======================================== */
@media screen and (max-width: 1024px) {

    /* 모바일 헤더 - 상단 고정 + 배경색 */
    #header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #fff !important;
    }

    /* 모바일에서 사이드바 sticky 해제 및 하단 배치 */
    .sidebar-card,
    .sidebar-column {
        position: static !important;
        top: auto !important;
        order: 1 !important;
    }

    /* 전체 컨테이너 오버플로우 처리 */
    .page-content,
    .main-column,
    .sidebar-column,
    .section-card,
    .sidebar-card {
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 도메인 이름 - 긴 도메인 줄바꿈 허용 */
    .domain-summary-item-name,
    .selected-domain-name,
    .domain-result-name,
    .domain-card-name,
    .summary-domain-name {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    /* 일반 텍스트 - 단어 단위 줄바꿈 */
    .product-summary-name,
    #summaryServiceId,
    #summaryServiceName,
    #summaryFreeDomainName {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }

    /* 사이드바 내 모든 텍스트 요소 */
    .sidebar-card *,
    .summary-row *,
    .product-summary-row *,
    .domain-summary-item * {
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    /* 폼 요소들 너비 제한 */
    .form-input,
    .form-select,
    .panel-input,
    .panel-select,
    .product-select,
    .period-select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 버튼 및 액션 요소 */
    .btn,
    .btn-pay,
    .btn-estimate,
    .btn-search,
    .domain-search-btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 서비스 아이디 입력 영역 */
    .search-input-wrapper,
    .search-box,
    .input-prefix-group {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    /* 도메인 카드 레이아웃 */
    .selected-domain-card,
    .domain-summary-item {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .selected-domain-left,
    .domain-summary-item-left {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .selected-domain-right,
    .domain-summary-item-price {
        flex-shrink: 0 !important;
    }
}

/* 슬라이드 패널 가로 스크롤 방지 */
.slide-panel,
.slide-panel-body {
    overflow-x: hidden !important;
}

/* 호스팅 이용동의 - 내용보기 링크 항상 파란색 */
.agreement-link {
    color: var(--color-primary) !important;
}

/* ========================================
   데스크탑 전용 헤더 스타일 (1025px 이상)
   모바일/태블릿에서는 기존 헤더 유지
   ======================================== */
@media screen and (min-width: 1025px) {

    /* 헤더 고정 (sticky) - 최소한의 스타일만 */
    #header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #fff !important;
    }

    /* 로고 위치 조정 - 세로 중앙 정렬 */
    #header .logo {
        position: relative !important;
        top: 0 !important;
    }

    /* 챗봇 버튼 - 고객센터 옆에 나란히 배치 */
    #chatbot-wrap-button {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 32px !important;
        position: relative !important;
        top: 12px !important;
    }

    /* 사용자 드롭다운 레이어 - 위치 고정 */
    #header .user .layer {
        position: absolute !important;
        top: 80px !important;
    }

    /* GNB 네비게이션 폰트 크기 - 상품페이지와 동일하게 */
    #header .navigation {
        font-size: 16px !important;
    }
}


/* ========================================
   본문 CSS 시작 - .page-content 내부로 격리
   ======================================== */
:root {
    --color-primary: #06f;
    --color-primary-hover: #0052cc;
    --color-primary-light: #f0f7ff;
    --color-primary-lighter: #e8f2ff;
    --color-success: #28a745;
    --color-success-light: #d4edda;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3cd;
    --color-danger: #dc3545;
    --color-danger-light: #f8d7da;
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-border: #dee2e6;
    --color-border-light: #e9ecef;
    --color-background: #f5f7fa;
    --color-background-white: #fff;
    --font-family: "Noto Sans KR", '맑은 고딕', Dotum, "돋움", arial, verdana, sans-serif;
    --font-size-title: 18px;
    --font-size-subtitle: 16px;
    --font-size-body: 15px;
    --font-size-body-sm: 14px;
    --font-size-caption: 13px;
    --font-size-helper: 12px;
    --font-size-micro: 11px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --transition-fast: 150ms ease
}

/* page-content는 배경 투명하게 (body 배경이 보이도록) */
.page-content {
    background: transparent;
    overflow-x: clip
}

.page-content *,
.page-content *::before,
.page-content *::after {
    box-sizing: border-box
}

.page-content {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    line-height: 1.6;
    font-size: 15px
}

.page-content .main-column a {
    color: var(--color-primary);
    text-decoration: none
}

/* 내용보기 링크는 항상 파란색 */
.page-content .main-column a.agreement-link,
.page-content .main-column a.agreement-preview-link {
    color: var(--color-primary) !important;
    text-decoration: underline;
}

.main-content .selection-tab input[type="radio"],
.main-content .agreement-section input[type="checkbox"],
.main-content .panel-radio-label input[type="radio"],
.page-content .selection-tab input[type="radio"],
.page-content .agreement-section input[type="checkbox"],
.page-content .panel-radio-label input[type="radio"],
.page-content .panel-agreement-section input[type="checkbox"],
.page-content .panel-agreement-checkbox,
.page-content .selected-domain-radio,
.slide-panel .panel-agreement-section input[type="checkbox"],
.slide-panel .panel-agreement-checkbox,
.slide-panel .panel-agreement-all input[type="checkbox"] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    width: auto !important;
    height: auto !important
}

.main-content .selection-tab input[type="radio"],
.main-content .panel-radio-label input[type="radio"],
.page-content .selection-tab input[type="radio"],
.page-content .panel-radio-label input[type="radio"],
.page-content .selected-domain-radio,
.slide-panel .panel-radio-label input[type="radio"] {
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    appearance: radio !important
}

.main-content .agreement-section input[type="checkbox"],
.page-content .agreement-section input[type="checkbox"],
.page-content .panel-agreement-section input[type="checkbox"],
.page-content .panel-agreement-checkbox,
.slide-panel .panel-agreement-section input[type="checkbox"],
.slide-panel .panel-agreement-checkbox,
.slide-panel .panel-agreement-all input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important
}

.main-content .domain-option input[type="radio"],
.page-content .domain-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important
}

.page-content {
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 1.5rem;
    display: flex;
    gap: 32px
}

.main-column {
    flex: 1;
    min-width: 0;
    align-self: flex-start
}

.sidebar-column {
    width: 340px;
    flex-shrink: 0
}

@media (max-width: 1024px) {
    .page-content {
        flex-direction: column;
        padding: 24px 16px
    }

    .sidebar-column {
        width: 100%;
        position: static;
        order: -1
    }
}

.main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
    padding-top: 32px
}

.content-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start
}

.form-area {
    flex: 1;
    min-width: 0
}

.card {
    background: var(--color-background-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 24px
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px
}

.card-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px
}

.section-card {
    background: var(--color-background-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm)
}

.section-card.section-card-highlight {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.15)
}

.section-card.section-card-highlight .section-title {
    color: var(--color-primary)
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.section-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-weight: 500
}

.section-badge.optional {
    background: var(--color-border-light);
    color: var(--color-text-secondary)
}

.tab-group {
    display: inline-flex;
    background: #F0F0F0;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 0
}

.tab-btn {
    flex: none;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease
}

.tab-btn:hover {
    color: #333
}

.tab-btn.active {
    color: #333;
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
}

.tab-content {
    display: none
}

.tab-content.active {
    display: block
}

.service-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-bottom: 24px
}

.service-name {
    font-size: 18px;
    font-weight: 700;
    color: #212529
}

.product-tier-section {
    margin-bottom: 24px
}

.product-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.product-tier-title {
    font-size: 18px;
    font-weight: 700;
    color: #212529
}

.product-tier-subtitle {
    font-size: 14px;
    color: #6c757d
}

.product-tier-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px
}

.product-tier-card {
    position: relative;
    padding: 16px 12px;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    text-align: center
}

.product-tier-card:hover {
    border-color: #06f;
    background: #f8fbff
}

.product-tier-card.active {
    border-color: #06f;
    background: #f0f7ff
}

.product-tier-card.active::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #06f;
    border-radius: 12px;
    pointer-events: none
}

.product-tier-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    background: #06f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    white-space: nowrap;
    z-index: 10
}

.product-tier-badge.popular {
    background: #f59e0b
}

.product-tier-name {
    font-size: 14px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 8px
}

.product-tier-price {
    font-size: 18px;
    font-weight: 700;
    color: #06f
}

.product-tier-price-unit {
    font-size: 12px;
    font-weight: 400;
    color: #6c757d
}

.product-tier-specs {
    margin-top: 10px;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.5
}

.product-tier-spec-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0
}

.product-tier-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: #06f;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center
}

.product-tier-card.active .product-tier-check {
    display: flex
}

.product-tier-check svg {
    width: 12px;
    height: 12px;
    color: #fff
}

.selected-product-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e7f0ff 100%);
    border: 2px solid #06f;
    border-radius: 12px;
    margin-bottom: 16px
}

.selected-product-info {
    display: flex;
    align-items: center;
    gap: 12px
}

.selected-product-name {
    font-size: 18px;
    font-weight: 700;
    color: #06f
}

.selected-product-price {
    font-size: 16px;
    font-weight: 600;
    color: #212529
}

.btn-compare-products {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #06f;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #06f;
    cursor: pointer;
    transition: all 0.2s
}

.btn-compare-products:hover {
    background: #06f;
    color: #fff
}

@media (max-width: 1024px) {
    .product-tier-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 768px) {
    .product-tier-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

.section-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 32px 0 16px 0;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 24px;
    font-family: "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif
}

.section-title svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary)
}

.section-title:first-of-type {
    margin-top: 0
}

.form-group {
    margin-bottom: 16px
}

.form-group:last-child {
    margin-bottom: 0
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 6px
}

.form-label .required {
    color: var(--color-danger);
    margin-left: 2px
}

.checkbox-group-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 8px
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px
}

.form-check:last-child {
    margin-bottom: 0
}

.form-check-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary)
}

.form-check-label {
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer
}

.form-input,
.form-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: var(--font-size-body);
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background-white);
    transition: all var(--transition-fast)
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-lighter)
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer
}

.form-help {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px
}

.input-prefix-group {
    display: flex;
    align-items: center;
    gap: 0
}

.input-prefix-group .input-prefix {
    height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap
}

.input-prefix-group .form-input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    width: auto;
    flex: 1
}

.input-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.input-group-text {
    color: var(--color-text-secondary);
    font-size: 14px
}

.form-row {
    display: flex;
    gap: 12px
}

.form-row .form-group {
    flex: 1
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column
    }
}

.selection-tabs {
    display: flex;
    background: var(--color-background, #f8f9fa);
    border-radius: var(--radius-md, 8px);
    padding: 4px;
    margin-bottom: 24px;
    gap: 4px
}

.selection-tab {
    position: relative;
    flex: 1;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #6c757d);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.selection-tab::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    transition: all 0.2s ease
}

.selection-tab:hover {
    color: var(--color-primary, #06f);
    background: rgba(0, 102, 255, 0.05)
}

.selection-tab.active {
    color: white;
    background: var(--color-primary, #06f);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3)
}

.selection-tab.active::before {
    background: white;
    border-color: white
}

.selection-tab input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.tab-title {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 4px
}

.tab-description {
    font-size: 13px;
    color: #6c757d
}

.expandable-section {
    display: none;
    margin-top: 16px
}

.expandable-section.active {
    display: block
}

.domain-options {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.domain-option {
    position: relative;
    padding: 20px;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff
}

.domain-option:hover {
    border-color: #06f
}

.domain-option.checked {
    border-color: #06f;
    background: #f0f7ff
}

.domain-option input[type="radio"] {
    position: absolute;
    opacity: 0
}

.domain-option-header {
    display: flex;
    align-items: center;
    gap: 12px
}

.domain-option-icon.radio {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0
}

.domain-option.checked .domain-option-icon.radio {
    border-color: #06f
}

.domain-option.checked .domain-option-icon.radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #06f;
    border-radius: 50%
}

.domain-option-label {
    font-size: 16px;
    font-weight: 600;
    color: #212529
}

.domain-badge {
    background: #06f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px
}

.domain-option-description {
    font-size: 13px;
    color: #6c757d;
    margin-top: 8px;
    margin-left: 32px
}

.domain-options-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px
}

.domain-option-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-background-white, #fff);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    text-align: center;
    flex: 1
}

.domain-option-chip::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    margin-bottom: 10px;
    transition: all 0.25s ease;
    background: white
}

.domain-option-chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter, #e6f0ff);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15)
}

.domain-option-chip:hover::before {
    border-color: var(--color-primary)
}

.domain-option-chip.active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.2)
}

.domain-option-chip.active::before {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 3px white
}

.domain-option-chip .option-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-weight: 400
}

.domain-option-chip.active .option-desc {
    color: var(--color-primary);
    opacity: 0.8
}

.domain-search-box {
    display: flex;
    gap: 8px;
    margin-bottom: 16px
}

.domain-search-input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast)
}

.domain-search-input:focus {
    border-color: var(--color-primary)
}

.domain-search-btn {
    height: 44px;
    padding: 0 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast)
}

.domain-search-btn:hover {
    background: var(--color-primary-hover)
}

.domain-search-btn svg {
    width: 16px;
    height: 16px
}

.domain-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-warning-light);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px
}

.domain-status.has-domain {
    background: var(--color-success-light);
    color: var(--color-success)
}

.domain-status svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.domain-status-text {
    flex: 1
}

.domain-status-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer
}

.domain-search-box.domain-search-highlight {
    padding: 16px;
    background: var(--color-background);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15)
}

.domain-search-box.domain-search-highlight .domain-search-input {
    border: 1px solid var(--color-border);
    background: white
}

.temp-domain-warning {
    display: none;
    padding: 16px;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-md);
    margin-bottom: 12px
}

.temp-domain-warning.visible {
    display: flex;
    gap: 12px
}

.temp-domain-warning .warning-icon {
    font-size: 24px;
    flex-shrink: 0
}

.temp-domain-warning .warning-content {
    flex: 1
}

.temp-domain-warning .warning-content strong {
    display: block;
    color: #92400e;
    margin-bottom: 8px;
    font-size: 14px
}

.temp-domain-warning .warning-content ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.6
}

.temp-domain-warning .warning-content li {
    margin-bottom: 4px
}

.temp-domain-warning .warning-cta {
    margin: 0;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500
}

.temp-domain-warning .warning-cta strong {
    display: inline;
    color: var(--color-primary)
}

.domain-search-inline {
    display: none;
    margin-bottom: 16px
}

.domain-search-inline.visible {
    display: block;
    animation: fadeSlideDown 0.2s ease
}

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.domain-results {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: none;
    margin-bottom: 16px;
    background: white;
    scroll-behavior: smooth
}

.domain-results::-webkit-scrollbar {
    width: 6px
}

.domain-results::-webkit-scrollbar-track {
    background: var(--color-background);
    border-radius: 3px
}

.domain-results::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px
}

.domain-results::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted)
}

.domain-results.visible {
    display: block
}

.domain-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--color-text-secondary);
    font-size: 14px
}

.loading-hourglass {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    animation: hourglassRotate 1.5s ease-in-out infinite
}

@keyframes hourglassRotate {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(180deg)
    }
}

.domain-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 13px;
    transition: background var(--transition-fast)
}

.domain-result-item:last-child {
    border-bottom: none
}

.domain-result-item:hover {
    background: var(--color-background)
}

.domain-result-item.selected {
    background: var(--color-primary-lighter)
}

.domain-result-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.domain-result-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    word-break: break-all
}

.domain-result-right {
    display: flex;
    align-items: center;
    gap: 10px
}

.domain-result-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap
}

.domain-result-period {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 400
}

.domain-result-discount {
    font-size: 11px;
    color: var(--color-danger);
    font-weight: 500
}

.domain-result-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    white-space: nowrap
}

.domain-result-badge.available {
    background: var(--color-success-light);
    color: var(--color-success)
}

.domain-result-badge.popular {
    background: var(--color-warning-light);
    color: #d97706
}

.domain-result-badge.event {
    background: #ff6b00;
    color: #fff
}

.domain-result-status {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600
}

.domain-result-status.available {
    background: var(--color-success-light);
    color: var(--color-success)
}

.domain-result-status.taken {
    background: var(--color-danger-light);
    color: var(--color-danger)
}

.domain-result-item.unavailable {
    background: var(--color-background);
    opacity: 0.7
}

.domain-result-item.unavailable .domain-result-name {
    color: var(--color-text-muted)
}

.btn-select-domain {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    font-family: inherit;
    background: var(--color-primary);
    color: white;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-width: 52px;
    text-align: center
}

.btn-select-domain:hover:not(:disabled) {
    background: var(--color-primary-hover)
}

.btn-select-domain:disabled {
    background: var(--color-border-light);
    color: var(--color-text-muted);
    cursor: not-allowed
}

.btn-select-domain.selected {
    background: var(--color-border-light);
    color: var(--color-text-muted);
    cursor: default
}

.domain-result-btn {
    padding: 3.5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all var(--transition-fast);
    min-width: 52px;
    text-align: center;
    box-sizing: border-box;
    -webkit-appearance: none
}

.domain-result-btn.add {
    background: var(--color-primary);
    color: white
}

.domain-result-btn.add:hover {
    background: var(--color-primary-hover)
}

.domain-result-btn.added {
    background: var(--color-border-light);
    color: var(--color-text-muted);
    cursor: default
}

.owned-domain-section {
    display: none;
    padding: 16px;
    background: var(--color-background);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.15)
}

.owned-domain-section.visible {
    display: block
}

.owned-domain-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: white;
    cursor: pointer
}

.free-domain-section-new {
    padding: 16px;
    background: var(--color-warning-light);
    border-radius: var(--radius-md);
    display: none
}

.free-domain-section-new.visible {
    display: block
}

.selected-domains-list {
    margin-top: 16px
}

.selected-domains-list.has-items {
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light)
}

.selected-domain-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--color-background);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    border: 1px solid var(--color-border-light)
}

.selected-domain-card:last-child {
    margin-bottom: 0
}

.selected-domain-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1
}

.selected-domain-radio {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    cursor: pointer
}

.selected-domain-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1
}

.selected-domain-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-primary);
    white-space: normal;
    word-break: break-all;
    flex-wrap: wrap
}

.selected-domain-promo {
    font-size: 11px;
    color: var(--color-danger)
}

.selected-domain-right {
    display: flex;
    align-items: center;
    gap: 10px
}

.selected-domain-period-select {
    height: 32px;
    padding: 0 24px 0 10px;
    font-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center
}

.selected-domain-price {
    font-weight: 600;
    font-size: 13px;
    min-width: 70px;
    text-align: right;
    color: var(--color-text-primary)
}

.selected-domain-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition-fast)
}

.selected-domain-remove:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-light)
}

.selected-domain-remove svg {
    width: 14px;
    height: 14px
}

.selected-domain-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-bottom: 8px
}

.badge-sm {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600
}

.badge-primary {
    background: var(--color-primary);
    color: white;
    margin-left: 4px
}

.badge-owned {
    background: var(--color-warning);
    color: white;
    margin-left: 4px
}

.badge-free {
    background: var(--color-text-muted);
    color: white;
    margin-left: 4px
}

.badge-existing {
    background: #10b981;
    color: white;
    margin-left: 4px
}

.btn-domain-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    padding-bottom: 1px;
    background: #6b7280;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease
}

.btn-domain-remove:hover {
    background: #dc3545;
    color: white
}

.owner-info-btn-container {
    margin-top: 12px;
    padding: 14px;
    background: var(--color-warning-light);
    border-radius: var(--radius-md);
    display: none
}

.owner-info-btn-container.visible {
    display: block
}

.owner-info-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-primary);
    margin-bottom: 10px
}

.owner-info-message svg {
    width: 16px;
    height: 16px;
    color: var(--color-warning);
    flex-shrink: 0
}

.btn-owner-info {
    width: 100%;
    padding: 10px 16px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--transition-fast)
}

.btn-owner-info:hover {
    background: var(--color-primary-hover)
}

.btn-owner-info svg {
    width: 16px;
    height: 16px
}

.owner-info-btn-container.complete {
    background: var(--color-success-light)
}

.owner-info-btn-container.complete .owner-info-message svg {
    color: var(--color-success)
}

.btn-owner-info.complete {
    background: var(--color-success)
}

.btn-owner-info.complete:hover {
    background: #218838
}

.search-box {
    display: flex;
    gap: 12px;
    margin-top: 16px
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: visible;
    background: #fff;
    position: relative
}

.search-input-wrapper .id-tooltip {
    top: calc(100%+4px);
    left: 0;
    right: auto;
    min-width: 250px
}

.domain-prefix {
    padding: 12px;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 14px;
    border-right: 1px solid #dee2e6
}

.search-input {
    flex: 1;
    padding: 12px;
    border: none;
    font-size: 14px;
    outline: none
}

.btn-search {
    height: 40px;
    padding: 0 16px;
    background: var(--color-primary);
    color: var(--color-background-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.btn-search:hover {
    background: var(--color-primary-hover)
}

.btn-search svg {
    width: 16px;
    height: 16px
}

.search-results {
    margin-top: 16px
}

.btn-more-domains-wrapper,
.more-domains-btn-container {
    text-align: center;
    margin-top: 8px
}

.btn-more-domains,
.more-domains-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast)
}

.btn-more-domains:hover,
.more-domains-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.btn-more-domains svg,
.more-domains-btn svg {
    width: 14px;
    height: 14px
}

.selected-domains-container {
    margin-top: 24px
}

.selected-domains-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.selected-domains-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #06f
}

.selected-domains-title svg {
    color: #06f
}

.selected-domains-count {
    font-size: 14px;
    color: #06f;
    font-weight: 600
}

.selected-domains-wrapper {
    background: #f8fbff;
    border: 2px solid #06f;
    border-radius: 12px;
    padding: 16px
}

.domain-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.2s
}

.domain-card:last-child {
    margin-bottom: 0
}

.domain-card:hover {
    background: #f0f7ff
}

.domain-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border-bottom: none
}

.domain-card-left {
    display: flex;
    align-items: center;
    gap: 12px
}

.domain-card-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0
}

.domain-card-radio.selected {
    border-color: #06f
}

.domain-card-radio.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #06f;
    border-radius: 50%
}

.domain-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #212529
}

.domain-card-tld {
    color: #06f
}

.domain-card-badge {
    background: #06f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px
}

.domain-card-right {
    display: flex;
    align-items: center;
    gap: 12px
}

.period-select {
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right 8px center/16px no-repeat;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 180px
}

.period-select:hover {
    border-color: #06f
}

.period-select:focus {
    outline: none;
    border-color: #06f;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1)
}

.btn-remove-domain {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 600;
    background: #fee2e2
}

.btn-remove-domain:hover {
    background: #fecaca;
    color: #b91c1c
}

.owner-info-section {
    margin-top: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px
}

.owner-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.owner-info-title {
    font-size: 14px;
    font-weight: 700;
    color: #06f
}

.owner-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600
}

.owner-status-badge.pending {
    background: #fff3cd;
    color: #856404
}

.owner-status-badge.complete {
    background: #e7f5ff;
    color: #06f
}

.btn-enter-owner {
    width: 100%;
    padding: 12px;
    background: #06f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s
}

.btn-enter-owner:hover {
    background: #0052cc
}

.btn-enter-owner.complete {
    background: #06f
}

.slide-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease
}

.slide-panel-overlay.active {
    opacity: 1;
    visibility: visible
}

.slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15)
}

.slide-panel.active {
    transform: translateX(0)
}

.slide-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    background: white;
    flex-shrink: 0
}

.slide-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif
}

.slide-panel-close {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center
}

.slide-panel-close:hover {
    background: var(--color-background)
}

.slide-panel-close svg {
    width: 20px;
    height: 20px
}

.slide-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px
}

.slide-panel-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0
}

.panel-section {
    margin-bottom: 24px
}

.panel-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary)
}

.panel-form-row {
    margin-bottom: 14px
}

.panel-form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px
}

.panel-form-label .required {
    color: var(--color-danger)
}

.auto-badge {
    display: none
}

.auto-filled-badge {
    display: none
}

.panel-input,
.panel-select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background-white);
    transition: all var(--transition-fast)
}

.panel-input:focus {
    outline: none;
    border-color: var(--color-primary)
}

.panel-radio-group {
    display: flex;
    gap: 16px
}

.panel-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer
}

.panel-radio-label input {
    accent-color: var(--color-primary)
}

.collapsible-section {
    margin-top: 24px;
    border-top: 1px solid #dee2e6;
    padding-top: 20px
}

.btn-collapsible {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s
}

.btn-collapsible:hover {
    background: #e9ecef;
    color: #212529
}

.btn-collapsible.active {
    background: #f0f7ff;
    border-color: #06f;
    color: #06f
}

.btn-collapsible-icon {
    transition: transform 0.2s
}

.btn-collapsible.active .btn-collapsible-icon {
    transform: rotate(180deg)
}

.collapsible-content {
    display: none;
    padding: 16px 4px 0 4px;
    margin-top: 12px
}

.collapsible-content.active {
    display: block
}

.panel-input:focus,
.panel-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-lighter)
}

.panel-input.error,
.panel-select.error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1)
}

.panel-radio-label.error {
    color: #dc3545
}

.panel-radio-label.error span {
    color: #dc3545
}

/* 성별 라디오 버튼 에러 스타일 제외 (base.css input.error 오버라이드) */
input[name="gender"].error,
input[type="radio"][name="gender"].error {
    border: none !important;
    border-color: transparent !important;
    background-color: transparent !important;
    accent-color: auto !important;
    outline: none !important;
    box-shadow: none !important
}

.panel-inline-error {
    font-size: 12px;
    color: var(--color-danger) !important;
    margin-top: 6px;
    display: none;
    line-height: 1.4
}

.panel-inline-error.visible {
    display: block
}

.panel-inline-error *,
.panel-inline-error span,
.panel-inline-error strong,
.panel-inline-error b {
    color: inherit !important
}

.slide-panel .id-tooltip,
.slide-panel .panel-input-wrapper .id-tooltip {
    display: none !important
}

.panel-form-row {
    position: relative
}

.panel-form-row>.id-tooltip,
.panel-form-row #panelErrorTooltip {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    display: none !important
}

.panel-input-group {
    display: flex;
    align-items: center;
    gap: 10px
}

.panel-input-group .panel-input {
    flex: 1
}

.panel-input-wrapper {
    position: relative
}

.panel-input-wrapper .panel-input {
    width: 100%
}

.panel-input-wrapper .id-tooltip {
    top: calc(100%+4px);
    left: 0;
    right: auto;
    min-width: 100%
}

.input-with-tooltip {
    position: relative;
    display: inline-block
}

.input-with-tooltip .id-tooltip {
    top: calc(100%+4px);
    left: 0;
    right: auto;
    min-width: 250px
}

.panel-help {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px
}

.panel-radio-group {
    display: flex;
    gap: 16px
}

.panel-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px
}

.panel-radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    appearance: radio !important
}

.panel-agreement-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden
}

.panel-agreement-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--color-background);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 13px
}

.panel-agreement-all:hover {
    background: var(--color-border-light)
}

.panel-agreement-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary)
}

.panel-agreement-list {
    padding: 10px 14px
}

.panel-agreement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px
}

.panel-agreement-item-left {
    display: flex;
    align-items: center;
    gap: 6px
}

.panel-agreement-item-left input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary)
}

.panel-agreement-item-left .req {
    color: var(--color-danger);
    font-size: 10px
}

.panel-agreement-link {
    font-size: 11px;
    color: var(--color-primary) !important;
    text-decoration: underline
}

.panel-agreement-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border)
}

.panel-agreement-section .agreement-group {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden
}

.panel-agreement-section .agreement-items-wrapper {
    padding: 10px 14px;
    background: #fff
}

.panel-agreement-left {
    display: flex;
    align-items: center;
    gap: 6px
}

.panel-agreement-left input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary)
}

.panel-agreement-left span {
    font-size: 12px;
    color: var(--color-text-primary)
}

.panel-agreement-left span .req {
    color: var(--color-danger);
    font-size: 10px
}

.btn-panel-submit {
    width: 100%;
    padding: 12px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast)
}

.btn-panel-submit:hover {
    background: var(--color-primary-hover)
}

.info-box {
    background: transparent;
    border: 1px solid #b3d1ff;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px
}

.info-box.warning {
    background: #fffbeb;
    border-left: 4px solid #f59e0b
}

.info-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 8px
}

.info-box div {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.7
}

.free-domain-section {
    margin-top: 16px;
    text-align: center
}

.free-domain-link {
    color: #6c757d;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s
}

.free-domain-link:hover {
    color: #06f;
    text-decoration: underline
}

.btn-use-free-domain {
    margin-top: 12px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s
}

.btn-use-free-domain:hover {
    border-color: #f59e0b;
    color: #f59e0b
}

.auto-fill-badge {
    display: none
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border)
}

.btn {
    height: 48px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-background-white);
    border: none
}

.btn-primary:hover {
    background: var(--color-primary-hover)
}

.btn-secondary {
    background: var(--color-background-white);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border)
}

.btn-secondary:hover {
    background: var(--color-border-light)
}

.btn-outline {
    background: var(--color-background-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary)
}

.floating-summary {
    width: 400px;
    flex-shrink: 0;
    position: sticky;
    top: 100px
}

.summary-card {
    background: var(--color-background-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 24px
}

.summary-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border)
}

.summary-service {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 16px
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0
}

.summary-row-label {
    font-size: 14px;
    color: #6c757d
}

.summary-row-value {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    text-align: right
}

.summary-row-value.highlight {
    color: #06f
}

.summary-row-value.placeholder {
    color: #6c757d;
    font-weight: 400
}

.summary-row-value.warning {
    color: #f59e0b
}

.summary-divider {
    height: 1px;
    background: #dee2e6;
    margin: 16px 0
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px
}

.summary-total-label {
    font-size: 16px;
    font-weight: 600;
    color: #212529
}

.summary-total-value {
    font-size: 24px;
    font-weight: 700;
    color: #212529
}

.btn-estimate {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s
}

.btn-estimate:hover {
    background: #e9ecef
}

.btn-estimate svg {
    width: 16px;
    height: 16px
}

.sidebar-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important
}

.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light);
    font-family: "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif
}

.product-summary-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light)
}

.product-summary-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 12px
}

.product-summary-details {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.product-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px
}

.product-summary-label {
    color: var(--color-text-secondary)
}

.product-summary-value {
    font-weight: 500;
    color: var(--color-text-primary);
    position: relative;
    top: -1px
}

.product-select {
    width: auto;
    height: 32px;
    padding: 0 28px 0 10px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center
}

.product-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-lighter)
}

.discount-tag {
    color: var(--color-danger);
    font-weight: 600
}

.product-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light)
}

.product-row {
    margin-bottom: 12px
}

.product-row:last-child {
    margin-bottom: 0
}

.product-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    display: block
}

.domain-summary-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light)
}

.domain-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.domain-summary-title {
    font-size: 13px;
    color: var(--color-text-secondary)
}

.domain-add-btn {
    font-size: 12px;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast)
}

.domain-add-btn:hover {
    background: var(--color-primary-lighter)
}

.domain-add-btn svg {
    width: 14px;
    height: 14px
}

.domain-summary-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--color-background);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    font-size: 13px;
    position: relative
}

.domain-summary-item:last-child {
    margin-bottom: 0
}

.domain-summary-item-left {
    flex: 1;
    padding-right: 20px
}

.domain-summary-item-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

/* 배지 + X버튼 그룹: 항상 한 줄 유지 */
.domain-badge-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap
}

.badge-sm {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: var(--radius-full);
    font-weight: 600;
    display: inline-flex;
    align-items: center
}

.badge-primary {
    background: var(--color-primary);
    color: white;
    margin-left: 4px;
    display: inline-flex;
    align-items: center
}

.badge-owned {
    background: var(--color-warning);
    color: white;
    margin-left: 4px;
    display: inline-flex;
    align-items: center
}

.badge-free {
    background: var(--color-text-muted);
    color: white;
    margin-left: 4px;
    display: inline-flex;
    align-items: center
}

.badge-existing {
    background: #10b981;
    color: white;
    display: inline-flex;
    align-items: center
}

.domain-summary-item-detail {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px
}

.domain-summary-item-price {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    color: #212529
}

.domain-summary-item-discount {
    font-size: 10px;
    color: var(--color-danger);
    margin-top: 2px
}

.domain-summary-item.pending {
    opacity: 1
}

.domain-summary-item.pending .domain-summary-item-name {
    color: var(--color-text-muted)
}

.domain-summary-item.pending .domain-summary-item-price {
    color: #adb5bd
}

.domain-pending-badge {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    background: #dc2626;
    color: #fff;
    font-weight: 500;
    display: inline-flex;
    align-items: center
}

.domain-summary-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6b7280;
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
    transition: all var(--transition-fast);
    padding: 0
}

.domain-summary-remove:hover {
    background: var(--color-danger-light);
    color: var(--color-danger)
}

.domain-summary-remove svg {
    width: 12px;
    height: 12px
}

.domain-promo-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--color-primary-lighter) 0%, #e0f2fe 100%);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--color-primary);
    margin-top: 12px
}

.domain-promo-banner svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0
}

.summary-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    position: relative;
    top: 1px
}

.summary-value {
    font-weight: 600
}

.summary-value.highlight {
    color: #212529
}

.summary-value.placeholder {
    font-size: 13px;
    font-weight: 400
}

.btn-pay {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    background: #3082F6;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--transition-fast)
}

.btn-pay:hover {
    background: #2070E0
}

.btn-pay svg {
    width: 18px;
    height: 18px
}

.agreement-box {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden
}

.agreement-box .agreement-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--color-background);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    font-weight: 600
}

.agreement-box .agreement-all:hover {
    background: var(--color-border-light)
}

.agreement-box .agreement-all input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer
}

.agreement-list {
    padding: 10px 14px
}

.agreement-box .agreement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px
}

.agreement-box .agreement-item-left {
    display: flex;
    align-items: center;
    gap: 8px
}

.agreement-box .agreement-item-left input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer
}

.agreement-box .agreement-item-label {
    white-space: nowrap
}

.agreement-item-label .req {
    color: var(--color-danger);
    font-size: 11px
}

.agreement-link {
    font-size: 12px;
    color: var(--color-primary) !important;
    text-decoration: underline !important
}

.agreement-section {
    margin-top: 32px;
    padding-top: 24px
}

.agreement-group {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden
}

.agreement-all {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 16px 20px;
    background: #f8f9fa;
    cursor: pointer;
    border-bottom: 1px solid #dee2e6;
    text-align: left !important
}

.agreement-all input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important
}

.agreement-all-label {
    font-size: 16px;
    font-weight: 700;
    color: #212529
}

.agreement-items-wrapper {
    padding: 12px
}

.agreement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px
}

.agreement-item:last-child {
    margin-bottom: 0
}

.agreement-item-left {
    display: flex;
    align-items: center;
    gap: 12px
}

.agreement-item input[type="checkbox"],
.agreement-item-left input[type="checkbox"],
.agreement-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important
}

.agreement-item-label {
    font-size: 14px;
    color: #212529;
    white-space: nowrap
}

.agreement-preview-link {
    font-size: 13px;
    color: #06f;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px
}

.agreement-preview-link:hover {
    text-decoration: underline
}

.summary-section-label {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 8px
}

.summary-domain-detail {
    padding: 0 0 8px 0
}

.summary-domain-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    gap: 8px
}

.summary-domain-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1
}

.summary-domain-name {
    color: #212529;
    font-weight: 700
}

.summary-domain-info {
    color: #6c757d;
    font-weight: 400
}

.summary-domain-discount {
    color: #dc3545;
    font-weight: 500
}

.summary-domain-price {
    font-weight: 600;
    color: #212529;
    white-space: nowrap
}

.summary-domain-price.discount {
    color: #dc3545
}

.summary-domain-original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-right: 6px;
    white-space: nowrap
}

.summary-domain-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0
}

.summary-discount-text {
    color: #dc3545;
    font-weight: 500
}

.summary-row-value-with-remove {
    display: flex;
    align-items: center;
    gap: 8px
}

.summary-domain-item.pending .summary-domain-name,
.summary-domain-item.pending .summary-domain-info,
.summary-domain-item.pending .summary-domain-price {
    color: #adb5bd
}

.summary-domain-item.pending .summary-domain-discount {
    color: #e9a0a7
}

.summary-domain-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #adb5bd;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0
}

.summary-domain-remove:hover {
    color: #dc3545;
    background: #fee2e2
}

.summary-domain-remove svg {
    width: 12px;
    height: 12px
}

.password-wrapper {
    position: relative
}

.btn-toggle-password {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    padding: 4px;
    border-radius: 50%
}

.btn-toggle-password:hover {
    color: #06f
}

.password-strength-bar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    height: 4px
}

.strength-segment {
    flex: 1;
    height: 100%;
    background: #e9ecef;
    border-radius: 2px;
    transition: background-color 0.3s ease
}

.password-strength-bar.level-1 .strength-segment[data-level="1"] {
    background: #dc3545
}

.password-strength-bar.level-2 .strength-segment[data-level="1"],
.password-strength-bar.level-2 .strength-segment[data-level="2"] {
    background: #f59e0b
}

.password-strength-bar.level-3 .strength-segment[data-level="1"],
.password-strength-bar.level-3 .strength-segment[data-level="2"],
.password-strength-bar.level-3 .strength-segment[data-level="3"] {
    background: #10b981
}

.password-strength-bar.level-4 .strength-segment[data-level="1"],
.password-strength-bar.level-4 .strength-segment[data-level="2"],
.password-strength-bar.level-4 .strength-segment[data-level="3"],
.password-strength-bar.level-4 .strength-segment[data-level="4"] {
    background: #06f
}

.password-grade {
    font-size: 13px;
    font-weight: 600;
    margin-left: 8px
}

.password-grade.weak {
    color: #dc3545
}

.password-grade.fair {
    color: #f59e0b
}

.password-grade.good {
    color: #10b981
}

.password-grade.strong {
    color: #06f
}

.btn-toggle-pw {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px
}

.btn-toggle-pw:hover {
    color: var(--color-text-primary)
}

.btn-toggle-pw svg {
    width: 18px;
    height: 18px
}

.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px
}

.strength-bar {
    display: flex;
    gap: 3px;
    flex: 1
}

.strength-bar .strength-segment {
    height: 3px;
    flex: 1;
    background: var(--color-border);
    border-radius: 2px;
    transition: background var(--transition-fast)
}

.strength-bar[data-level="1"] .strength-segment:nth-child(1) {
    background: var(--color-danger)
}

.strength-bar[data-level="2"] .strength-segment:nth-child(-n+2) {
    background: var(--color-warning)
}

.strength-bar[data-level="3"] .strength-segment:nth-child(-n+3) {
    background: #84cc16
}

.strength-bar[data-level="4"] .strength-segment {
    background: var(--color-success)
}

.form-helper {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px
}

.form-error {
    font-size: 12px;
    color: var(--color-danger) !important;
    margin-top: 4px;
    display: none
}

.form-error.visible {
    display: block
}

.form-error *,
.form-error span,
.form-error strong,
.form-error b {
    color: inherit !important
}

.field-error {
    font-size: 13px;
    color: var(--color-danger) !important;
    margin-top: 6px;
    display: none;
    margin-left: 8px
}

.field-error.show {
    display: block
}

.field-error *,
.field-error span,
.field-error strong,
.field-error b {
    color: inherit !important
}

.business-reg-group {
    display: flex;
    align-items: center;
    gap: 4px
}

.business-reg-group .panel-input {
    text-align: center
}

.input-separator {
    color: var(--color-text-secondary);
    font-weight: 500
}

/* 에러 상태 인풋 스타일 통일 */
.form-input.error,
.form-select.error,
input.error,
select.error,
textarea.error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important
}

.form-input.error:focus,
.form-select.error:focus,
input.error:focus,
select.error:focus,
textarea.error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
    outline: none !important
}

.form-input.success {
    border-color: #10b981
}

.form-input.success:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

@media (max-width: 1024px) {
    .content-layout {
        flex-direction: column
    }

    .floating-summary {
        flex: none;
        max-width: 100%;
        width: 100%;
        position: relative;
        top: 0;
        order: -1;
        margin-bottom: 24px
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 16px
    }

    .card {
        padding: 20px
    }

    .selection-tabs {
        flex-direction: column
    }

    .search-box {
        flex-direction: column
    }

    .btn-search {
        width: 100%
    }

    .slide-panel {
        width: 100%
    }

    .domain-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .domain-card-right {
        width: 100%;
        justify-content: space-between
    }

    .period-select {
        min-width: 140px
    }
}

.id-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 280px;
    max-width: 450px;
    width: auto;
    margin-top: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
    z-index: 1000;
    line-height: 1.5
}

.id-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.id-tooltip.checking {
    border-left: 4px solid #06f
}

.id-tooltip.available {
    border-left: 4px solid #28a745
}

.id-tooltip.unavailable {
    border-left: 4px solid #dc3545
}

.id-tooltip.invalid {
    border-left: 4px solid #ffc107
}

.tooltip-content {
    display: flex;
    align-items: center;
    gap: 8px
}

.tooltip-content::before {
    font-size: 20px
}

.id-tooltip.checking .tooltip-content::before {
    content: '⏳';
    animation: spin 1s linear infinite
}

.id-tooltip.available .tooltip-content::before {
    content: '✓';
    color: #28a745
}

.id-tooltip.unavailable .tooltip-content::before {
    content: '✗';
    color: #dc3545
}

.id-tooltip.invalid .tooltip-content::before {
    content: '⚠️'
}

.tooltip-message {
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
    word-break: keep-all;
    flex: 1
}

.id-tooltip.checking .tooltip-message {
    color: #06f
}

.id-tooltip.available .tooltip-message {
    color: #28a745;
    font-weight: 600
}

.id-tooltip.unavailable .tooltip-message {
    color: #dc3545;
    font-weight: 600
}

.id-tooltip.invalid .tooltip-message {
    color: #856404
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 768px) {
    .id-tooltip {
        left: 0;
        right: 0;
        min-width: auto;
        max-width: 100%;
        width: auto
    }

    /* 선택된 도메인 카드 - 세로 배치 (검색 결과와 동일) */
    .selected-domain-card {
        flex-wrap: wrap;
        align-items: center;
    }

    .selected-domain-left {
        flex: 1;
        min-width: 100%;
        margin-bottom: 4px;
    }

    .selected-domain-info {
        flex-direction: column;
        gap: 2px;
    }

    /* 도메인명 - block으로 변경하여 텍스트 자연스럽게 줄바꿈 */
    .selected-domain-name {
        display: block;
        word-break: break-all;
    }

    .selected-domain-name .badge-sm {
        display: inline-block;
        vertical-align: middle;
    }

    /* 기간선택+가격+X 버튼 - 전체 너비 */
    .selected-domain-right {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 10px;
    }

    /* 가격을 오른쪽으로 밀기 (가격+X가 오른쪽에 붙음) */
    .selected-domain-price {
        margin-left: auto;
    }

    /* 기간 셀렉트 - 도메인 텍스트와 왼쪽 정렬 (라디오버튼 26px) */
    .selected-domain-period-select {
        width: auto;
        min-width: 140px;
        margin-left: 24px;
    }

    /* 도메인 검색 결과 - 세로 배치, 버튼만 오른쪽 세로 가운데 */
    .domain-result-item {
        flex-wrap: wrap;
        align-items: center;
    }

    .domain-result-left {
        flex: 1;
        min-width: 100%;
        margin-bottom: 2px;
    }

    .domain-result-name {
        flex-wrap: wrap;
        word-break: break-all;
    }

    /* 버튼 오른쪽 고정, 세로 가운데 */
    .domain-result-right {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* 도메인 검색 결과 - 3개 스크롤 없이 표시 */
    .domain-results {
        max-height: none;
    }

}

/* ========================================
   푸터 스타일
   ======================================== */
#footer {
    width: 100%
}

#footer .gInner {
    box-sizing: content-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem
}

#footer .infoList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 6px
}

.email-auth-wrapper {
    width: 100%
}

.email-input-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.email-input-row .panel-input {
    flex: 1
}

.btn-email-auth {
    flex-shrink: 0;
    padding: 10px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap
}

.btn-email-auth:hover {
    background: var(--color-primary-hover)
}

.btn-email-auth:disabled {
    background: #adb5bd;
    cursor: not-allowed
}

.email-auth-complete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap
}

.email-auth-complete svg {
    color: var(--color-success)
}

.email-auth-warning {
    display: block;
    margin-top: 6px;
    color: var(--color-danger);
    font-size: 13px
}

.email-auth-code-section {
    margin-top: 8px
}

.auth-code-input-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.auth-code-input-row .panel-input.auth-code-input {
    flex: 1;
    height: 40px;
    text-align: left;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 400;
    padding: 0 12px
}

.auth-code-input-row .panel-input.auth-code-input::placeholder {
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 400
}

.auth-timer {
    flex-shrink: 0;
    padding: 6px 10px;
    background: var(--color-warning-light);
    color: #d97706;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: center
}

.btn-auth-confirm {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap
}

.btn-auth-confirm:hover {
    background: var(--color-primary-hover)
}

.auth-help-text {
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: 11px
}

.domain-notice-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center
}

.domain-notice-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5)
}

.domain-notice-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 90%;
    overflow: hidden
}

.domain-notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-primary);
    color: #fff
}

.domain-notice-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff !important
}

.domain-notice-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s
}

.domain-notice-close:hover {
    opacity: 1
}

.domain-notice-body {
    padding: 20px
}

.domain-notice-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.domain-notice-list li {
    position: relative;
    padding: 10px 0 10px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
    border-bottom: 1px solid #f0f0f0
}

.domain-notice-list li:last-child {
    border-bottom: none
}

.domain-notice-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%
}

.domain-notice-footer {
    padding: 16px 20px;
    background: #f8f9fa;
    text-align: center
}

.btn-domain-notice-confirm {
    padding: 10px 40px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s
}

.btn-domain-notice-confirm:hover {
    background: var(--color-primary-hover)
}

.co-domain-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s
}

.co-domain-info-btn:hover {
    background: var(--color-primary)
}

.password-help-link {
    color: var(--color-primary);
    font-size: 12px;
    text-decoration: none;
    margin-left: 8px
}

.password-help-link:hover {
    text-decoration: underline
}

.password-help-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000
}

.password-help-content {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto
}

.password-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-light)
}

.password-help-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary)
}

.password-help-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast)
}

.password-help-close:hover {
    background: var(--color-background)
}

.password-help-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-secondary)
}

.password-help-body {
    padding: 24px
}

.password-help-intro {
    color: var(--color-primary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px 0
}

.password-help-tip {
    color: var(--color-text-secondary);
    font-size: 13px;
    margin: 0 0 20px 0;
    padding-left: 12px;
    border-left: 2px solid var(--color-border)
}

.password-help-rules {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.password-rule {
    display: flex;
    gap: 12px
}

.rule-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50%
}

.rule-content {
    flex: 1
}

.rule-content strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 8px
}

.rule-content ul {
    margin: 0;
    padding-left: 16px
}

.rule-content li {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.8
}

/* 헤더 드롭다운 메뉴 스타일은 header_user_layer.css에서 관리 (v14에서 삭제) */

.familySite {
    position: relative !important
}

.familySite .site {
    display: none !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
    min-width: 140px !important;
    z-index: 1000 !important;
    list-style: none !important;
    margin: 0 0 8px 0 !important
}

.familySite.active .site {
    display: block !important
}

.familySite .site li {
    padding: 0 !important;
    margin: 0 !important
}

.familySite .site li a {
    display: block !important;
    padding: 8px 16px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    white-space: nowrap !important
}

.familySite .site li a:hover {
    background: #f5f5f5 !important;
    color: #06f !important
}

.familySite .site li.line {
    border: none !important;
    border-top: 1px solid #eee !important;
    margin-top: 4px !important;
    padding-top: 4px !important
}

.familySite .site li.line::before,
.familySite .site li.line::after {
    display: none !important;
    content: none !important
}

.btnGoToTop:hover,
.btnGoToTop:active {
    background-color: transparent !important;
    color: inherit !important
}

a#a_tax_request:hover,
a.txtLink#a_tax_request:hover {
    color: #2563eb !important;
    text-decoration: none !important
}

/* ========================================
   호스팅 이용동의 - 도메인 양식과 통일
   전체 동의 왼쪽 정렬, 항목은 박스 없이
   ======================================== */
/* 전체 동의 스타일 강화 - 왼쪽 정렬 */
.agreement-group .agreement-all,
.agreement-section .agreement-all,
label.agreement-all {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* 동의 목록 영역 - 흰색 배경 */
.agreement-group .agreement-list,
.agreement-section .agreement-list,
.agreement-list {
    background: #fff !important;
    padding: 12px 14px !important;
}

/* 개별 동의 항목 - 박스/테두리 제거 */
.agreement-group .agreement-item,
.agreement-section .agreement-item,
.agreement-list .agreement-item {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
}

/* 내용보기 링크 - 항상 파란색 */
.agreement-link,
.agreement-preview-link,
.panel-agreement-link {
    text-decoration: underline !important;
    color: var(--color-primary) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 내용보기 링크 - 클릭/방문 후에도 파란색 유지 */
.agreement-link:visited,
.agreement-preview-link:visited,
.panel-agreement-link:visited,
.agreement-link:active,
.agreement-preview-link:active,
.panel-agreement-link:active,
.agreement-link:focus,
.agreement-preview-link:focus,
.panel-agreement-link:focus,
.agreement-link:hover,
.agreement-preview-link:hover,
.panel-agreement-link:hover {
    color: var(--color-primary) !important;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* v13: 동의 항목 레이아웃 - 내용보기 세로 깨짐 방지 */
.agreement-item,
.panel-agreement-item {
    flex-wrap: nowrap !important;
}

.agreement-item-left,
.panel-agreement-item-left,
.panel-agreement-left {
    flex: 1 !important;
    min-width: 0 !important;
}

.agreement-item .agreement-link,
.agreement-item .agreement-preview-link,
.panel-agreement-item .agreement-link,
.panel-agreement-item .agreement-preview-link {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ========================================
   v13: 소형 모바일 기기 추가 대응
   Galaxy S25, iPhone 등 작은 화면에서의 레이아웃 수정
   ======================================== */
@media screen and (max-width: 480px) {

    /* 도메인/서비스 아이디 텍스트 - 강제 단어 단위 줄바꿈 */
    .domain-summary-item-name,
    .selected-domain-name,
    .domain-result-name,
    .domain-card-name,
    .summary-domain-name,
    .product-summary-name,
    #summaryServiceId,
    #summaryServiceName,
    #summaryFreeDomainName,
    .product-summary-value,
    .summary-row-value {
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        font-size: 13px !important;
    }

    /* 도메인 검색 박스 - 세로 배치 */
    .domain-search-box {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .domain-search-box.domain-search-highlight {
        padding: 12px !important;
    }

    .domain-search-input {
        width: 100% !important;
        height: 48px !important;
        font-size: 14px !important;
        padding: 12px 14px !important;
    }

    .domain-search-input::placeholder {
        font-size: 13px !important;
    }

    .domain-search-btn {
        width: 100% !important;
        height: 48px !important;
        justify-content: center !important;
    }

    /* 동의 항목 - 텍스트 줄바꿈 허용 (폰트 크기 원복) */
    .agreement-item {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 4px 8px !important;
    }

    .agreement-item-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 60px) !important;
    }

    .agreement-item-left span,
    .agreement-item-label {
        white-space: normal !important;
        word-break: keep-all !important;
        line-height: 1.4 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .agreement-link,
    .agreement-preview-link {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        text-align: right !important;
    }

    /* 사이드바 카드 패딩 축소 */
    .sidebar-card {
        padding: 16px !important;
    }

    /* 기간 선택 드롭다운 너비 조정 */
    .period-select,
    .selected-domain-period-select {
        min-width: auto !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: 11px !important;
        padding: 6px 24px 6px 8px !important;
    }

    /* 사이드바 신청기간 셀렉트 - PC와 동일한 고정 너비 */
    .product-select {
        width: auto !important;
        max-width: 120px !important;
    }

    /* 도메인 카드 - 세로 배치 */
    .selected-domain-card {
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .selected-domain-left {
        flex: 1 !important;
        min-width: 100% !important;
        margin-bottom: 4px !important;
    }

    /* 도메인명 - block으로 변경하여 텍스트 자연스럽게 줄바꿈 */
    .selected-domain-name {
        display: block !important;
        word-break: break-all !important;
    }

    .selected-domain-name .badge-sm {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 기간선택+가격+X 버튼 - 전체 너비 */
    .selected-domain-right {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    /* 기간 셀렉트 - 도메인 텍스트와 왼쪽 정렬 (라디오버튼 26px) */
    .selected-domain-period-select {
        margin-left: 24px !important;
    }

    /* 가격을 오른쪽으로 밀기 (가격+X가 오른쪽에 붙음) */
    .selected-domain-price {
        margin-left: auto !important;
    }

    /* 가격 정보 영역 */
    .summary-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .summary-row-label,
    .summary-row-value {
        font-size: 13px !important;
    }

    /* 결제 버튼 */
    .btn-pay,
    .btn-estimate {
        font-size: 14px !important;
        padding: 12px !important;
    }

    /* 섹션 카드 패딩 조정 */
    .section-card {
        padding: 16px !important;
    }

    /* 입력 필드 너비 */
    .input-prefix-group {
        flex-wrap: nowrap !important;
    }

    .input-prefix-group .input-prefix {
        font-size: 12px !important;
        padding: 0 8px !important;
    }

    .input-prefix-group .form-input {
        font-size: 14px !important;
    }
}

/* ========================================
   v14 추가: 관리자 정보 항목 간격 통일
   이메일, 휴대폰, FTP/SSH/DB 비밀번호 간격 동일하게
   ======================================== */
/* form-row (이메일+휴대폰 묶음)와 다음 form-group 사이 간격 */
.form-row {
    margin-bottom: 20px !important;
}

.form-row+.form-group {
    margin-top: 20px !important;
}

/* form-row 내부 form-group들 간격 */
.form-row .form-group {
    margin-bottom: 0 !important;
}

/* 일반 form-group 간격 */
.section-card>.form-group {
    margin-bottom: 20px !important;
}

.section-card>.form-group:last-child {
    margin-bottom: 0 !important;
}

/* ========================================
   v14 추가: 모든 섹션 박스 가로 크기 통일
   아이패드 등 태블릿에서 박스 너비 일관성 유지
   ======================================== */
.page-content .section-card,
.page-content .sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media screen and (min-width: 1025px) {
    .page-content {
        display: flex !important;
        gap: 32px !important;
    }

    .main-column {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .main-column .section-card {
        width: 100% !important;
    }

    .sidebar-column {
        width: 340px !important;
        flex-shrink: 0 !important;
    }

    .sidebar-column .sidebar-card {
        width: 100% !important;
    }
}

@media screen and (max-width: 1024px) {
    .page-content {
        flex-direction: column !important;
    }

    .main-column,
    .sidebar-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-card,
    .sidebar-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   v14 수정: 도메인 카드 스타일 (그리드 레이아웃)
   - 데스크톱/모바일 동일하게 3열 가로 배치 유지
   ======================================== */

/* ========================================
   v15: 서버환경 드롭다운 텍스트 짤림 수정
   750px 이하에서 드롭다운 텍스트 자동 줄바꿈
   ======================================== */
@media screen and (max-width: 750px) {

    /* 서버환경 드롭다운 텍스트 줄바꿈 */
    .form-select {
        height: auto !important;
        min-height: 44px !important;
        padding: 12px 36px 12px 14px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }
}

@media screen and (max-width: 480px) {

    /* 서버환경 설정 영역 - 드롭다운 세로 배치 */
    .form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .form-row .form-group {
        width: 100% !important;
        flex: none !important;
    }

    /* 드롭다운 너비 100%로 확장 (폼 영역) */
    .form-select,
    .period-select {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* 사이드바 신청기간 셀렉트 - PC와 동일한 고정 너비 */
    .product-select {
        width: auto !important;
        max-width: 120px !important;
    }

    /* 서버환경 드롭다운 높이 자동 조절 */
    .form-select {
        height: auto !important;
        min-height: 44px !important;
        padding: 12px 36px 12px 14px !important;
        line-height: 1.4 !important;
    }
}

/* ========================================
   v16: 그누보드 선택값 g 글자 밑부분 짤림 수정
   프로그램 자동 설치 > 설치 경로 선택 드롭다운
   www/gnuboard5 옵션의 g 글자 descender 짤림 방지
   ======================================== */
/* 설치 경로 드롭다운 - g, y, p 등 descender 글자 짤림 방지 */
#board_setup_path {
    padding: 10px 36px 10px 14px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
}

/* 전체 form-select에도 적용 (일관성 유지) */
.form-select {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.5 !important;
}

/* ========================================
   v17: 도메인 카드 레이아웃 수정
   1. 긴 도메인 줄바꿈 허용
   2. [대표] 배지는 줄바꿈 방지
   3. 도메인 금액 오른쪽 정렬
   ======================================== */
/* 도메인 카드 - 줄바꿈 허용 + 세로 가운데 정렬 (PC만) */
@media screen and (min-width: 769px) {
    .selected-domain-name,
    .domain-summary-item-name {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        word-break: break-all !important;
    }
}

/* 도메인 카드 내 모든 자식 요소 세로 정렬 */
.selected-domain-name > *,
.domain-summary-item-name > * {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 뱃지 - 줄바꿈 방지 */
.selected-domain-name .badge-sm,
.selected-domain-name .badge-primary,
.selected-domain-name .badge-owned,
.selected-domain-name .badge-free,
.selected-domain-name .badge-existing,
.selected-domain-name .domain-pending-badge,
.selected-domain-name .domain-badge-group,
.domain-summary-item-name .badge-sm,
.domain-summary-item-name .badge-primary,
.domain-summary-item-name .badge-owned,
.domain-summary-item-name .badge-free,
.domain-summary-item-name .badge-existing,
.domain-summary-item-name .domain-pending-badge,
.domain-summary-item-name .domain-badge-group {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 도메인 카드 전체 레이아웃 */
.selected-domain-card,
.domain-summary-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 도메인 이름 영역 */
.selected-domain-left,
.domain-summary-item-left {
    flex: 1 !important;
    min-width: 0 !important;
}

/* 도메인 텍스트 - 줄바꿈 허용 */
.selected-domain-name span:first-child,
.domain-summary-item-name span:first-child {
    word-break: break-all !important;
    white-space: normal !important;
}

/* 가격 영역 - 오른쪽 정렬 고정 (PC만) */
@media screen and (min-width: 769px) {
    .selected-domain-right,
    .domain-summary-item-price {
        flex-shrink: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
        margin-left: 12px !important;
    }
}

/* 모바일에서 도메인 카드 - 세로 배치 */
@media screen and (max-width: 768px) {

    .selected-domain-card,
    .domain-summary-item {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* 도메인 영역이 먼저 한 줄 전체 차지 */
    .selected-domain-left,
    .domain-summary-item-left {
        min-width: 100% !important;
        width: 100% !important;
    }

    .selected-domain-name,
    .domain-summary-item-name {
        display: block !important;
        word-break: break-all !important;
    }

    .selected-domain-name .badge-sm,
    .domain-summary-item-name .badge-sm {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 기간선택+가격+X 버튼 - 전체 너비 */
    .selected-domain-right {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    /* 기간 셀렉트 - 도메인 텍스트와 왼쪽 정렬 (라디오버튼 26px) */
    .selected-domain-period-select {
        margin-left: 24px !important;
    }

    /* 가격을 오른쪽으로 밀기 (가격+X가 오른쪽에 붙음) */
    .selected-domain-price {
        margin-left: auto !important;
    }
}

/* ========================================
   v16: 그누보드 선택값 g 글자 밑부분 짤림 수정
   ======================================== */
#board_setup_path {
    padding: 10px 36px 10px 14px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
}

.form-select {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.5 !important;
}

/* 750px 이하 서버환경 드롭다운 줄바꿈 */
@media screen and (max-width: 750px) {
    .form-select {
        height: auto !important;
        min-height: 44px !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }
}

/* v17 중복 제거됨 - 4967줄에서 통합 관리 (PC만 적용) */

@media screen and (max-width: 480px) {

    .selected-domain-card,
    .domain-summary-item {
        gap: 8px !important;
    }

    .selected-domain-name span:first-child,
    .domain-summary-item-name>span:first-child {
        word-break: break-all !important;
        white-space: normal !important;
    }
}

/* ========================================
   v18: 입력박스 힌트 폰트 크기 수정
   ======================================== */
.form-label,
.panel-form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.form-input::placeholder,
.form-select::placeholder,
.panel-input::placeholder,
.domain-search-input::placeholder {
    font-size: 13px !important;
    color: #adb5bd !important;
}

.form-input,
.panel-input,
.domain-search-input {
    font-size: 14px !important;
}

/* ========================================
   v19: 모바일 푸터 레이아웃 수정
   - Family Site 정렬 문제
   - 드롭다운 레이어 짤림
   - 대표이사/호스팅 제공 줄바꿈
   - 사업자정보확인 밑줄
   ======================================== */
@media screen and (max-width: 767px) {

    /* 푸터 내부 컨테이너 왼쪽 정렬 */
    #footer .gInner {
        text-align: left !important;
    }

    /* 푸터 상단 영역 - 세로 배치 */
    #footer .top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* corp 영역 - 사이트맵/고객센터/Family Site 한 줄 */
    #footer .corp {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 32px !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* util 영역 */
    #footer .corp .util {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 32px !important;
        white-space: nowrap !important;
    }

    /* Family Site */
    #footer .familySite {
        position: relative !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        line-height: 1 !important;
        margin-top: -2px !important;
    }

    #footer .familySite .eClick,
    #footer .familySite button {
        white-space: nowrap !important;
    }

    /* util 내 링크 - margin 제거, gap으로 간격 조절 */
    #footer .corp .util .link {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Family Site 버튼 높이 맞춤 */
    #footer .familySite .eClick,
    #footer .familySite button {
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #footer .familySite .site {
        bottom: auto !important;
        top: 100% !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    /* 푸터 하단 영역 - 좌우 padding만 제거, 하단 유지 */
    #footer .bottom {
        padding: 0 0 46px 0 !important;
    }

    /* infoList - 회사정보 영역 */
    #footer .infoList {
        display: block !important;
        font-size: 11px !important;
    }

    /* 각 정보 항목 - 각 줄에 표시 */
    #footer .infoList li {
        display: block !important;
        margin-bottom: 4px !important;
    }

    /* 사업자정보확인 밑줄 제거 */
    #footer .infoList a,
    #footer .infoList .txtLink {
        text-decoration: none !important;
    }

    #footer .infoList a:hover,
    #footer .infoList .txtLink:hover {
        text-decoration: underline !important;
    }
}

/* ========================================
   v20: 도메인명 길이 초과 시 처리 (PC/모바일 공통)
   - 도메인명 영역 최대한 활용
   - 보유 도메인, 무료 임시 도메인 모두 적용
   ======================================== */

/* PC/모바일 공통 - 도메인명 줄바꿈 처리 */
.domain-summary-item {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

.domain-summary-item-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.domain-summary-item-name {
    display: inline !important;
    word-break: break-all !important;
}

.domain-summary-item-name>span:first-child,
#summaryFreeDomainName {
    word-break: break-all !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline !important;
}

.domain-summary-item-name .badge-sm,
.badge-existing,
.badge-free {
    white-space: nowrap !important;
    display: inline !important;
    vertical-align: middle !important;
}

.domain-summary-item-price {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
}

/* PC - 무료 임시 도메인 영역 최대 활용 */
@media screen and (min-width: 768px) {

    #temp-domain-item .domain-summary-item-name,
    .domain-summary-item[id*="temp"] .domain-summary-item-name {
        display: inline !important;
    }

    #temp-domain-item #summaryFreeDomainName,
    #summaryFreeDomainName {
        word-break: break-all !important;
        white-space: normal !important;
        overflow: visible !important;
        display: inline !important;
    }

    #temp-domain-item .badge-free,
    .badge-free {
        display: inline !important;
        vertical-align: middle !important;
    }
}

/* ========================================
   v21: 슬라이드 패널 스크롤바로 인한 입력폼 잘림 수정
   - 도메인 소유자 정보 등 슬라이드 패널 내 입력 필드
   ======================================== */

/* 슬라이드 패널 본문 - 스크롤바 공간 확보 */
.slide-panel-body {
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* 패널 내 입력 필드 - 스크롤바 고려하여 너비 조정 */
.slide-panel-body .panel-input,
.slide-panel-body input.panel-input {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 패널 내 폼 그룹 전체 너비 활용 */
.slide-panel-body .panel-form-group,
.slide-panel-body .form-row {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================
   v22: 보유도메인 기본값 선택 안내 배경색 추가
   ======================================== */

select.error,
.panel-select.error {
    background-color: #FFF5F5 !important;
    border-color: #dc3545 !important;
}

/* 도메인 관련 필드 에러 스타일 */
.domain-search-input.error,
.owned-domain-select.error,
#directDomainValue.error {
    border-color: #dc3545 !important;
    background-color: #FFF5F5 !important;
}

/* 모바일 스크롤 시 헤더 타이틀 스타일 */
@media (max-width: 767px) {
    /* v25: 모바일 헤더 좌측 여백 - 상품페이지(ads_v2.css)와 동일하게 (HOSTINGQA-11631) */
    #header .gInner {
        padding: 0 24px;
    }

    /* v25: 모바일 헤더 로고 padding 리셋 - 상품페이지와 동일하게 (HOSTINGQA-11631) */
    #header .logo {
        padding: 0;
    }

    #header .mPath .path,
    #header.fixed .mPath .path {
        font-weight: 500;
    }

    /* v25: 모바일 헤더 로고 브랜드명 - ads_v2.css 기준으로 통일 (HOSTINGQA-11631) */
    #header .logo .brand {
        font-size: 15px;
        line-height: 28px;
    }
}

/* ========================================
   v23: 도메인 카드 배지+X버튼 한 줄 유지
   - 정보 입력 필요 배지와 X 버튼이 항상 같은 줄
   - 도메인 길이에 따라 배지+버튼 그룹이 줄바꿈됨
   ======================================== */

/* 도메인명 + 배지그룹 컨테이너 - inline으로 자연스럽게 흐름 */
.domain-summary-item-name {
    display: inline !important;
    word-break: break-all !important;
}

/* 도메인 텍스트 - 영역 끝에서 자동 줄바꿈 + 배지와 간격 */
.domain-summary-item-name > span:first-child {
    word-break: break-all !important;
    white-space: normal !important;
    margin-right: 2px !important;
}

/* 배지+X버튼 그룹 래퍼 */
.domain-badge-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
}

/* 그룹 내 배지 - 글자 짤림 방지 + margin 리셋 */
.domain-badge-group .badge-sm,
.domain-badge-group .badge-primary,
.domain-badge-group .badge-existing,
.domain-badge-group .badge-owned,
.domain-badge-group .domain-pending-badge {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: fit-content !important;
    margin-left: 0 !important;  /* 개별 margin 리셋, .domain-badge-group의 margin-left: 1px 사용 */
}

/* 그룹 내 X 버튼 - 동그라미 제거, 텍스트만 표시 */
.domain-badge-group .btn-domain-remove,
.domain-badge-group .domain-summary-remove {
    display: inline !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin-left: 2px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    vertical-align: middle !important;
}

.domain-badge-group .btn-domain-remove:hover,
.domain-badge-group .domain-summary-remove:hover {
    color: #dc3545 !important;
    background: none !important;
}

/* ========================================
   v24: 터치 디바이스 hover 스타일 비활성화
   - iOS sticky hover 문제 해결 (HOSTINGQA-11668)
   - iPhone에서 X버튼 삭제 후 빨간색 유지 문제
   ======================================== */
@media (hover: none) {

    .selected-domain-remove:hover,
    .domain-summary-remove:hover,
    .btn-domain-remove:hover,
    .btn-remove-domain:hover,
    .summary-domain-remove:hover {
        border-color: var(--color-border);
        color: var(--color-text-muted);
        background: none;
    }

    .domain-badge-group .btn-domain-remove:hover,
    .domain-badge-group .domain-summary-remove:hover {
        color: var(--color-text-muted) !important;
        background: none !important;
    }
}

/* ========================================
   v26: disabled option 회색 스타일 (모바일 대응)
   - 프로그램 자동설치 [설치안함] 선택 시 설치 경로 선택 비활성화 표시
   - iPhone Safari, iPad Safari/Chrome 대응
   - (HOSTINGQA-11685)
   ======================================== */
select option:disabled {
    color: #999;
}

/* disabled된 select 전체 회색 처리 */
select:disabled {
    color: #999;
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* ========================================
   v27: 비밀번호 UI 개선 (HOSTINGQA-11717)
   - 프로그레시브 바 4단계 (불가/낮음/중간/높음)
   - 조건 인디케이터 5개 (8~16자, 숫자, 소문자, 대문자, 특수문자)
   - 인풋 상태별 테두리/배경 색상 변경
   - cafe24PwCheck 플러그인 연동
   ======================================== */

/* 비밀번호 체크 결과 */
.pw-check-result {
    margin-top: 8px;
    display: none;
}

.pw-check-result.visible {
    display: block;
}

.pw-check-message {
    display: none;
}

.pw-check-grade {
    display: none;
}

/* 비밀번호 상태 뱃지 */
.pw-status-badge {
    display: none;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

.pw-status-badge.visible {
    display: inline-block;
}

.pw-status-badge.orange {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.pw-status-badge.green {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.pw-status-badge.dark-green {
    background-color: #e0f2f1;
    color: #00695c;
    border: 1px solid #80cbc4;
}

/* 비밀번호 조건 인디케이터 */
.pw-conditions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 12px;
}

.pw-conditions.hidden {
    display: none;
}

.pw-condition {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.pw-condition .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: background 0.2s;
}

.pw-condition.met {
    color: var(--color-success);
}

.pw-condition.met .dot {
    background: var(--color-success);
}

/* 비밀번호 인풋 상태별 테두리 및 배경 */
.form-input.pw-invalid {
    border-color: var(--color-danger) !important;
    background: var(--color-danger-light) !important;
}

.form-input.pw-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.form-input.pw-valid-unfocused {
    border-color: var(--color-border) !important;
    background: var(--color-background-white) !important;
}

/* 비밀번호 에러 메시지 (타이틀 옆 빨간 텍스트) */
.pw-error-msg {
    display: none;
    color: var(--color-danger);
    font-size: 12px;
    font-weight: 400;
    margin-left: 8px;
}

.pw-error-msg.visible {
    display: inline;
}

/* ========================================
   v28: '서비스 신청' 타이틀 숨김 (모든 해상도)
   - 헤더에 로고만 유지
   ======================================== */
.mPath,
.mPath .path,
p.path {
    display: none !important;
}

/* ========================================
   v29: 매출전표 인쇄 버튼
   ======================================== */
.btn-receipt-print {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
}

.btn-receipt-print:hover {
    background: #e9ecef;
    border-color: #ced4da;
    color: #212529;
}