/*
|--------------------------------------------------------------------------
| 금손지도 - 공통 스타일
| /css/common.css
|--------------------------------------------------------------------------
| 작가 / 프로그램 / 관리자 화면에서 공통으로 사용하는 CSS입니다.
|
| 포함 내용
| - 사이트 기본 글꼴과 링크
| - 공통 페이지 폭과 제목
| - 입력폼 / 체크박스 / 라디오 / 파일선택
| - 메시지 / 버튼 / 주소검색
| - 공통 상태배지 / 프로그램 현황 숫자
| - PC / 태블릿 / 스마트폰 반응형
|
| 주의
| - common.css는 페이지 전용 CSS보다 먼저 불러옵니다.
| - 페이지별 디자인은 artist.css / program.css에서 덮어쓸 수 있습니다.
|--------------------------------------------------------------------------
*/

/* =========================================================
   01. 기본 설정
========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;

    background: #fff;
    color: #222;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        "맑은 고딕",
        sans-serif;

    font-size: 18px;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| input, button 등이 브라우저 기본 글꼴을 사용하지 않고
| 사이트 글꼴을 그대로 사용하도록 합니다.
|--------------------------------------------------------------------------
*/

input,
select,
textarea,
button {
    font-family: inherit;
}


/* 링크 */

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   02. 공통 페이지 전체 영역
========================================================= */

