/* common.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600&family=Noto+Sans+KR:wght@300;400;500&display=swap');

:root {
    /* ===== 피그마 원안 기준 시맨틱 컬러 토큰 (스타일가이드 v1 · 2026-08-26) =====
       모든 페이지가 공통으로 불러오는 common.css에 두고, 다른 css는 여기 값을 재사용함. */
    --bg: #f8f4ef;          /* background */
    --paper: #fdfaf6;       /* card */
    --secondary: #efe9e1;   /* secondary */
    --muted-bg: #ede7de;    /* muted — 배경 용도. 텍스트 반투명용 --text-muted와 이름이 겹쳐서 분리함 */
    --text: #27211b;        /* foreground */
    --destructive: #c0392b; /* destructive */

    --brown: #9b6845;  /* accent */
    --green: #5c7a62;  /* accent-green (찾아보기 섹션) */
    --blue: #6b7a9e;   /* accent-blue (준비하기 섹션) */
    --gold: #8a6e3c;   /* accent-gold (체험하기 섹션) */

    --color-sunday: #b43c3c;
    --color-saturday: #3c64b4;

    /* 텍스트 opacity 4단계 (확정) */
    --text-primary: rgba(39, 33, 27, .90);
    --text-secondary: rgba(39, 33, 27, .60);
    --text-tertiary: rgba(39, 33, 27, .45);
    --text-muted: rgba(39, 33, 27, .30);

    --line: rgba(39, 33, 27, 0.09);

    /* 폰트: 가이드 지정값은 Outfit(본문)+Lora(제목)이지만 둘 다 한글 글리프가 없어서
       그대로 적용하면 한글 텍스트가 전부 시스템 폴백 폰트로 깨짐. 최종 폰트 결정 전까지 보류. */
    --serif: "Noto Serif KR", Batang, serif;
    --sans: "Noto Sans KR", sans-serif;
}

/* 링크 밑줄 전역 제거 - common.css가 사실상 전 페이지에서 로드되니 여기 한 번만 두면 됨 */
a {
    text-decoration: none;

}

/* ===== 헤더 (site-header) =====
   fragments/common-includes.html이 모든 페이지에 삽입되는데, 이 스타일이 원래
   home.css에만 있어서 signup/signupSelect/login 등 다른 페이지에서는 헤더가
   그냥 스타일 없이(꾸미기 전 기본 HTML 모습으로) 떴었음. 모든 페이지가 공유하는
   fragment이니 스타일도 common.css로 옮겨서 어디서든 똑같이 보이게 함. */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    background: rgba(248, 244, 239, 0.97);

    border-bottom: 1px solid transparent;

    /* 페이지마다 body 기본 폰트가 달라서 헤더 글씨체가 페이지별로 들쭉날쭉했음 -
       헤더 안 모든 텍스트는 페이지 상관없이 항상 이 폰트로 통일 */
    font-family: "Noto Sans KR", sans-serif;

    transition:
            border-color .3s ease,
            box-shadow .3s ease;
}

.site-header.scrolled {
    border-bottom-color: rgba(39, 33, 27, .08);
    box-shadow: 0 2px 14px rgba(30, 22, 16, .025);
}

