/*
 * 디자인 토큰 — [UD-2] 컬러·타이포·요소 스타일가이드 정본.
 *
 * 색·간격·타이포를 여기 한 곳에 모읍니다. 페이지 CSS에서 하드코딩하지 말고
 * 반드시 변수를 쓰세요 — 시안이 바뀌면 이 파일만 고치면 되게 하기 위함입니다.
 */
:root {
    /* ── 브랜드 ── */
    --navy-900: #0D1626;   /* 최상단 바·푸터 */
    --navy-800: #152238;   /* 주조색 — 버튼·제목 */
    --navy-700: #1E3050;   /* 그라디언트 보조 */
    --gold-500: #C9A45C;   /* 강조 — CTA·활성 표시 */
    --gold-300: #E3C98F;   /* 어두운 배경 위 강조 텍스트 */

    /* ── 중립 ── */
    --bg:        #F7F5F0;  /* 페이지 배경(따뜻한 아이보리) */
    --surface:   #FFFFFF;
    --text:      #22293A;
    --text-mute: #6B7280;
    --line:      rgba(21, 34, 56, .12);
    --danger:    #B4432F;  /* 오류·마감임박 — [UD-3] 화면 시안 값([UD-2]는 #B0433C로 적었지만 화면 정본을 따릅니다) */
    --success:   #3E6B4F;  /* [UD-2] 07 시맨틱 확장색 — 확인 피드백 전용, 마케팅 요소에 쓰지 않음 */
    --gold-700:  #8A6A2C;  /* 골드 틴트 배경 위 글자(노출 중·접수완료 배지) — [UD-3] admin */

    /* ── 타이포 ── */
    --font-sans:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-serif: "Noto Serif KR", serif;
    /* 영문 디스플레이 — 지표 숫자처럼 시안이 세리프로 쓰는 자리.
       한글에는 쓰지 마세요(Cormorant에 한글 글리프가 없어 폴백으로 떨어집니다). */
    --font-display: "Cormorant Garamond", "Noto Serif KR", serif;

    /* ── 레이아웃 ── */
    --container: 1200px;
    --radius: 2px;         /* 시안은 각진 모서리를 씁니다 */
    --header-h: 72px;
    --m-header-h: 56px;    /* 모바일 헤더 — 전체메뉴가 이 높이 아래부터 덮습니다([UD-3] MobileHeader) */

    /* ── 아이콘(가상 요소용 마스크) — ::after처럼 태그를 넣을 수 없는 자리에 씁니다.
          background로 색을 칠하고 mask로 모양을 냅니다. 모양은 layout/icons.html · Ui.icon()과 같습니다. ── */
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* hidden 속성은 display를 지정한 클래스에 밀립니다. 화면 상태를 전부 hidden으로
   여닫으므로 여기서 못을 박습니다. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--navy-800); }