.register-wrap {
    box-sizing: border-box;

    width: calc(100% - 40px);
    max-width: 860px;

    margin: 50px auto 80px;

    color: #222;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   03. 페이지 제목
========================================================= */

.page-title {
    margin-bottom: 38px;
}

.page-title h1 {
    margin: 0 0 14px;

    color: #222;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
}

.page-title p {
    margin: 0;

    color: #666;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   04. 오류 / 안내 메시지
========================================================= */

.error-box {
    box-sizing: border-box;

    margin-bottom: 30px;
    padding: 17px 19px;

    border: 1px solid #d9a6a6;
    border-radius: 6px;

    background: #fff8f8;

    color: #8e3030;

    font-size: 17px;
    line-height: 1.6;
}


/* =========================================================
   05. 각 입력 영역
========================================================= */

.form-section {
    padding: 38px 0;

    border-top: 1px solid #ddd;
}


/*
|--------------------------------------------------------------------------
| 첫 번째 영역은 조금 더 진한 선으로 구분
|--------------------------------------------------------------------------
*/

.form-section:first-of-type {
    border-top: 2px solid #333;
}


/* =========================================================
   06. 섹션 제목
========================================================= */

.section-title {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
}

.section-title span {
    color: #777;

    font-size: 16px;
    font-weight: 700;
}

.section-title h2 {
    margin: 0;

    color: #222;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| 각 영역에 대한 짧은 안내글
|--------------------------------------------------------------------------
*/

.section-help {
    margin: 8px 0 28px;

    color: #666;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   07. 입력 항목 한 줄
========================================================= */

.form-row {
    margin-bottom: 27px;
}


/*
|--------------------------------------------------------------------------
| 입력항목 제목
|--------------------------------------------------------------------------
*/

.form-row label,
.form-label {
    display: block;

    margin-bottom: 9px;

    color: #222;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| 필수 입력 표시 *
|--------------------------------------------------------------------------
*/

.form-row strong {
    color: #b24848;
}


/* =========================================================
   08. 입력창
========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
select,
textarea {
    box-sizing: border-box;

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #bcbcbc;
    border-radius: 6px;

    background: #fff;
    color: #222;

    font-size: 18px;
    line-height: 1.5;

    transition:
        border-color 0.15s ease,
        outline-color 0.15s ease;
}


/*
|--------------------------------------------------------------------------
| 한 줄 입력창 최소 높이
|--------------------------------------------------------------------------
*/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
select {
    min-height: 54px;
}


/*
|--------------------------------------------------------------------------
| 여러 줄 입력창
|--------------------------------------------------------------------------
*/

textarea {
    min-height: 145px;

    resize: vertical;
}


/*
|--------------------------------------------------------------------------
| 입력창 선택 상태
|--------------------------------------------------------------------------
*/

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #52675f;
    outline-offset: 1px;

    border-color: #52675f;
}


/*
|--------------------------------------------------------------------------
| placeholder
|--------------------------------------------------------------------------
*/

input::placeholder,
textarea::placeholder {
    color: #999;

    font-size: inherit;

    opacity: 1;
}


/* =========================================================
   09. 파일 선택
========================================================= */

input[type="file"] {
    max-width: 100%;

    color: #444;

    font-size: 16px;
    line-height: 1.5;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 13px;

    border: 1px solid #bbb;
    border-radius: 5px;

    background: #f5f5f5;
    color: #333;

    font-family: inherit;
    font-size: 15px;

    cursor: pointer;
}


/* =========================================================
   10. 입력 도움말
========================================================= */

.field-help {
    margin: 8px 0 0;

    color: #777;

    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   11. PC 2열 입력폼
========================================================= */

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;
}


/* =========================================================
   12. 공예분야
========================================================= */

.category-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}


/*
|--------------------------------------------------------------------------
| 공예분야 한 항목
|--------------------------------------------------------------------------
*/

.category-item {
    display: flex;
    align-items: center;

    box-sizing: border-box;

    min-height: 56px;

    margin: 0;
    padding: 12px 14px;

    gap: 10px;

    border: 1px solid #ddd;
    border-radius: 6px;

    background: #fff;

    color: #333;

    font-size: 17px;
    font-weight: 400;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| 체크박스 크기
|--------------------------------------------------------------------------
*/

.category-item input[type="checkbox"] {
    flex: 0 0 auto;

    width: 21px;
    height: 21px;

    margin: 0;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| 체크된 분야는 아주 살짝 구분
|--------------------------------------------------------------------------
*/

.category-item:has(input:checked) {
    border-color: #677a73;
    background: #f7f9f8;
}


/* =========================================================
   13. 라디오 버튼
========================================================= */

.radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-height: 48px;

    gap: 26px;
}

.radio-group label {
    display: flex;
    align-items: center;

    margin: 0;

    gap: 8px;

    color: #333;

    font-size: 18px;
    font-weight: 400;

    cursor: pointer;
}

.radio-group input[type="radio"] {
    flex: 0 0 auto;

    width: 21px;
    height: 21px;

    margin: 0;
}


/* =========================================================
   14. 등록 버튼 영역
========================================================= */

.submit-area {
    padding-top: 38px;

    border-top: 2px solid #333;

    text-align: center;
}

.submit-area p {
    margin: 0 0 20px;

    color: #666;

    font-size: 17px;
    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| 메인 등록 버튼
|--------------------------------------------------------------------------
*/

.submit-button {
    box-sizing: border-box;

    width: 100%;
    max-width: 360px;

    min-height: 60px;

    padding: 13px 20px;

    border: 0;
    border-radius: 6px;

    background: #384f47;
    color: #fff;

    font-size: 19px;
    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s ease;
}

.submit-button:hover {
    background: #2d403a;
}

.submit-button:focus {
    outline: 3px solid #aab9b4;
    outline-offset: 2px;
}


/* =========================================================
   15. 태블릿 / 모바일
========================================================= */

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

    /*
    |--------------------------------------------------------------------------
    | 화면 좌우 여백
    |--------------------------------------------------------------------------
    */

    .register-wrap {
        width: calc(100% - 32px);
        max-width: none;

        margin: 30px auto 60px;

        font-size: 19px;
        line-height: 1.75;
    }


    /* 페이지 제목 */

    .page-title {
        margin-bottom: 32px;
    }

    .page-title h1 {
        margin-bottom: 12px;

        font-size: 30px;
        line-height: 1.35;
    }

    .page-title p {
        font-size: 18px;
        line-height: 1.75;
    }


    /* 각 영역 */

    .form-section {
        padding: 34px 0;
    }


    /* 영역 제목 */

    .section-title {
        margin-bottom: 8px;
    }

    .section-title span {
        font-size: 16px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .section-help {
        margin-bottom: 26px;

        font-size: 17px;
        line-height: 1.7;
    }


    /* 입력 항목 */

    .form-row {
        margin-bottom: 29px;
    }

    .form-row label,
    .form-label {
        margin-bottom: 10px;

        font-size: 18px;
    }


    /*
    |--------------------------------------------------------------------------
    | 입력창
    |--------------------------------------------------------------------------
    */

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        padding: 15px 16px;

        font-size: 18px;
        line-height: 1.5;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    select {
        min-height: 57px;
    }

    textarea {
        min-height: 155px;
    }


    /* 도움말 */

    .field-help {
        margin-top: 9px;

        font-size: 16px;
        line-height: 1.65;
    }


    /*
    |--------------------------------------------------------------------------
    | PC에서 2열이었던 입력폼을 모바일에서는 1열로 변경
    |--------------------------------------------------------------------------
    */

    .form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | 공예분야는 모바일에서도 2열 유지
    | 13개 항목을 한 줄씩 표시하면 페이지가 지나치게 길어지기 때문
    |--------------------------------------------------------------------------
    */

    .category-grid {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .category-item {
        min-height: 59px;

        padding: 13px 12px;

        font-size: 17px;
        line-height: 1.4;
    }

    .category-item input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }


    /* 라디오 */

    .radio-group {
        gap: 22px;
    }

    .radio-group label {
        font-size: 18px;
    }

    .radio-group input[type="radio"] {
        width: 22px;
        height: 22px;
    }


    /* 파일선택 */

    input[type="file"] {
        font-size: 16px;
    }


    /*
    |--------------------------------------------------------------------------
    | 등록버튼
    |--------------------------------------------------------------------------
    */

    .submit-area {
        padding-top: 34px;
    }

    .submit-area p {
        font-size: 17px;
    }

    .submit-button {
        max-width: none;

        min-height: 62px;

        font-size: 19px;
    }

}


/* =========================================================
   16. 아주 작은 스마트폰
========================================================= */

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

    .register-wrap {
        width: calc(100% - 28px);
    }


    /*
    |--------------------------------------------------------------------------
    | 제목은 너무 커지지 않도록 조금 조정
    |--------------------------------------------------------------------------
    */

    .page-title h1 {
        font-size: 28px;
    }


    /*
    |--------------------------------------------------------------------------
    | 공예분야 2열 유지
    |--------------------------------------------------------------------------
    */

    .category-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }

    .category-item {
        min-height: 58px;

        padding: 11px 9px;

        gap: 7px;

        font-size: 16px;
    }

    .category-item input[type="checkbox"] {
        width: 21px;
        height: 21px;
    }


    /*
    |--------------------------------------------------------------------------
    | 라디오 선택지가 좁으면 자연스럽게 다음 줄로 내려갑니다.
    |--------------------------------------------------------------------------
    */

    .radio-group {
        gap: 18px;
    }

}




/* =========================================================
   17. 주소 검색 공통
   작가 주소와 프로그램 특정장소 주소에서 함께 사용
========================================================= */

.address-search-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 10px;
}

.address-search-button {
    min-height: 54px;

    border: 1px solid #777;
    border-radius: 6px;

    background: #fff;
    color: #333;

    font-size: 17px;
    font-weight: 600;

    cursor: pointer;
}

.address-search-button:hover {
    background: #f5f5f5;
}

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

    .address-search-row {
        grid-template-columns: 1fr 120px;
    }

    .address-search-button {
        min-height: 57px;
        font-size: 17px;
    }

}


/* =========================================================
   18. 상태 / 보조 링크 공통
========================================================= */

.mypage-small {
    color: #888 !important;

    font-size: 15px;
}
/* 상태 배지 */

.status-badge {
    padding: 5px 10px;

    border-radius: 4px;

    font-size: 15px;
    font-weight: 700;
}

.status-badge.waiting {
    background: #f1eee5;
    color: #705e31;
}

.status-badge.reviewing {
    background: #edf1f4;
    color: #455a69;
}

.status-badge.approved {
    background: #edf3ef;
    color: #395a48;
}
.mypage-text-button {
    color: #465c54;

    font-size: 16px;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   19. 프로그램 현황 / 관리 버튼 공통
   마이페이지와 프로그램 목록에서 함께 사용
========================================================= */

.program-count-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.program-count-grid > div {
    padding: 22px 12px;

    text-align: center;
}

.program-count-grid > div + div {
    border-left: 1px solid #ddd;
}

.program-count-grid span {
    display: block;

    margin-bottom: 5px;

    color: #777;

    font-size: 15px;
}

.program-count-grid strong {
    font-size: 25px;
}
.mypage-main-button {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-height: 56px;

    padding: 12px 20px;

    border-radius: 6px;

    background: #384f47;
    color: #fff;

    font-size: 18px;
    font-weight: 700;
}

.mypage-main-button.disabled {
    background: #e5e5e5;
    color: #888;

    cursor: default;
}


/* =========================================================
   20. 저장 완료 메시지 / 취소 링크 공통
========================================================= */

.success-box {
    margin-bottom: 30px;
    padding: 17px 19px;

    border: 1px solid #aac1b4;
    border-radius: 6px;

    background: #f5faf7;

    color: #365443;

    font-size: 17px;
    line-height: 1.6;
}
.edit-cancel {
    margin-top: 18px;

    text-align: center;
}

.edit-cancel a {
    color: #666;

    font-size: 16px;

    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   21. 숫자 입력 공통
   시간 / 비용 / 인원 등 number 입력에 사용
========================================================= */

input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid #bcbcbc;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 18px;
}

input[type="number"]:focus {
    outline: 2px solid #52675f;
    outline-offset: 1px;
    border-color: #52675f;
}



/* =========================================================
   22. 공통 컴포넌트 모바일 보정
========================================================= */

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

    .program-count-grid > div {
        padding: 20px 5px;
    }

    .program-count-grid span {
        font-size: 15px;
    }

    .program-count-grid strong {
        font-size: 24px;
    }

    .mypage-text-button {
        font-size: 17px;
    }

    .edit-cancel a {
        font-size: 17px;
    }

    input[type="number"] {
        min-height: 57px;
        padding: 15px 16px;
        font-size: 18px;
    }
}