/* 04_화면설계서 1.1 공통 디자인 규칙 */
:root {
  --font-base: 18px;          /* 보통. 크게 22px / 아주 크게 26px */
  --color-text: #1A1A1A;      /* 흰 배경 대비 17.4:1 */
  --color-sub: #555555;       /* 7.5:1 */
  --color-primary: #0B4A9E;   /* 8.4:1 */
  --color-focus-dark: #FFB800;
}

html { font-size: var(--font-base); }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background: #FFFFFF;
  /* 한글 줄바꿈: 단어 중간에서 끊지 않고, 주소처럼 아주 긴 단어만 끊음 (NFR-ACC-02) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 초점 표시 3px (NFR-ACC-06) */
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* hidden 속성은 언제나 숨긴다. .form-field { display:flex } 같은 규칙이 덮어써서
   스크립트가 꺼져 있을 때 쓸모없는 대분류 상자가 보이던 문제를 막는다(SA-05). */
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #FFFFFF; padding: 12px; z-index: 10; }

.site-header, .site-main, .site-footer { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.site-name { font-weight: 700; color: var(--color-text); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }

/* 화면낭독기에는 읽히고 화면에는 안 보이는 글자 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 머리 검색창: 높이 48px(화면설계서 3.2-1) */
.header-search { display: flex; flex: 1 1 280px; gap: 8px; }
.header-search input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 12px;
  font: inherit; border: 2px solid #767676; border-radius: 8px;
}
.header-search button { min-height: 48px; min-width: 72px; }

h1 { font-size: 1.6rem; line-height: 1.3; margin: 16px 0 8px; }
h2 { font-size: 1.35rem; line-height: 1.3; }
h3 { font-size: 1.15rem; line-height: 1.3; }