.header-inner {
    width: min(1440px, calc(100% - 100px));
    height: 74px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    height: 80px;
    width: 90px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-nav a {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: rgba(39, 33, 27, .42);
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: rgba(39, 33, 27, 0.85);
}

.main-nav span {
    color: rgba(39, 33, 27, .18);
    font-size: 13px;
}

.brand-circle {
    width: 32px;
    height: 32px;

    border: 1px solid rgba(39, 33, 27, .17);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Noto Serif KR", Batang, serif;
    font-size: 11px;

    color: rgba(39, 33, 27, .50);
}

.brand-name {
    font-family: "Noto Serif KR", Batang, serif;
    font-size: 17px;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 28px;
}

.language-area {
    display: flex;
    align-items: center;
    gap: 9px;
}

.language-area span {
    color: rgba(39, 33, 27, .18);
}

.language-button {
    border: 0;
    padding: 0;

    background: transparent;

    color: rgba(39, 33, 27, .34);
    font-size: 12px;

    cursor: pointer;
    font-family: "Noto Sans KR", sans-serif;
}

.language-button.active {
    color: rgba(39, 33, 27, .73);
}

/* 번역 모델 다운로드/번역 중 - 눌렀는데 멈춘 것처럼 보이지 않도록 표시 */
.language-button.i18n-loading {
    cursor: wait;
    opacity: .5;
}

.header-divider {
    width: 1px;
    height: 13px;

    background: rgba(39, 33, 27, .12);
}

.member-menu {
    display: flex;
    gap: 27px;
}

/* 로그인 / 미로그인 공통 */

.guest-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

/* 로그인 상태: 아이덴티티 줄(아이콘+닉네임+로그아웃) 기준점.
   마이페이지 트리거/드롭다운이 이 아래에 오버레이로 붙는다.
   클래스명은 common-includes.html의 실제 마크업(userEntity-*)에 맞춤. */
.userEntity-menu {
    position: relative;
}

.userEntity-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.userEntity-nickname-link {
    color: inherit;
    text-decoration: none;
}

.userEntity-nickname-link:hover {
    color: inherit;
}

.userEntity-nickname {
    font-size: 12px;
    font-weight: 500;
    color: rgba(39, 33, 27, .75);
    white-space: nowrap;
    cursor: pointer;
}

.identity-divider {
    width: 1px;
    height: 13px;

    background: rgba(39, 33, 27, .12);
}

.member-menu a,
.logout-button {
    font-size: 12px;
    color: rgba(39, 33, 27, .42);
    transition: color 0.2s ease;
}

.member-menu a:hover,
.logout-button:hover {
    color: rgba(39, 33, 27, 0.85);
}

.logout-form {
    margin: 0;
}

.logout-button {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* 마이페이지 드롭다운 - 닉네임에 마우스를 올리면 바로 아래로 뜬다(별도 트리거 없음) */

.mypage-menu {
    position: relative;
    cursor: default;

    /* 닉네임과 드롭다운 사이 빈틈에서 마우스가 빠져나가 hover가 풀리는 걸 방지 */
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.mypage-dropdown {
    position: absolute;

    top: calc(100% - 4px);
    right: 0;

    width: max-content;
    min-width: 150px;
    padding: 8px 0;

    background: #fdfaf6;

    border: 1px solid rgba(39, 33, 27, 0.08);

    box-shadow:
            0 8px 24px rgba(39, 33, 27, 0.06);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
}

.mypage-menu:hover .mypage-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mypage-dropdown a {
    display: block;
    padding: 9px 16px;
    white-space: nowrap;
}

.mypage-dropdown a:hover {
    background: rgba(39, 33, 27, 0.035);
}

/* ===== 언어선택 바 ===== */
.lang-bar{
    display:flex;justify-content:flex-end;align-items:center;gap:8px;
    padding:10px 20px;background:#efe6d3;border:1px solid #e3d7c3;border-radius:4px;
    max-width:520px;
}
.lang-opt{
    background:none;border:none;font-family:inherit;font-size:13px;font-weight:500;
    color:#7a6a58;cursor:pointer;padding:4px 8px;border-radius:4px;
}
.lang-opt.active{color:#fff;background:#4a2f22;font-weight:700;}
.lang-opt:hover:not(.active){color:#4a2f22;}

/* ===== 사찰 등록 요청 상태 배지 =====
   .badge 기본 스타일(signup.css)은 teal 배경 하나뿐이라, 대기/승인 구분용 색만
   여기서 덧붙임. admin 페이지도 signup.css를 같이 불러오니 .badge 자체는 재사용. */
.badge-pending{background:#c98a2e;}
.badge-approved{background:#2f6b5e;}

/* .btn-check(signup.css)의 위험 동작용 변형 - 색만 빨강으로 */
.btn-check.btn-danger{border-color:var(--destructive);color:var(--destructive);}
.btn-check.btn-danger:hover:not(:disabled){background:var(--destructive);color:#fff;}

/* .submit(signup.css)의 위험 동작용 변형 - 회원 탈퇴처럼 되돌리기 어려운 제출 버튼용 */
.submit.btn-danger{background:var(--destructive);}
.submit.btn-danger:hover:not(:disabled){background:#a52f22;}
.submit.btn-danger:disabled{background:var(--border);cursor:not-allowed;}

/* ===== 관리자 페이지 공용 알림 배너 =====
   기존 .check-result(signup.css)는 회원가입 폼의 작은 유효성 텍스트용이라 성공/완료
   안내로 쓰기엔 존재감이 없음(글자 색만 바뀌는 한 줄) - mypage/edit.css의
   .form-alert--ok와 같은 톤으로 박스형 배너를 만들어 admin 페이지 전반에서 재사용. */
.admin-alert{
    margin:16px 32px 0;padding:12px 16px;
    border-radius:6px;font-size:13.5px;line-height:1.5;
}
.admin-alert--ok{
    background:#e7f4ec;color:#1b6b3a;
    border:1px solid rgba(27,107,58,.28);
}
.admin-alert--err{
    background:#fbe2e2;color:var(--destructive);
    border:1px solid var(--destructive);
}

/* ===== 관리자 탭(회원관리/사찰관리) ===== */
.admin-tabs{
    display:flex;gap:4px;padding:0 32px;
    border-bottom:1px solid var(--border);
}
.admin-tab{
    padding:12px 18px;font-size:14px;font-weight:600;
    color:var(--text-secondary);text-decoration:none;
    border-bottom:2px solid transparent;margin-bottom:-1px;
}
.admin-tab.active{color:var(--brown);border-bottom-color:var(--brown);}

/* ===== 관리자 목록 테이블(회원관리/사찰관리/사찰 등록 요청) ===== */
.admin-table-wrap{overflow-x:auto;padding:0 32px;}
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.admin-table th,.admin-table td{
    padding:12px 14px;text-align:left;
    border-bottom:1px solid var(--line);white-space:nowrap;
}
.admin-table th{
    background:var(--muted-bg);color:var(--text-secondary);
    font-weight:700;font-size:12px;letter-spacing:.02em;
}
.admin-table tbody tr:hover{background:rgba(39,33,27,.02);}
.admin-table td.wrap{white-space:normal;}
.admin-table .row-actions{display:flex;gap:6px;align-items:center;}
.admin-table .row-actions form{margin:0;display:inline-flex;}
.admin-table .row-actions a,.admin-table .row-actions button{
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;height:28px;padding:0 12px;
    font-size:12px;line-height:1;white-space:nowrap;border-radius:4px;
    border:1px solid var(--brown);background:#fff;color:var(--brown);
    text-decoration:none;cursor:pointer;font-family:inherit;
}
.admin-table .row-actions a:hover,.admin-table .row-actions button:hover{
    background:var(--brown);color:#fff;
}
.admin-table .row-actions .danger{border-color:var(--destructive);color:var(--destructive);}
.admin-table .row-actions .danger:hover{background:var(--destructive);color:#fff;}

/* 장소 유형 배지 - 텍스트를 그냥 이어붙이면 안 읽혀서 유형별 색 알약으로 표시 */
.type-pill-group{display:flex;gap:4px;flex-wrap:wrap;}
.type-pill{
    display:inline-block;padding:2px 9px;border-radius:10px;
    font-size:11px;font-weight:700;color:#fff;white-space:nowrap;
}
.type-pill.sea{background:var(--blue);}
.type-pill.mountain{background:var(--green);}
.type-pill.river{background:var(--brown);}
.type-pill.urban{background:var(--gold);}
.type-pill.english{background:var(--text);}

/* 사찰 등록 요청 대기 알림 점 (드롭다운 메뉴 항목 옆) */
.notice-link{display:inline-flex;align-items:center;gap:6px;}
.notice-dot{
    display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--destructive);flex-shrink:0;
}
.nickname-dot{position:absolute;top:-2px;right:-9px;}

/* 사찰 등록 요청 상세 - 키/값 테이블 */
.detail-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.detail-table th,.detail-table td{
    padding:12px 14px;text-align:left;vertical-align:top;
    border-bottom:1px solid var(--line);
}
.detail-table th{
    width:140px;background:var(--muted-bg);color:var(--text-secondary);
    font-weight:700;font-size:12px;letter-spacing:.02em;white-space:nowrap;
}
.detail-table td{color:var(--text);}

/* 전체화면 로딩 오버레이 - showLoading()/hideLoading()(common.js)로 켜고 끔 */
.loading-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:rgba(39,33,27,.55);
}
.loading-overlay[hidden]{display:none;}
.loading-spinner-wrap{
    position:relative;width:64px;height:64px;
    display:flex;align-items:center;justify-content:center;
}
.loading-spinner{
    position:absolute;inset:0;border-radius:50%;
    border:4px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    animation:loading-spin .8s linear infinite;
}
.loading-bar-percent{
    position:relative;z-index:1;
    font-family:var(--sans);font-size:13px;font-weight:700;color:#fff;
}
.loading-overlay-text{
    font-family:var(--sans);font-size:14px;font-weight:600;color:#fff;
}
@keyframes loading-spin{to{transform:rotate(360deg);}}