a:hover { color: var(--gold-500); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.35; margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ── 버튼 ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: inherit; font-size: 15px; font-weight: 700;
    padding: 15px 30px; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer; transition: .2s;
}
.btn-primary { background: var(--gold-500); color: var(--navy-800); }
.btn-primary:hover { background: var(--gold-300); color: var(--navy-800); }
.btn-outline { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-outline:hover { border-color: var(--gold-500); color: var(--gold-300); }
.btn-dark { background: var(--navy-800); color: #fff; }
.btn:disabled { background: rgba(21, 34, 56, .08); color: #9AA1AD; cursor: not-allowed; }

/* ── 선 아이콘 — templates/layout/icons.html · Ui.icon() ──
   크기는 글자 크기(1em), 색은 글자색을 따릅니다. 글자 기호(× ‹ › ▾ ✓ ✎)는 글꼴마다 크기·기준선이 달라
   고정된 상자 안에서 위아래로 어긋나 SVG로 바꿨습니다(2026-09-12). 상자 쪽은 display:grid + place-items:center. */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }

/* ── 폼 ── */
.field { width: 100%; box-sizing: border-box; background: var(--bg);
    padding: 15px 18px; font-family: inherit; font-size: 14.5px;
    color: var(--text); border: 1px solid rgba(21, 34, 56, .15); border-radius: var(--radius); }
/* 한 줄 입력칸은 높이를 못 박습니다 — line-height: normal은 글꼴·브라우저마다 달라 같은 줄의 input(49px)과
   select(51px — line-height를 무시)가 어긋났습니다. 52px은 [SD-3] 공통 §7의 모바일 입력칸 높이입니다.
   :where()로 우선순위를 0으로 둡니다 — 작은 칸(관리자 .num-input 등)은 클래스 하나로 덮어쓸 수 있습니다. */
:where(input.field:not([type=checkbox], [type=radio], [type=file]), select.field) { height: 52px; }
.field:focus { outline: none; border-color: var(--gold-500); }
.field.is-error { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 13px; margin-top: 6px; }

/* 셀렉트 — 브라우저 기본 화살표는 칸 오른쪽 끝에 붙고 기기마다 모양이 달라, 사이트 아이콘과 같은 꺾쇠로 바꿉니다 */
select.field { -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }

/* 체크박스 — 사이트·관리자 공통 한 벌(2026-09-12). 브라우저 기본 13px 상자는 글자 높이와 맞지 않고 기기마다 모양이 달랐습니다.
   18px 사각 · 체크하면 Navy 채움 + 흰 체크 · 초점은 골드 외곽선.
   라벨(flex, 위 정렬) 첫 줄의 가운데에 오도록 위 여백을 줍니다 — 줄 높이(1.6em)와 상자(18px)의 차이의 절반. */
input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center;
    width: 18px; height: 18px; margin: calc((1.6em - 18px) / 2) 0 0; font: inherit; vertical-align: middle; cursor: pointer;
    background: var(--surface); border: 1.5px solid rgba(21, 34, 56, .32); border-radius: var(--radius);
    transition: background-color .15s, border-color .15s; }
input[type="checkbox"]::before { content: ''; width: 12px; height: 12px; background: #fff; transform: scale(0); transition: transform .15s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="checkbox"]:checked { background: var(--navy-800); border-color: var(--navy-800); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--gold-500); }
input[type="checkbox"]:checked:hover:not(:disabled) { border-color: var(--navy-800); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── 상태 표시 ── */
.badge { display: inline-block; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 100px; white-space: nowrap; }
.badge-open   { background: rgba(21, 34, 56, .07); color: var(--navy-800); }
.badge-almost { background: rgba(180, 67, 47, .10); color: var(--danger); }
.badge-closed { background: rgba(21, 34, 56, .05); color: #9AA1AD; }

/* 로딩 스켈레톤 — 데이터가 늦게 와도 레이아웃이 튀지 않게 */
.skeleton { background: linear-gradient(90deg, rgba(21,34,56,.06) 25%, rgba(21,34,56,.11) 37%, rgba(21,34,56,.06) 63%);
    background-size: 400% 100%; animation: shimmer 1.2s ease infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.empty { color: var(--text-mute); text-align: center; padding: 48px 24px; }

@media (max-width: 960px) {
    .container { padding: 0 20px; }
    /* 모바일 하단 플로팅 바(56px)·관리자 탭바(62px) 위로 띄웁니다 — 가리면 버튼을 못 누릅니다. */
    .toast-host { bottom: 84px; }
}

/* ══════════ 여러 화면이 공유하는 요소 ══════════ */
/* 탭·페이지네이션·토스트·표·모달은 5개 이상 화면에서 같은 모양으로 쓰입니다.
   페이지 CSS마다 다시 쓰면 시안이 갈리므로 여기 한 벌만 둡니다. */

/* 뷰 전환 탭 — 모바일에서는 가로 스크롤([SD-3] 각 문서 §7) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; background: none; border: none; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-mute);
    padding: 14px 20px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--navy-800); border-bottom-color: var(--gold-500); }

/* 필터 칩 — 갤러리 분류·FAQ 분류·성과 유형 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 100px;
    font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-mute);
    padding: 8px 18px; cursor: pointer; transition: .18s; }
.chip:hover { border-color: var(--gold-500); color: var(--text); }
.chip.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* 페이지네이션 — Ui.pagination()이 그립니다 */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.page-btn { min-width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0 10px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-mute); }
.page-btn .icon { font-size: 16px; }
.page-btn:hover:not(:disabled) { border-color: var(--gold-500); color: var(--text); }
.page-btn.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* 토스트 — Ui.toast(). [UD-3] 시안: 하단 중앙 · Navy · 좌측 골드 3px 룰 */
.toast-host { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 300;
    display: grid; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--navy-800); color: #fff; font-size: 13.5px; font-weight: 600;
    padding: 14px 26px; border-radius: var(--radius); border-left: 3px solid var(--gold-500);
    box-shadow: 0 16px 40px -12px rgba(13, 22, 38, .5); animation: toast-in .22s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* 목록 표 — 공지 목록·자료실·관리자 전반 */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { padding: 15px 16px; text-align: left; font-size: 14.5px;
    border-bottom: 1px solid var(--line); }
.table th { background: rgba(21, 34, 56, .03); font-size: 13px; font-weight: 700;
    color: var(--text-mute); letter-spacing: .02em; white-space: nowrap; }
.table tbody tr:hover { background: rgba(201, 164, 92, .06); }
.table-scroll { overflow-x: auto; }

/* 모달 — 후기 작성·관리자 등록/수정·접수 상세 */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(13, 22, 38, .55);
    display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: var(--surface); border-radius: var(--radius); width: min(560px, 100%);
    max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(13, 22, 38, .3); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 19px; }
/* 닫기 — 누르기 쉬운 36px 상자. 음수 여백으로 머리 높이·오른쪽 끝선은 그대로 둡니다 */
.modal-close { display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -8px -8px 0; padding: 0;
    background: none; border: none; border-radius: var(--radius); cursor: pointer; font-size: 22px; color: var(--text-mute); }
.modal-close:hover { color: var(--navy-800); }
.modal-body { padding: 24px 26px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px;
    padding: 18px 26px; border-top: 1px solid var(--line); }

/* 폼 행 */
.form-row { margin-bottom: 16px; }
.form-row > label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.form-row .hint { font-size: 12.5px; color: var(--text-mute); margin: 6px 0 0; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 섹션 제목 */
.page-head { padding: 52px 24px 28px; }
.page-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold-500); font-weight: 700; }
.page-title { font-size: clamp(26px, 3.4vw, 38px); margin: 0; }
.page-desc { margin: 14px 0 0; color: var(--text-mute); font-size: 15.5px; }

/* 본문 HTML(에디터 서식) — Ui.html()을 거친 값만 넣습니다 */
.rich { font-size: 15.5px; line-height: 1.85; }
.rich img { max-width: 100%; height: auto; }
.rich table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.rich th, .rich td { border: 1px solid var(--line); padding: 11px 14px; }
.rich th { background: rgba(21, 34, 56, .04); }
.rich h2, .rich h3 { margin: 28px 0 12px; }
.rich ul, .rich ol { padding-left: 22px; }

@media (max-width: 720px) {
    .form-grid2 { grid-template-columns: 1fr; }
}