/* 버튼: 주 버튼 56px, 모든 버튼 48px 이상(NFR-ACC-05) */
button, .button-primary, .button-secondary {
  font: inherit; cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; text-decoration: none;
}
button, .button-primary { background: var(--color-primary); color: #FFFFFF; border: 2px solid var(--color-primary); font-weight: 700; }
.button-primary { min-height: 56px; }
.button-secondary { background: #FFFFFF; color: var(--color-primary); border: 2px solid var(--color-primary); font-weight: 700; }

a { color: var(--color-primary); }

/* 현재 위치(FR-U-04) */
.breadcrumb ol { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color: var(--color-sub); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 48px; }
.lead { color: var(--color-sub); margin-top: 0; }

/* 소분류 버튼: 줄이 넘치면 다음 줄로(가로 밀기 없음), 고른 버튼은 채움 + 굵게 */
.sub-buttons { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sub-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--color-primary); border-radius: 24px;
  color: var(--color-primary); background: #FFFFFF; text-decoration: none;
}
.sub-button[aria-current="page"] { background: var(--color-primary); color: #FFFFFF; font-weight: 700; }

/* 조건 고르기: 접힌 채 시작 */
.filter { border: 2px solid #767676; border-radius: 10px; margin: 16px 0; }
.filter summary {
  min-height: 48px; padding: 0 16px; display: flex; align-items: center;
  cursor: pointer; font-weight: 700; color: var(--color-primary);
}
.filter form { padding: 0 16px 16px; }
.filter fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.filter legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.hint { color: var(--color-sub); margin: 0 0 8px; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 8px; }
@media (min-width: 768px) { .choices { grid-template-columns: repeat(4, 1fr); } }
.choice { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
.choice input { width: 24px; height: 24px; margin: 0; flex: none; }

.selected-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 16px; margin: 16px 0; background: #F2F6FC; border-radius: 10px;
}
.selected-filter p { margin: 0; font-weight: 700; }
.empty-result { padding: 16px; margin: 16px 0; border: 2px dashed #767676; border-radius: 10px; }
.empty-result p { margin-top: 0; }

/* 링크 카드 목록: 767px 이하 1열, 768px 이상 2열(화면설계서 1.1) */
.link-section { margin-top: 32px; }
.link-section h2 .count { font-weight: 400; color: var(--color-sub); }
.card-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .card-list { grid-template-columns: repeat(2, 1fr); } }
.card-list > li { display: flex; }

/* 링크 카드(화면설계서 2장) */
.link-card {
  display: flex; flex-direction: column; width: 100%;
  padding: 16px; border: 1px solid #767676; border-radius: 12px; background: #FFFFFF;
}
.link-name { margin: 0 0 8px; }
.badges { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  padding: 2px 10px; border-radius: 6px; font-size: 1rem;   /* 기본 18px 이상(04 1.1): 글자만 키우고 모양은 그대로 */
  border: 1px solid #767676; background: #FFFFFF; color: var(--color-text);
}
.badge-public { background: #E6F4EA; color: #155A2E; border-color: #155A2E; font-weight: 700; }   /* 7.3:1 */
.badge-private { background: #EDEDED; color: #404040; border-color: #404040; font-weight: 700; }
.notice { margin: 0 0 8px; padding: 8px 12px; border-radius: 6px; font-weight: 700; }
.notice-paid { background: #FFF1D6; color: #7A4100; }
.notice-error { background: #FDECEE; color: #A1001B; }
.link-summary { margin: 0 0 8px; }
.link-meta { margin: 0; color: var(--color-sub); }
.phone-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* 사이트 가기: 카드 폭 전체, 높이 56px, 두 줄 */
.card-spacer { flex: 1 0 16px; }   /* 카드 높이가 달라도 버튼을 카드 아래쪽에 맞춘다 */
.go-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: 8px 16px;
  background: var(--color-primary); color: #FFFFFF; border-radius: 8px; text-decoration: none;
}
.go-main { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.go-sub { font-size: 1rem; }   /* "새 창에서 열립니다"도 기본 18px 이상 */
.report-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; }

/* 입력 폼(관리자 로그인 등) */
.narrow { max-width: 480px; }
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.form-field label { font-weight: 700; }
.form-field input {
  min-height: 56px; padding: 0 12px; font: inherit;
  border: 2px solid #767676; border-radius: 8px; background: #FFFFFF; color: var(--color-text);
}
.form-field input[aria-invalid="true"], .form-field .input-validation-error { border-color: #A1001B; }
.field-error { color: #A1001B; font-weight: 700; }
.field-error:empty { display: none; }
.button-wide { width: 100%; }
.notice-box { padding: 12px 16px; border-radius: 8px; font-weight: 700; }
.notice-fail { background: #FDECEE; color: #A1001B; }
.notice-ok { background: #E6F4EA; color: #155A2E; }

/* 관리자 공통 머리 */
.admin-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px; margin-top: 8px; background: #F2F6FC; border-radius: 10px;
}
.admin-bar p { margin: 0; }

/* ===== 관리자 화면(화면설계서 4장): PC 1280px 기준, 글자·버튼 크기는 사용자 화면과 같음 ===== */
.admin-wide .site-header, .admin-wide .site-main, .admin-wide .site-footer { max-width: 1280px; }
.admin-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 상태 배지: 색 + 글자(NFR-ACC-04) */
.status {
  display: inline-block; padding: 2px 10px; border-radius: 6px; border: 1px solid currentColor;
  font-size: 0.9rem; font-weight: 700; white-space: nowrap;
}
.status-ok { background: #E6F4EA; color: #155A2E; }
.status-warning { background: #FFF1D6; color: #7A4100; }
.status-error { background: #FDECEE; color: #A1001B; }
.status-needs-review { background: #E8EEF8; color: #0B4A9E; }
.status-review-due { background: #FFFFFF; color: #A1001B; }
.status-unchecked { background: #EDEDED; color: #404040; }
.status-inactive { background: #FFFFFF; color: #404040; border-style: dashed; }

/* 처리할 것 */
.todo h2 { margin-bottom: 8px; }
.todo-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.todo-list a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border: 2px solid #767676; border-radius: 10px; color: var(--color-text); text-decoration: none; font-weight: 700;
}

/* 조건 고르기 */
.admin-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 16px; border: 2px solid #767676; border-radius: 10px; }
.admin-filter .form-field { margin-bottom: 0; }
.admin-filter select, .admin-filter input {
  min-height: 48px; padding: 0 12px; font: inherit; border: 2px solid #767676; border-radius: 8px; background: #FFFFFF;
}
.form-field-grow { flex: 1 1 240px; }
.admin-filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.result-count { margin: 16px 0 8px; }

/* 목록 표: 좁은 화면에서는 표만 가로로 민다 */
.table-wrap { overflow-x: auto; border: 1px solid #767676; border-radius: 10px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #C8C8C8; }
.admin-table thead th { background: #F2F6FC; white-space: nowrap; }
.admin-table thead a { display: inline-flex; align-items: center; min-height: 48px; }
.admin-table tbody th { font-weight: 400; }
.th-sub, .cell-sub { display: block; font-size: 0.85rem; font-weight: 400; color: var(--color-sub); }
.cell-name a { font-weight: 700; display: inline-flex; align-items: center; min-height: 48px; }
.cell-url { display: block; font-size: 0.85rem; color: var(--color-sub); word-break: break-all; }
.cell-review-due { color: #A1001B; font-weight: 700; }
.cell-number { text-align: right; }
.cell-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cell-actions form { margin: 0; }
.button-small { min-height: 48px; padding: 0 12px; font-size: 0.95rem; white-space: nowrap; }

/* 링크 등록·수정(SA-05) */
.link-form { max-width: 760px; }
.link-form select, .link-form textarea {
  min-height: 56px; padding: 8px 12px; font: inherit; color: var(--color-text);
  border: 2px solid #767676; border-radius: 8px; background: #FFFFFF;
}
.link-form textarea { resize: vertical; line-height: 1.6; }
.form-group { border: 0; padding: 0; margin: 0 0 16px; }
.form-group legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.form-group .notice { margin-top: 8px; }
.form-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.validation-box ul { margin: 8px 0 0; padding-left: 1.2em; font-weight: 400; }
.validation-box p { margin: 0; }
.validation-summary-valid { display: none; }
.field-check { margin: 4px 0 0; }
.field-check:empty { display: none; }
.field-check-fail { color: #A1001B; font-weight: 700; }
.field-check-ok { color: #155A2E; }
.field-check a { display: inline-flex; align-items: center; min-height: 48px; }

/* 링크 상세(SA-06) */
.detail-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 16px 0; }
.detail-actions form { margin: 0; }
.deactivate { flex-basis: 100%; max-width: 640px; }
.deactivate > summary { list-style: none; width: fit-content; }
.deactivate > summary::-webkit-details-marker { display: none; }
.deactivate[open] > summary { margin-bottom: 8px; }
.deactivate-form { padding: 16px; border: 2px solid #A1001B; border-radius: 10px; }
.deactivate-form textarea { min-height: 72px; padding: 8px 12px; font: inherit; border: 2px solid #767676; border-radius: 8px; }
.button-danger { background: #A1001B; border-color: #A1001B; color: #FFFFFF; }
.detail-section { margin-top: 32px; }
.detail-info { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 960px) { .detail-info { grid-template-columns: 360px 1fr; } }
.detail-preview .link-card { max-width: 360px; }
.go-button-preview { opacity: 0.85; cursor: default; }
.field-table { width: 100%; border-collapse: collapse; }
.field-table th, .field-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #C8C8C8; }
.field-table th { width: 11em; font-weight: 700; background: #F2F6FC; }
.cell-url-link { word-break: break-all; display: inline-flex; align-items: center; min-height: 48px; }
.admin-table-compact { min-width: 760px; }
.cell-change { word-break: break-word; }

.pager ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border: 2px solid var(--color-primary); border-radius: 8px; text-decoration: none; }
.pager a[aria-current="page"] { background: var(--color-primary); color: #FFFFFF; font-weight: 700; }

/* 다른 분류 보기 */
.other-categories { margin-top: 48px; }
.other-categories ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .other-categories ul { grid-template-columns: repeat(3, 1fr); } }
.category-button {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 8px; border: 2px solid var(--color-primary); border-radius: 10px;
  color: var(--color-primary); font-weight: 700; text-decoration: none;
}

/* 대분류 카드: 모바일 2열, 누르는 영역 넉넉하게(NFR-ACC-05) */
.category-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.category-card {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 96px; padding: 12px; border: 1px solid #767676; border-radius: 10px;
  color: var(--color-text); text-decoration: none;
}
.category-name { font-weight: 700; }
.category-desc { display: none; color: var(--color-sub); }
@media (min-width: 768px) { .category-desc { display: block; } }

.site-footer { color: var(--color-sub); margin-top: 48px; }

/* CSV 가져오기(SA-09) */
.hint-list { color: var(--color-sub); padding-left: 1.2em; }
.hint-list strong { color: var(--color-text); }
.upload-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 16px; border: 2px solid #767676; border-radius: 10px; max-width: 760px; }
.upload-form .form-field { margin-bottom: 0; flex: 1 1 320px; }
.upload-form input[type="file"] { min-height: 56px; padding: 12px; font: inherit; border: 2px dashed #767676; border-radius: 8px; background: #FFFFFF; }
/* 누를 수 없는 버튼: 회색 바탕에 흰 글자(대비 4.5:1) + 아래 이유 문구로 알린다(색만으로 알리지 않음) */
button[disabled], .button-primary[disabled] { background: #767676; border-color: #767676; color: #FFFFFF; cursor: not-allowed; }

/* 점검 결과 안내(SA-05·SA-06): 색과 글자를 함께 쓴다 */
.notice-info { background: #E8EEF8; color: #0B4A9E; font-weight: 400; word-break: break-all; }
.notice-warn { background: #FFF1D6; color: #7A4100; }

/* 홈 큰 검색창(화면설계서 3.1): 높이 56px, 보이는 이름표 */
.big-search { margin: 8px 0 24px; }
.big-search label { display: block; font-weight: 700; margin-bottom: 4px; }
.big-search-row { display: flex; gap: 8px; }
.big-search-row input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; font: inherit;
  border: 2px solid #767676; border-radius: 8px; background: #FFFFFF; color: var(--color-text);
}
.big-search-row button { min-width: 88px; }
.site-main h1 .count { font-weight: 400; color: var(--color-sub); }
.link-section h2 a { color: var(--color-text); }

/* ===== 신고(SU-04, 화면설계서 3.4) ===== */
.report-kinds { border: 0; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.report-kinds legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
/* 큰 라디오 버튼: 높이 56px, 줄 전체를 누를 수 있게 */
.report-choice {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px;
  border: 2px solid #767676; border-radius: 10px; cursor: pointer; font-weight: 700;
}
.report-choice input { width: 24px; height: 24px; margin: 0; flex: none; }
.report-choice:has(input:checked) { border-color: var(--color-primary); background: #F2F6FC; }
.report-form textarea {
  min-height: 120px; padding: 8px 12px; font: inherit; line-height: 1.6; resize: vertical;
  border: 2px solid #767676; border-radius: 8px; background: #FFFFFF; color: var(--color-text);
}
.report-form textarea[aria-invalid="true"] { border-color: #A1001B; }
.form-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* 스팸 막이 칸: 화면 밖으로 보낸다(display:none은 일부 프로그램이 건너뛰므로 쓰지 않음) */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ===== 관리자 메뉴 ===== */
.admin-nav ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--color-primary); border-radius: 10px; text-decoration: none; font-weight: 700;
}
.admin-nav a[aria-current="page"] { background: var(--color-primary); color: #FFFFFF; }
.nav-count { font-weight: 400; }

/* ===== 신고 처리함(SA-08)·링크 상세 신고 내역 ===== */
.cell-memo { white-space: pre-line; word-break: break-word; max-width: 420px; }
.row-status-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.row-status-form select, .bulk-report-form select {
  min-height: 48px; padding: 0 12px; font: inherit; border: 2px solid #767676; border-radius: 8px; background: #FFFFFF;
}
.bulk-report-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; margin: 8px 0 16px; background: #F2F6FC; border-radius: 10px; }
.bulk-report-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.bulk-report-form legend { font-weight: 700; padding: 0; float: left; margin-right: 8px; }

/* ===== 글자 크기(FR-U-07): 서버가 쿠키를 읽어 html에 class를 붙인다. 모든 크기는 rem이라 함께 커진다 ===== */
html.font-large { --font-base: 22px; }
html.font-xlarge { --font-base: 26px; }
.font-size { display: flex; align-items: center; gap: 8px; }
.font-size-title { color: var(--color-sub); }
.font-size ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 4px; }
.font-size-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 12px;
  border: 2px solid var(--color-primary); border-radius: 8px; background: #FFFFFF; color: var(--color-primary); text-decoration: none;
}
/* 고른 크기: 채움 + 굵은 글자 + 밑줄(색만으로 구분하지 않음) */
.font-size-button.is-current { background: var(--color-primary); color: #FFFFFF; font-weight: 700; text-decoration: underline; }

/* 머리의 저장한 사이트 링크 */
.saved-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* ===== 저장(SU-08) ===== */
.save-button {
  display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 48px; margin-top: 8px; padding: 4px 16px;
  background: #FFFFFF; color: var(--color-primary); border: 2px solid var(--color-primary); font-weight: 700;
}
.save-button.is-saved { background: #E6F4EA; color: #155A2E; border-color: #155A2E; }
.save-button-preview { opacity: 0.7; cursor: default; border-radius: 8px; }
.notice-box.notice-plain { word-break: keep-all; font-weight: 700; }

/* ===== 오류 안내(SU-07) ===== */
.error-page { max-width: 640px; }
.error-buttons { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.error-buttons a { width: 100%; min-height: 56px; }
.error-code { color: var(--color-sub); }

/* 좁은 화면·큰 글자에서도 가로로 밀리지 않게 줄을 바꾼다(NFR-ACC-02: 320px 폭, 200% 확대) */
.font-size { flex-wrap: wrap; max-width: 100%; }
.font-size ul { flex-wrap: wrap; }
.font-size-button { padding: 0 10px; }
.saved-link [data-saved-count] { margin-left: 0.3em; font-weight: 400; }
.header-search { min-width: 0; max-width: 100%; }
.header-search input { width: 0; }   /* 글자 칸의 기본 폭(20자)이 줄을 밀지 않게. 실제 폭은 flex로 채운다 */
/* 아주 큰 글자(26px)에서 "온라인·오프라인" 같은 긴 글자가 카드를 밀지 않게, 필요할 때만 글자 사이에서 줄을 바꾼다 */
.card-list > li { min-width: 0; }
.link-card { min-width: 0; overflow-wrap: anywhere; }
/* 폭 100% 버튼은 안쪽 여백까지 포함해서 맞춘다(좁은 화면에서 밀림 방지) */
.error-buttons a, .button-wide, .save-button { box-sizing: border-box; }

/* ===== 분류 관리(SA-07) ===== */
.category-table { min-width: 900px; }
.move-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.move-buttons form, .active-form, .rename-form { margin: 0; }
.rename-form { display: flex; flex-wrap: wrap; gap: 8px; }
.rename-form input {
  min-height: 48px; min-width: 200px; padding: 0 12px; font: inherit; border: 2px solid #767676; border-radius: 8px; background: #FFFFFF;
}
.active-form { margin-top: 8px; }

/* ===== 꼬리 안내 링크 ===== */
.footer-links ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 48px; }

/* ===== 소개·처리방침 같은 긴 글 화면(SU-05·SU-06) ===== */
.prose { max-width: 720px; }
.prose h2 { margin-top: 32px; }
.prose h3 { margin-top: 20px; }
.prose li { margin-bottom: 4px; }
.prose-toc { padding: 12px 16px; margin: 16px 0; background: #F2F6FC; border-radius: 10px; }
.prose-toc ol { margin: 0; padding-left: 1.4em; }
.prose-toc a { display: inline-flex; align-items: center; min-height: 48px; }
.summary-box { padding: 12px 20px; margin: 16px 0; border: 2px solid var(--color-primary); border-radius: 10px; }
.summary-box h2 { margin: 8px 0; }
.summary-box ol { padding-left: 1.4em; margin: 0 0 8px; font-weight: 700; }
/* 초안 표시와 [확인 필요]: 색뿐 아니라 글자와 테두리로 구분 */
.draft-banner { padding: 12px 16px; margin: 16px 0; background: #FFF1D6; color: #7A4100; border: 2px dashed #7A4100; border-radius: 10px; }
.prose p > strong:first-child { overflow-wrap: anywhere; }
.prose-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prose-table th, .prose-table td { padding: 8px 12px; text-align: left; vertical-align: top; border: 1px solid #767676; }
.prose-table thead th { background: #F2F6FC; }
@media (max-width: 640px) {
  /* 좁은 화면: 표를 칸마다 한 줄씩 쌓아 가로로 밀리지 않게 */
  .prose-table, .prose-table tbody, .prose-table tr, .prose-table th, .prose-table td { display: block; width: auto; }
  .prose-table thead { position: absolute; left: -9999px; }
  .prose-table tr { margin-bottom: 12px; border: 1px solid #767676; }
  .prose-table th, .prose-table td { border: 0; }
}

/* ===== 시범 운영 안내 띠(Site:TrialMode) ===== */
/* 글자는 rem이라 글자 크기 설정을 따르고, 긴 글은 줄을 바꿔 가로로 밀리지 않는다. 색뿐 아니라 글자로 알린다. */
.trial-banner {
  box-sizing: border-box; width: 100%; padding: 8px 16px; text-align: center; font-weight: 700;
  background: #FFF1D6; color: #7A4100; border-bottom: 2px solid #7A4100; overflow-wrap: anywhere;
}

/* ===== 접속 통계(SA-10) ===== */
.stat-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat-card { padding: 12px 16px; border: 2px solid #767676; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.stat-card-total { border-color: var(--color-primary); background: #F2F6FC; }
.stat-label { color: var(--color-sub); }
.stat-value { font-size: 1.35rem; }
.range-choices ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.range-choices a[aria-current="true"] { background: var(--color-primary); color: #FFFFFF; text-decoration: underline; }
.stats-table { min-width: 560px; }
.bar { width: 100%; min-width: 160px; height: 16px; }