/*
 * 언어더하기 재팬 — 공통 스타일
 *
 * 원칙: 클래스 없이 HTML 요소만으로도 보기 좋게 (템플릿을 덜 고치고 입힘), 모바일 대응.
 * 일본 사이트는 <body class="storefront">, 관리자·작가 화면은 상단 메뉴(nav.area-nav)로 구분한다.
 *
 * 목차
 *   1. 디자인 값 (색·간격)
 *   2. 기본 요소 (본문·제목·링크·목록)
 *   3. 상단 메뉴 · 하단
 *   4. 폼 · 입력
 *   5. 버튼
 *   6. 표
 *   7. 알림 · 배지
 *   8. 관리자 · 작가 화면 — 단락 구분
 *   9. 관리자 · 작가 화면 — 부품 (동의서·일괄 등록·판매 방식)
 *  10. 일본 사이트 — 공통 (머리·카드·버튼 링크)
 *  11. 일본 사이트 — 홈 · 목록 · 필터
 *  12. 일본 사이트 — 자료 상세 · 추천
 *  13. 일본 사이트 — 가입 유도 · 크리에이터 안내
 *  14. 보조 클래스
 *  15. 반응형 · 인쇄
 */


/* ======================================================================
   1. 디자인 값 (색·간격)
   ====================================================================== */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-alt: #f1f3f5;     /* 표 머리·짝수 줄 */
  --text: #1f2328;
  --muted: #5f6670;
  --line: #e2e4e8;
  --accent: #2f6fb3;
  --accent-hover: #255a92;
  --accent-soft: #eaf1fa;     /* 단락 제목 띠 */
  --accent-strong: #1f4f82;   /* 강조 글자 (크리에이터 안내 단계 등) */
  --surface-soft: #f8fafc;    /* 메뉴 hover 배경 */
  --danger-bg: #fdecec;
  --danger: #b42318;
  --ok-bg: #ecf7ee;
  --ok: #1e6b34;
  --warn-bg: #fff6e0;
  --warn: #8a5a00;
  --warm: #e8842e;            /* 가정용 입구·배지 (따뜻한 보조색, 2026-10-31 홈 개편 — 파랑 신뢰 바탕은 유지) */
  --warm-soft: #fff3e8;
  --warm-line: #f6cfae;
  --warm-text: #9a4d0c;       /* 살구 바탕 위 글자 (대비 4.5:1 이상) */
  --radius: 8px;
  --section-gap: 2.6rem;      /* 관리자·작가 화면 단락 사이 */
  --shadow-sm: 0 6px 18px rgba(31, 46, 61, .06);   /* 그림자 (일본 사이트) */
  --shadow-md: 0 14px 34px rgba(31, 46, 61, .09);
  --shadow-lg: 0 22px 54px rgba(31, 46, 61, .12);
  font-size: 16px;
}


/* ======================================================================
   2. 기본 요소 (본문·제목·링크·목록)
   ====================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 24px 16px 48px;
  max-width: 1080px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo",
    "Noto Sans JP", "Noto Sans KR", "Yu Gothic", "Malgun Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.6rem; line-height: 1.3; margin: 0.5em 0 0.8em; }
h2 { font-size: 1.2rem; margin: 1.8em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.4em 0 0.5em; }
p { margin: 0.6em 0; }
small { color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; white-space: pre-wrap; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { padding-left: 1.3em; }
ul > li, ol > li { margin: 6px 0; }

details > summary { cursor: pointer; color: var(--accent); }

/* 자료 목록 등 본문 바로 아래 목록: 한 줄씩 카드처럼 */
body > ul { padding-left: 0; }
body > ul > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; list-style: none; }


/* ======================================================================
   3. 상단 메뉴 · 하단
   ====================================================================== */

/* 본문 안 메뉴(카테고리 등) 기본 간격 */
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 16px; }
nav form { display: inline; margin: 0; padding: 0; background: none; border: 0; }
nav button { padding: 4px 10px; font-size: 0.85rem; }

/* 관리자·작가 상단 메뉴 */
body > nav:first-child {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 20px; font-size: 0.95rem;
}

/* 일본 사이트 상단 */
header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 32px;
  position: sticky;
  top: 0;
  z-index: 20;
  border-color: rgba(205, 214, 224, .9);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
/* 상단 메뉴가 붙어 있으므로 페이지 안 이동(#…) 때 그 높이만큼 띄운다. 900px 이하는 메뉴가 붙지 않음 (15번) */
.storefront [id] { scroll-margin-top: 88px; }
/* 한국 로고의 우상단 +를 일본 사이트의 파란색으로 계승. 글자는 선명한 실제 텍스트. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--text); }
.brand:hover { color: var(--text); text-decoration: none; }
.brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px 0; }
.brand-word {
  position: relative; display: block; padding-right: 15px;
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 1.45rem; font-weight: 800; line-height: 1.25; letter-spacing: -.055em;
}
.brand-plus { position: absolute; top: 0; right: 0; width: 11px; height: 11px; color: var(--accent); }
.brand-plus::before, .brand-plus::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.brand-plus::before { top: 4px; left: 0; width: 11px; height: 3px; }
.brand-plus::after { top: 0; left: 4px; width: 3px; height: 11px; }
.brand-region { margin-top: 4px; padding-left: 2px; color: var(--accent-strong); font-size: .58rem; font-weight: 700; line-height: 1; letter-spacing: .32em; }
footer .brand-footer { color: var(--text); margin-right: 8px; }
.brand-footer .brand-word { font-size: 1.1rem; }
.brand-footer .brand-region { font-size: .52rem; }
header.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; background: none; border: 0; padding: 0; margin: 0; }
header.site nav > a, header.site .nav-logout button {
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: .91rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
header.site nav > a:hover, header.site .nav-logout button:hover {
  text-decoration: none;
  background: var(--surface-soft);
  color: var(--accent-strong);
}
header.site .nav-signup {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  box-shadow: 0 5px 13px rgba(49, 111, 176, .18);
}
.storefront h1, .storefront h2, .storefront h3 { letter-spacing: -.025em; }
.storefront h1 { color: #152235; }

/* 일본 사이트 하단 */
footer { margin-top: 64px; font-size: 0.85rem; color: var(--muted); padding: 24px 0 6px; }
footer hr { margin-bottom: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 10px; background: none; border: 0; padding: 0; row-gap: 8px; }
footer nav a { color: var(--muted); }
footer nav a:hover { color: var(--accent); }
/* 사이트 하단: PC 는 로고 칸 | 메뉴 칸 (메뉴가 줄바꿈돼도 메뉴 칸 안에서 정렬), 모바일은 로고 위 · 메뉴 2열 */
.site-footer .footer-top { display: grid; grid-template-columns: auto 1fr; column-gap: 48px; align-items: start; }
.site-footer .brand-footer { margin: 0; justify-self: start; }
.site-footer .footer-nav { display: block; margin: 0; }
.site-footer .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer .footer-nav li { margin: 0; }
.site-footer .footer-nav ul.footer-links { padding-top: 6px; }
.site-footer .footer-nav ul.footer-links a { color: var(--text); }
.site-footer .footer-nav ul.footer-legal { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8rem; }
.site-footer .footer-nav a:hover { color: var(--accent); }
.site-footer .footer-biz { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .site-footer .footer-top { grid-template-columns: 1fr; row-gap: 12px; }
  .site-footer .footer-nav ul.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding-top: 0; }
  .site-footer .footer-nav ul.footer-legal { gap: 0 18px; margin-top: 6px; padding-top: 4px; }
  .site-footer .footer-nav a { display: inline-block; padding: 7px 0; }
}



/* ======================================================================
   4. 폼 · 입력
   ====================================================================== */

form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 12px 0;
}
/* 입력 칸 없이 버튼만 있는 폼(카트에 넣기·다운로드·공개·중지 등)도 상자 없이 — 숨은 값(CSRF 등)은 있어도 됨 */
form:has(> button:only-child),
form:where(:not(:has(input:not([type=hidden]), select, textarea))) { background: none; border: 0; padding: 0; margin: 12px 0; }
/* 표·목록·메뉴 안의 폼, 한 줄짜리 폼은 상자 없이 */
form[style*="inline"], td form, li form, nav form { background: none; border: 0; padding: 0; margin: 0 4px 0 0; }

label { display: block; margin: 10px 0; }
label > span:first-child { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=month],
input[type=url], input[type=tel],
select, textarea {
  display: block; width: 100%; max-width: 480px; margin-top: 4px;
  padding: 9px 11px; font: inherit; color: inherit;
  background: #fff; border: 1px solid #c9ced6; border-radius: 6px;
}
textarea { min-height: 100px; }
td input, td select, td textarea { display: inline-block; width: auto; margin: 2px 4px 2px 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
input.inline-input { display: inline-block; width: 6em; padding: 4px 8px; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0; }
fieldset label { display: inline-block; margin-right: 12px; }
legend { padding: 0 6px; color: var(--muted); font-size: 0.9rem; }


/* ======================================================================
   5. 버튼
   ====================================================================== */

button {
  font: inherit; font-weight: 600; cursor: pointer; line-height: 1.35;
  padding: 9px 18px; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff;
}
button:hover { background: var(--accent-hover); }
button:disabled { background: #aab1bb; cursor: not-allowed; }
/* 보조 동작(카트에서 빼기 등): 흰 바탕 외곽선 */
button.secondary { background: #fff; color: var(--accent); border: 1px solid #b9c9dc; }
button.secondary:hover { background: var(--accent-soft); }
td button, li button { padding: 5px 12px; font-size: 0.85rem; }

/* 되돌리기 어려운 동작(삭제·환불·정지·退会)은 빨간 외곽선 버튼 */
form[action*="/delete"] button, form[action*="/refund"] button, form[action*="/suspend"] button,
form[action*="/withdraw"] button {
  background: #fff; color: var(--danger); border: 1px solid var(--danger);
}
form[action*="/delete"] button:hover, form[action*="/refund"] button:hover, form[action*="/suspend"] button:hover,
form[action*="/withdraw"] button:hover { background: var(--danger-bg); }


/* ======================================================================
   6. 표 — 좁은 화면에서는 가로 스크롤
   ====================================================================== */

table {
  display: block; overflow-x: auto; max-width: 100%;
  border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0;
}
/* display:block 인 표의 행 묶음을 표 폭만큼 넓힌다 (머리줄 배경·줄 구분선이 중간에서 끊기지 않게) */
table > tbody { display: table; width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
th { background: var(--surface-alt); font-size: 0.85rem; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tr:nth-child(even) td { background: #fafbfc; }
tr:hover td { background: #f3f7fc; }
/* 입력 폼이 든 칸은 줄바꿈 허용 (폼이 표 밖으로 밀려나지 않게) */
td:has(form), td:has(details) { white-space: normal; min-width: 220px; }


/* ======================================================================
   7. 알림 · 배지
   ====================================================================== */

/* role 속성으로 구분 — 템플릿이 이미 붙여 둠 */
[role=alert] { background: var(--danger-bg); color: var(--danger); border-radius: 6px; padding: 10px 14px; }
[role=status] { background: var(--ok-bg); color: var(--ok); border-radius: 6px; padding: 10px 14px; }
/* 주의(아직 할 일이 남음)는 노란색 */
[role=status].warn, .warn { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 10px 14px; border-left: 4px solid #e0a400; }
small[role=alert] { display: inline-block; padding: 2px 8px; margin-left: 6px; }

em { font-style: normal; font-size: 0.8rem; background: var(--ok-bg); color: var(--ok); padding: 2px 8px; border-radius: 999px; }

.pill, .status-pill { display: inline-block; width: fit-content; border-radius: 999px; padding: 4px 9px; font-size: .78rem; font-weight: 700; }
.storefront .pill, .storefront .status-pill { border: 1px solid transparent; } /* 일본 사이트: 무료·구매함 배지에 옅은 테두리 */
.status-pill { background: #eef0f3; color: var(--muted); }
.pill.free { background: #e8f6ee; color: #167242; border-color: #cfe8d9; }
.pill.owned { background: #edf1ff; color: #4057b2; border-color: #d6ddfb; }
.pill.home { background: var(--warm-soft); color: var(--warm-text); border-color: var(--warm-line); }


/* ======================================================================
   8. 관리자 · 작가 화면 — 단락 구분
   상단 메뉴(nav.area-nav)가 있는 화면에만 적용. 단락 제목(h2)을 색 띠로 만들어 어디서 단락이 바뀌는지 바로 보이게 한다.
   ====================================================================== */

body:has(> nav.area-nav) > h1 {
  margin: 0.3em 0 0.9em; padding-bottom: 0.45em; border-bottom: 2px solid var(--line);
}
body:has(> nav.area-nav) > h2,
body:has(> nav.area-nav) > div > h2,
body:has(> nav.area-nav) > form > h2 {
  margin: var(--section-gap) 0 0.9em;
  padding: 9px 14px;
  font-size: 1.08rem;
  background: var(--accent-soft);
  border: 0; border-left: 4px solid var(--accent); border-radius: 0 6px 6px 0;
}
/* 페이지 첫 단락은 h1 바로 아래라 간격을 줄인다 */
body:has(> nav.area-nav) > h1 + h2,
body:has(> nav.area-nav) > h1 + [role] + h2,
body:has(> nav.area-nav) > h1 + p + h2 { margin-top: 1.2em; }
/* h2 아래 첫 요소는 띠에 붙지 않게, 단락 안 요소끼리는 촘촘하게 */
body:has(> nav.area-nav) > h2 + * { margin-top: 0.6em; }
body:has(> nav.area-nav) > h3 { color: var(--muted); font-size: 1rem; }
/* 단락 설명 문단(작은 글씨)은 폭 제한 — 긴 줄은 읽기 어렵다 */
body:has(> nav.area-nav) > p, body:has(> nav.area-nav) > p > small { max-width: 78ch; }


/* ======================================================================
   9. 관리자 · 작가 화면 — 부품
   ====================================================================== */

/* 판매 방식(무료/유료): 고른 쪽 입력만 보이게 (JS 없이 :has) */
fieldset.pricing .paid-only { display: block; }
fieldset.pricing:has(input[value="FREE"]:checked) .paid-only { display: none; }
fieldset.pricing:has(input[value="PAID"]:checked) .free-only { display: none; }
fieldset.pricing:has(input[value="BUNDLE"]:checked) .paid-only,
fieldset.pricing:has(input[value="BUNDLE"]:checked) .free-only { display: none; }
fieldset.pricing .bundle-only { display: none; }
fieldset.pricing:has(input[value="BUNDLE"]:checked) .bundle-only { display: block; }

/* 목록 필터 링크 (자료 무료/유료, 동의서 대상 탭) */
.price-filter a { padding: 3px 10px; border-radius: 999px; }
.price-filter a.active { font-weight: 700; text-decoration: none; background: var(--text); color: #fff; }

/* 동의서 상자·본문 */
.terms-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; margin: 12px 0; }
.terms-body { white-space: pre-wrap; line-height: 1.75; max-height: 420px; overflow: auto; padding: 8px 0; }
.terms-box textarea, form[action^="/admin/terms"] textarea { max-width: none; line-height: 1.7; }
/* 줄 단위로 나눈 본문 (fragments/terms): 조항 제목만 굵게 */
.terms-formatted { white-space: normal; }
.terms-formatted p { margin: 0; white-space: pre-wrap; }
.terms-formatted p.terms-gap { height: .7em; }
.terms-formatted p.terms-heading { font-weight: 700; color: var(--text); }
/* 동의서 색 표시: 확정 필요 = 노랑, 새로 생기거나 바뀐 줄 = 초록, 없어지거나 바뀌기 전 줄 = 빨강 취소선 */
mark.terms-todo { background: #ffe58a; color: #5c4200; border-radius: 3px; padding: 0 2px; }
.terms-compared p.terms-added { background: #e3f6e8; border-left: 3px solid #2e9e55; padding-left: 6px; }
.terms-compared p.terms-removed { background: #fdecec; border-left: 3px solid #d04848; padding-left: 6px; color: #8a2d2d; text-decoration: line-through; }
.terms-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .88rem; margin: 6px 0; }
.terms-legend .terms-added-key, .terms-legend .terms-removed-key { padding: 0 6px; border-radius: 3px; }
.terms-legend .terms-added-key { background: #e3f6e8; border-left: 3px solid #2e9e55; }
.terms-legend .terms-removed-key { background: #fdecec; border-left: 3px solid #d04848; text-decoration: line-through; }
.terms-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.terms-actions button { margin: 0; }

/* 동의서 전문 팝업 (<dialog>): 머리·꼬리는 고정, 본문만 스크롤 */
.terms-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.terms-dialog[open] { display: flex; flex-direction: column; }
.terms-dialog::backdrop { background: rgba(20, 24, 30, .55); }
.terms-dialog header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.terms-dialog header h2 { margin: 0; padding: 0; border: 0; font-size: 1.1rem; }
.terms-dialog header p { margin: 2px 0 0; font-size: .88rem; }
.terms-dialog .terms-body { flex: 1; min-height: 0; max-height: none; overflow: auto; padding: 14px 18px; }
.terms-dialog footer { margin: 0; font-size: 1rem; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-alt); }
.terms-dialog footer button { margin: 0; }
.dialog-close { margin: 0; padding: 2px 10px; font-size: 1.4rem; line-height: 1; background: transparent; color: var(--muted); border: 0; }
.dialog-close:hover { background: var(--accent-soft); color: var(--text); }
button.link-button { margin: 6px 0 0 26px; padding: 0; background: none; border: 0; color: var(--accent); font-size: .88rem; text-decoration: underline; cursor: pointer; }
button.link-button:hover { background: none; }

/* 작가 가입 화면: 동의 항목 (항목마다 체크) */
.consent-list { padding-left: 1.2em; }
.consent-list li { margin: 10px 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.consent-list label { margin: 0; }
.consent-list small { display: block; margin: 4px 0 0 26px; }
.consent-list .consent-detail { margin: 6px 0 0 26px; font-size: .88rem; color: var(--muted); }
.consent-list .consent-detail ul { margin: 6px 0 0; }
.consent-list .consent-detail > summary { display: inline-block; padding: 6px 0; }

/* 목록 검색 · 페이지 이동 (회원·작가) */
.list-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.list-search input[type=search] { flex: 1 1 260px; max-width: 420px; margin: 0; }
.list-search button { margin: 0; }
.admin-pager { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 10px 0; font-size: .92rem; }
.admin-pager strong, .admin-pager a { min-width: 2em; text-align: center; padding: 2px 8px; border-radius: 6px; }
.admin-pager strong { background: var(--text); color: #fff; }
.admin-pager > span { margin-right: 6px; }

/* 작가 목록 한 줄 · 작가 상세 */
.author-list td { vertical-align: middle; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline; margin: 0; padding: 0; border: 0; background: none; }
.row-actions button, .row-actions .button-link { margin: 0 0 0 4px; padding: 4px 12px; font-size: .85rem; }
.status-pill.st-joined-ok { background: var(--ok-bg); color: var(--ok); }
.status-pill.st-pending, .status-pill.st-suspect { background: #fff4e5; color: #9a5b00; }
.register-box { margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 16px; }
.register-box > summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.register-box[open] > summary { margin-bottom: 8px; }
.info-table th { width: 140px; text-align: left; }
.info-table td { white-space: normal; overflow-wrap: anywhere; } /* 긴 이메일·안내문은 줄바꿈 (표 가로 스크롤 대신) */
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 0 12px; padding: 0; border: 0; background: none; }
.inline-form button { margin: 0; }
/* 초대 링크 + 복사 버튼 한 줄 */
.copy-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copy-row input { flex: 1 1 260px; max-width: 720px; margin: 0; }
.copy-row button { margin: 0; min-width: 7.5em; }

/* hidden 속성은 항상 숨김 (select 등에 display 가 지정돼 있어도) */
[hidden] { display: none !important; }

/* 관리자 화면 버튼 줄 (왼쪽부터 나란히) */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.toolbar .button-link { margin: 0; }
.list-search select { flex: 0 1 auto; width: auto; max-width: 260px; margin: 0; }

/* 동의서: 테스트용 버전 · 정식 배포 */
.terms-box.test-terms { border-left: 4px solid #e0a400; }
.promote-box { border: 1px solid #c9d8ea; background: #f5f9fd; border-radius: var(--radius); padding: 4px 18px 14px; margin: 14px 0; }
.promote-box h2 { margin-top: 12px; }
.inline-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.inline-fields label { margin: 0; }

/* 자료 목록 일괄 작업 */
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin: 8px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.bulk-bar select, .bulk-bar button { margin: 0; width: auto; max-width: 240px; }

/* 엑셀 일괄 수정 미리보기 */
.edit-preview td { white-space: normal; }
.edit-preview tr.invalid td { background: #fff7f5; }
.changes { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: .9rem; }
.changes dt { color: var(--muted); }
.changes dd { margin: 0; overflow-wrap: anywhere; }
.changes del { color: var(--danger); }
.changes ins { color: var(--ok); text-decoration: none; font-weight: 600; }
ol.steps li { margin: 4px 0; }

/* 자료 일괄 등록 */
.drop-zone { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin: 10px 0; }
.drop-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone p { margin: 6px 0; }
.drop-zone label.button-link { cursor: pointer; margin-right: 6px; }
.import-summary { font-size: 1.02rem; }
.fix-box { border: 1px solid #f0c9c2; background: #fff7f5; border-radius: var(--radius); padding: 4px 18px 10px; margin: 12px 0; }
.fix-box h2 { margin-top: 12px; }
.fix-box .inline-upload { margin: 4px 0; }
.text-danger { color: var(--danger); }
.import-table td.problems { white-space: normal; min-width: 220px; max-width: 420px; }
.import-table tr.invalid td { background: #fff7f5; }
.import-table tr.done td { background: #f3faf5; }
.problem-list { margin: 0; padding-left: 1.1em; font-size: .85rem; }
.problem-list.error { color: var(--danger); }
.problem-list.warn { color: #9a5b00; }
.override-form { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.override-form input { min-width: 0; flex: 1 1 140px; }
.probe-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.probe-form input { flex: 2 1 240px; min-width: 0; }
.probe-form select { flex: 1 1 200px; min-width: 0; }
.probe-verdict { padding: 10px 14px; border-radius: 10px; margin: 10px 0; overflow-wrap: anywhere; }
.probe-verdict.is-pass { background: var(--ok-bg); color: var(--ok); }
.probe-verdict.is-hold { background: var(--danger-bg); color: var(--danger); }
.probe-table tr.is-pass td { background: var(--ok-bg); }
.raw-json { max-height: 420px; overflow: auto; font-size: .8rem; background: var(--surface-alt); padding: 10px; border-radius: 8px; white-space: pre; }
.probe-queries { margin: 0; padding-left: 1.2em; }
.probe-copy { margin: 8px 0; }
.file-cell.missing { color: var(--danger); }
.progress-wrap { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.progress-wrap progress { flex: 1 1 auto; max-width: 420px; height: 14px; }
.inline-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-upload input[type=file], .inline-upload button { margin: 0; }

/* 작업 기록 */
.audit-table td.audit-detail { white-space: normal; min-width: 240px; max-width: 520px; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.audit-table tr.failed td { background: #fff7f5; }
.audit-table .status-pill { margin-top: 4px; }
.staff-table td.row-actions { white-space: normal; min-width: 200px; }
/* 회원 목록: 동작 버튼은 한 줄에 이어 붙이고(넘치면 줄바꿈), 좁은 화면에서는 회원 한 명 = 카드 한 장 (15장) */
.member-table td.member-actions { white-space: normal; min-width: 260px; }
.member-table td.member-email { white-space: normal; overflow-wrap: anywhere; min-width: 12em; }
.member-actions form { display: inline-block; margin: 2px 4px 2px 0; padding: 0; border: 0; background: none; }
.member-actions a { display: inline-block; margin: 4px 0; }
.staff-table td.row-actions form { margin: 2px 0; }
.small-link { font-size: .8rem; }
.list-search label.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.list-search label.inline input { margin: 0; }

/* 이메일 확인 경고 · 이메일 수정 */
.email-warning { margin: 4px 0 12px; padding: 10px 14px; border-radius: var(--radius); background: #fff4e5; color: #6b4200; }
.email-warning p { margin: 0 0 6px; }
.email-warning button { margin: 0 0 0 6px; }
.email-warning label { margin: 0; font-weight: 700; }
.inline-details { display: inline-block; margin-left: 12px; }
.inline-details > summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.email-edit { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.email-edit input[type=email] { margin: 0; min-width: 280px; }
.email-edit button { margin: 0; }
.email-edit .email-warning { flex-basis: 100%; }

/* 작가 일괄 등록 */
.bulk-steps { margin: 8px 0 12px; padding-left: 20px; }
.bulk-grid .bulk-disabled td { color: var(--muted); background: #fafafa; }
.bulk-grid .check-all { margin: 0; white-space: nowrap; }
.bulk-results .bulk-error td { background: var(--danger-bg); }
.bulk-results .bulk-invited td, .bulk-results .bulk-resent td { background: var(--ok-bg); }
.status-pill.st-new, .status-pill.st-resend, .status-pill.st-update { background: var(--ok-bg); color: var(--ok); }
.status-pill.st-joined, .status-pill.st-duplicate { background: #eef0f3; color: var(--muted); }
.status-pill.st-invalid, .status-pill.st-not_author { background: var(--danger-bg); color: var(--danger); }


/* 소셜 로그인 버튼 (각 서비스 색) */
.social-buttons { display: grid; gap: 8px; max-width: 360px; margin: 12px 0 16px; }
/* 아이콘은 왼쪽 고정, 문구는 버튼 가운데 (아이콘이 없는 제공자도 같은 높이·정렬) */
.social-btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 54px;
  border-radius: 8px; font-weight: 700; text-align: center; text-decoration: none; border: 1px solid transparent; line-height: 1.3; }
.social-btn:hover { text-decoration: none; filter: brightness(.96); }
.social-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.social-icon { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); }
/* LINE 가이드: 바탕 #06C755·글자/로고 흰색, 아이콘과 글자 사이 구분선 (검정 8%), 누름 = 검정 겹침 */
.social-line { background: #06c755; color: #fff; }
.social-line::before { content: ""; position: absolute; left: 46px; top: 8px; bottom: 8px; width: 1px; background: rgba(0, 0, 0, .08); }
.social-line:hover { filter: none; background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)), #06c755; }
.social-line:active { background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), #06c755; }
/* Google 가이드(라이트): 흰 바탕, 회색 테두리 #747775, 글자 #1F1F1F, 4색 G */
.social-google { background: #fff; color: #1f1f1f; border-color: #747775; font-weight: 600; }
.social-google .social-icon { width: 20px; height: 20px; left: 15px; }
.social-google:hover { filter: none; background: #f8f9fa; }
.social-yahoo { background: #ff0033; color: #fff; }
.social-kakao { background: #fee500; color: rgba(0, 0, 0, .85); }
.social-naver { background: #03c75a; color: #fff; }
.social-links { list-style: none; padding: 0; }
.social-links li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.social-links li strong { min-width: 120px; }

/* ======================================================================
   10. 일본 사이트 — 공통 (머리·카드·버튼 링크)
   ====================================================================== */

/* 일본 사이트 색·모서리 (관리자·작가 화면은 1번의 기본값 그대로) */
body.storefront {
  --bg: #f4f6f8;
  --text: #17202b;
  --muted: #66717f;
  --line: #dde3ea;
  --accent: #316fb0;
  --accent-hover: #255b91;
  --accent-soft: #eaf2fb;
  --radius: 12px;
}
body.storefront {
  max-width: 1180px;
  padding-top: 18px;
  background: radial-gradient(circle at 10% -10%, rgba(71, 126, 184, .08), transparent 34rem), linear-gradient(180deg, #f7f9fb 0%, var(--bg) 40%, #f5f6f7 100%);
}
/* 일본 사이트 단락 제목: 밑줄은 단락 자체(카드·띠)가 구분하므로 빼고, 단독 페이지(카트·마이페이지 등)에서만 쓴다 */
.storefront .section-heading h2, .storefront .store-section h2, .storefront .product-section h2 { border-bottom: 0; padding-bottom: 0; margin-top: 0.4em; }
.storefront main { display: block; width: 100%; }
.eyebrow { margin: 0 0 8px; font-size: .74rem; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.lead { font-size: 1.06rem; color: var(--muted); max-width: 62ch; line-height: 1.8; }
.text-link { font-weight: 700; }

.button-link {
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.button-link:hover { text-decoration: none; transform: translateY(-1px); }
.button-link.primary { background: var(--accent); color: white; box-shadow: 0 7px 16px rgba(49, 111, 176, .18); }
.button-link.primary:hover { background: var(--accent-hover); box-shadow: 0 10px 20px rgba(49, 111, 176, .24); }
.button-link.secondary:hover { background: var(--accent-soft); border-color: #a9bfd8; }
.button-link.secondary { background: white; color: var(--accent); border: 1px solid #b9c9dc; }
.action-row, .price-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.store-section { padding: 36px 0; position: relative; } /* 2026-10-31 58→36: 단락 사이가 너무 넓다는 소유자 지적 (홈 첫 화면을 촘촘히 줄인 뒤 아래만 넓게 남아 있던 것) */
.store-section + .store-section { border-top: 1px solid rgba(219, 225, 232, .78); }
.store-section.subtle {
  margin: 14px 0 20px;
  padding: 28px;
  background: linear-gradient(180deg, #f5f7fa, #eef2f6);
  border-radius: 16px;
  border: 1px solid #e0e6ed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.section-heading > div > p:last-child { max-width: 58ch; color: var(--muted); }
.section-heading > a { padding: 7px 10px; border-radius: 8px; }
.section-heading > a:hover { text-decoration: none; background: var(--accent-soft); }
.section-heading.compact { align-items: start; }

/* 자료 카드 */
.material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.material-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-color: #dde4ec;
  box-shadow: 0 3px 10px rgba(31, 46, 61, .035);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.material-card:hover { transform: translateY(-3px); border-color: #c8d7e7; box-shadow: var(--shadow-md); }
.material-thumb {
  min-height: 138px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e8eff6 100%);
  color: #7d8793;
  font-weight: 800;
  letter-spacing: .08em;
  border-bottom: 1px solid #e5ebf1;
}
.material-thumb img { width: 100%; height: 250px; padding: 8px; object-fit: contain; object-position: center; display: block; transition: transform .25s ease; }   /* 세로 표지를 자르지 않고 전체 표시 — PC 는 높이를 넉넉히 (190px 이면 표지가 카드 폭 1/3 로 작아 보임) */
.material-card:hover .material-thumb img { transform: scale(1.015); }
.material-body { padding: 18px; }
.material-body h2, .material-body h3 { border: 0; margin: 8px 0; padding: 0; font-size: 1.05rem; line-height: 1.45; }
.material-body h2 a, .material-body h3 a { color: var(--text); }
.material-body h2 a:hover, .material-body h3 a:hover { color: var(--accent); text-decoration: none; }
.card-meta { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.card-format { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 8px 0; }
.card-price, .price-line strong { color: #152235; }
.card-price { display: block; margin-top: 8px; }
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.material-body { min-width: 0; overflow-wrap: anywhere; }   /* 긴 영문·숫자가 카드 밖으로 나가지 않게 */

/* 휴대폰(760px 이하): 교재 카드 2열 — 메인·목록·카테고리·상세 추천 공통 (2026-10-26).
   1열이면 메인 6개 섹션 하나가 약 2,000px 이 되어 카테고리까지 화면 3장을 내려야 했다. 340px 이하는 1열 */
@media (max-width: 760px) {
  .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .material-thumb { min-height: 120px; }
  .material-thumb img { height: 150px; }
  .material-body { padding: 10px 12px 12px; }
  .material-body h2, .material-body h3 { font-size: 1rem; line-height: 1.5; margin: 6px 0 4px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .material-body .card-summary { font-size: .867rem; line-height: 1.6; margin: 4px 0; }
  .material-body .card-meta { font-size: .867rem; line-height: 1.5; margin: 4px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .material-body .card-format { font-size: .867rem; line-height: 1.5; margin: 6px 0; }
  .material-body .pill { padding: 3px 7px; font-size: .8rem; }
  .material-body .text-link { font-size: .933rem; }
  .material-body .price-line { gap: 4px 8px; }
  .material-body .card-price { font-size: 1rem; margin-top: 6px; word-break: keep-all; }   /* 「（税/込）」 처럼 중간에서 끊기지 않게 — 공백에서만 */
  .material-body .sale-box { gap: 2px 6px; }
  .material-body .list-price, .material-body .sale-off, .material-body .sale-until { font-size: .867rem; }
}
@media (max-width: 340px) {
  .material-grid { grid-template-columns: 1fr; }
}


/* ======================================================================
   11. 일본 사이트 — 홈 · 목록 · 필터
   ====================================================================== */

.hero-panel {
  display: grid;
  grid-template-columns: 1.7fr .8fr;
  gap: 28px;
  padding: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,250,253,.96)), var(--surface);
  border: 1px solid #d9e3ee;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 130, 188, .14), rgba(75,130,188,0));
  pointer-events: none;
}
.hero-panel h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 0; max-width: 9.5em; line-height: 1.14; }
.hero-copy { position: relative; z-index: 1; }
.hero-aside {
  align-self: center;
  padding: 24px;
  background: linear-gradient(180deg, #f2f7fd, #eaf2fb);
  border-radius: 14px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid #d7e5f4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.search-form label { font-weight: 700; color: var(--text); }

.search-form { padding: 0; border: 0; background: none; max-width: 680px; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-row input {
  max-width: none;
  margin: 0;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 10px;
  border-color: #cfd9e5;
  box-shadow: inset 0 1px 2px rgba(31, 46, 61, .03);
}
.search-row button { min-width: 84px; border-radius: 10px; box-shadow: 0 6px 14px rgba(49,111,176,.16); }
.search-summary { color: var(--muted); margin: 0 0 14px; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.category-grid a {
  padding: 18px 18px 18px 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  border-color: #dbe3eb;
  box-shadow: 0 2px 7px rgba(31,46,61,.025);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.category-grid a::after { content: "›"; position: absolute; right: 16px; color: #9aa7b5; font-size: 1.2rem; }
.category-grid a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: #c7d6e5;
  background: #fbfdff;
  box-shadow: var(--shadow-sm);
}
/* 홈 분야 카드 건수 (공개 자료가 있을 때만 그려짐) */
.category-grid a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-right: 36px; }
.category-grid .category-count { color: var(--muted); font-weight: 400; font-size: .88rem; white-space: nowrap; }

/* 홈 첫 화면 (2026-10-31 개편): 왼쪽 제목·검색, 오른쪽 입구 카드 2개(専門家=파랑 / ご家庭=살구). 큰 제목 영역을 줄여 무료 교재가 첫 화면에 보이게 */
.hero-panel.compact { grid-template-columns: 1.15fr 1fr; gap: 24px; padding: 30px 34px; align-items: start; }
.hero-panel.compact h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); max-width: none; margin-bottom: .35em; }
.hero-panel.compact .lead { margin: 0 0 14px; color: var(--muted); }
.hero-panel.compact .search-form { max-width: none; }
.entry-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; }
.entry-card { padding: 16px 16px 18px; background: white; border: 1px solid var(--line); border-radius: 14px; border-top: 4px solid var(--accent); box-shadow: var(--shadow-sm); display: grid; grid-template-rows: auto 1fr auto; gap: 6px; } /* 제목·설명·버튼 — 설명 길이가 달라도 버튼은 맨 아래, 두 카드 높이 같음 (2026-10-31 소유자 지적, 교재 카드 docs/25 6-4 와 같은 방식) */
.entry-card h2 { margin: 0; padding: 0; border: 0; font-size: 1.02rem; }
.entry-card p { margin: 0 0 6px; font-size: .9rem; color: var(--muted); }
.entry-card .button-link { justify-self: start; align-self: end; padding: 8px 14px; font-size: .9rem; }
.entry-card.home { background: var(--warm-soft); border-color: var(--warm-line); border-top-color: var(--warm); }
.entry-card.home p { color: #5f4a3a; }
.button-link.warm { background: var(--warm-soft); color: var(--warm-text); border: 1px solid var(--warm-line); font-weight: 700; box-shadow: none; }
.button-link.warm:hover { background: #ffe9d6; text-decoration: none; color: var(--warm-text); }

/* 홈 하단 신뢰 띠: 제작자 · 운영자 정보 · 카드 정보 · 다운로드 */
.trust-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 20px; margin: 0; padding: 18px 22px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); font-size: .88rem; }
.trust-band > div { display: grid; gap: 3px; align-content: start; }
/* 홈 신뢰 띠 위아래 = 단락 간격과 같게 (2026-11-03 소유자 결정 — 위 72·아래 112px 로 벌어져 있던 것, docs/12 3장).
   위는 앞 단락 아래 여백(PC 36·모바일 28)만, 아래는 홈에서만 꼬리말 구분선까지 같은 값. 꼬리말 위 64px 은 다른 화면 그대로 */
.home-page .site-footer { margin-top: 0; padding-top: 0; }
.home-page .site-footer > hr { margin-top: 36px; }
@media (max-width: 760px) { .home-page .site-footer > hr { margin-top: 28px; } }
.trust-band strong { font-size: .95rem; padding-left: 24px; position: relative; }
.trust-band strong::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .72rem; line-height: 18px; text-align: center; font-weight: 700; }
.trust-band span { color: var(--muted); padding-left: 24px; }

/* 가정용 허브 머리 */
/* 가정용 허브 머리: 홈 입구 카드와 같은 연한 살구 바탕 (연결감). 목록·필터·버튼은 사이트 공통 파랑 그대로 (2026-10-31 소유자 결정) */
.family-head { padding: 20px 22px; margin-bottom: 18px; background: var(--warm-soft); border: 1px solid var(--warm-line); border-left: 4px solid var(--warm); border-radius: 14px; }
.family-head h1 { margin-bottom: .3em; }
.family-head .hub-description { color: #5f4a3a; margin: 0; }

.listing-head { padding: 18px 0 18px; border-bottom: 1px solid rgba(218, 225, 233, .8); margin-bottom: 18px; }
.listing-head h1 { margin-bottom: .35em; }
.listing-head p:last-child { max-width: 64ch; color: var(--muted); }
.listing-head + .search-form { margin: 8px 0 14px; }
.listing-filters {
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  margin: 14px 0 14px;
  max-width: none;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(31,46,61,.03);
}
.listing-filters .search-row { max-width: 680px; margin-bottom: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
.filter-row label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); margin: 0; }
.filter-row select { margin: 0; min-width: 120px; }
.filter-clear { align-self: center; font-size: .9rem; }
.filter-nav { gap: 8px; padding: 2px 0 12px; }
.filter-nav a {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  border-color: #d9e0e8;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-nav a:hover { text-decoration: none; border-color: #bdcad8; background: #f7f9fb; }
.filter-nav a.active { background: #22334a; color: white; border-color: #22334a; box-shadow: 0 4px 10px rgba(34,51,74,.13); }
.hub-description { max-width: 72ch; line-height: 1.8; white-space: pre-line; }
.hub-free { padding-top: 16px; }
.hub-list { padding-top: 12px; }
#listing-live[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.pagination { justify-content: center; margin-top: 28px; }
.legal-note, .empty-note { color: var(--muted); }


/* 교재 일람에서 고른 분야의 설명 (길면 3줄 + 続きを読む) */
.category-intro {
  margin: 8px 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff, #f6f9fc);
  border-color: #d8e2ec;
}
.category-intro h2 { margin: 0 0 6px; font-size: 1.05rem; }
.category-intro .intro-text { margin: 0; }
.category-intro .intro-text.is-collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.category-intro .intro-more { margin-top: 8px; font-size: .9rem; }

/* ======================================================================
   12. 일본 사이트 — 자료 상세 · 추천
   ====================================================================== */

.product-hero { display: grid; grid-template-columns: minmax(220px,.8fr) 1.4fr; gap: 36px; padding: 34px 0 42px; align-items: start; }
.product-preview {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg,#f3f6f9,#e9eff5);
  color: #88919d;
  font-size: 2rem;
  font-weight: 800;
  overflow: hidden;
  border-color: #d7dfe8;
  box-shadow: var(--shadow-sm);
}
.product-summary { padding: 10px 0 0; }
.product-preview img { width: 100%; height: auto; border-radius: 16px; display: block; }
.product-summary h1 { font-size: clamp(1.7rem,3vw,2.5rem); margin-bottom: .45em; }
.product-summary-line { font-weight: 700; margin-bottom: 12px; color: #233a52; }
.product-sample-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
.product-quick-links { gap: 8px 18px; margin: 8px 0; }
.product-quick-links a { display: inline-flex; align-items: center; min-height: 44px; }
.product-author { color: var(--muted); }
.product-facts {
  display: grid;
  gap: 8px;
  margin: 20px 0;
  padding: 4px 16px;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
}
.product-facts div:last-child { border-bottom: 0; }
.product-facts div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.product-facts dt { color: var(--muted); font-size: .88rem; font-weight: 700; }
.product-facts dd { margin: 0; }
.product-section { padding: 34px 0; border-top: 1px solid var(--line); border-top-color: #dde3ea; }
.product-section h2, .store-section.recommend h2 { font-size: 1.25rem; }
.product-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.product-links > div, .info-grid article { padding: 20px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.sample-grid a { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.sample-grid img { width: 100%; height: 220px; object-fit: contain; display: block; }
.sample-grid p { margin: 6px 2px 0; font-size: .85rem; color: var(--muted, #555); }
@media (max-width: 560px) { .sample-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sample-grid img { height: 160px; } }
.sample-grid a { cursor: zoom-in; }
html.lightbox-open { overflow: hidden; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 48px 64px; border: 0;
  background: rgba(15, 18, 22, .92); color: white; display: none; align-items: center; justify-content: center; }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: rgba(15, 18, 22, .6); }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox img { max-width: calc(100vw - 128px); max-height: calc(100vh - 140px); object-fit: contain; background: white; border-radius: 6px; }
.lightbox figcaption { font-size: .95rem; text-align: center; }
.lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: white; cursor: pointer;
  border-radius: 999px; width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; padding: 0; }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .3); }
.lightbox-close { top: 12px; right: 12px; }
.lightbox-nav.prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lightbox-nav, .lightbox.single .lightbox-count { display: none; }
.lightbox-count { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; font-size: .9rem; opacity: .85; }
@media (max-width: 560px) {
  .lightbox { padding: 56px 8px 24px; }
  .lightbox img { max-width: calc(100vw - 16px); max-height: calc(100vh - 150px); }
  .lightbox-nav.prev, .lightbox-nav.next { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; }
}
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.tag-list a { display: inline-block; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: white; }

.store-section.recommend { padding: 28px 0; border-top: 1px solid var(--line); margin-top: 4px; }
.store-section + .store-section.recommend { border-top-color: rgba(219, 225, 232, .78); } /* 단락이 이어질 때의 구분선과 같은 색 */
.store-section.recommend h2 { margin-top: 0; }
.more-links { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.more-links .button-link { padding: 7px 14px; font-size: .9rem; font-weight: 600; } /* 이동 링크 — 「カートに入れる」 같은 주 버튼보다 작게 */


/* ======================================================================
   13. 일본 사이트 — 가입 유도 · 크리에이터 안내
   ====================================================================== */

.signup-cta {
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 16px 24px;
  align-items: center;
  margin: 8px 0 22px;
  padding: 22px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0faf4, #e6f5ec);
  border: 1px solid #c4e6d2;
  border-color: #cbe2d4;
  box-shadow: 0 6px 18px rgba(31, 107, 52, .06);
}
.signup-cta h2 { margin: 0 0 6px; border: 0; padding: 0; font-size: 1.15rem; }
.signup-cta p { margin: 0; }
.signup-cta-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.signup-cta.compact { grid-template-columns: 1fr; margin: 12px 0; padding: 16px 18px; }
.signup-lead { color: var(--muted); max-width: 60ch; }

.creator-callout {
  display: grid;
  grid-template-columns: 1.4fr .7fr;
  gap: 24px;
  align-items: center;
  margin: 48px 0 12px;
  padding: 38px;
  border-radius: 20px;
  background: linear-gradient(135deg, #18253a 0%, #223655 100%);
  color: white;
  position: relative;
  overflow: hidden;
  border: 1px solid #253654;
  box-shadow: var(--shadow-lg);
}
.creator-callout::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 159, 211, .22), rgba(114,159,211,0));
}
.creator-callout > * { position: relative; z-index: 1; }
.creator-callout h2 { border: 0; color: white; margin-top: 0; }
.creator-callout .eyebrow { color: #b8c7df; }
.creator-callout .status-pill { background: rgba(255,255,255,.12); color: inherit; }
.creator-side { display: grid; gap: 12px; justify-items: start; }
.creator-info-hero {
  padding: 46px 42px;
  max-width: none;
  position: relative;
  margin-bottom: 12px;
  border: 1px solid #d9e3ee;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);
  box-shadow: var(--shadow-md);
}
.creator-info-hero .lead { max-width: 56ch; }
.info-grid article { min-height: 150px; padding: 24px; border-radius: 14px; transition: transform .16s ease, box-shadow .16s ease; }
.info-grid article:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.stage-list { display: grid; gap: 12px; padding: 0; list-style: none; counter-reset: stage; }
.stage-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 18px;
  background: white;
  border-radius: 12px;
  align-items: center;
  border: 1px solid #e0e5eb;
  box-shadow: 0 2px 7px rgba(31,46,61,.02);
}
.stage-list li strong { color: var(--accent-strong); }
.creator-interest { padding-top: 48px; }

.interest-form { display: grid; gap: 12px; max-width: 640px; padding: 24px; border-radius: 16px; box-shadow: var(--shadow-sm); }
.interest-form label { display: block; } /* grid 였을 때 「必須」 배지가 그리드 칸이 되어 한 줄 전체 빨간 테두리로 늘어났다 (2026-10-31). 입력 칸은 원래 block·width 100% 라 그대로 아래에 쌓인다 */
.interest-form label.check { display: block; }
.interest-form > button { justify-self: start; padding-left: 28px; padding-right: 28px; }
.interest-form .req { font-size: .75rem; color: var(--danger); font-weight: 700; margin-left: 4px; }
.interest-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--danger); font-weight: 700; }
.verify-code-form .code-input { max-width: 12ch; font-size: 1.6rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
/* 이메일 가입: 메일 주소 옆 「認証する」, 아래 인증 코드 칸·남은 시간, 인증 완료 표시 */
.email-verify { margin: 10px 0; }
.email-verify-label { display: block; margin: 0 0 4px; font-size: 0.9rem; color: var(--muted); }
.email-verify-row { display: flex; gap: 8px; align-items: center; max-width: 480px; }
.email-verify-row input { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.email-verify-row button { flex: none; white-space: nowrap; }
.email-verify input[readonly] { background: var(--surface-alt); color: var(--muted); }
.email-code-box { margin-top: 10px; padding: 12px 14px; max-width: 480px; border: 1px solid #b9c9dc; border-radius: 8px; background: var(--accent-soft); }
.email-code-box .code-input { flex: 0 1 9.5em; font-size: 1.3rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; text-align: center; padding: 6px 8px; }
.email-code-box small { display: block; margin-top: 8px; }
.email-timer { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-strong); }
.email-timer.low { color: var(--danger); }
.email-verified { margin: 8px 0 0; padding: 8px 12px; max-width: 480px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.email-verify-msg { margin: 8px 0 0; max-width: 480px; font-size: .9rem; }
.email-verify-msg.bad { color: var(--danger); font-weight: 700; }
.verify-email { font-weight: 700; overflow-wrap: anywhere; }


/* ======================================================================
   14. 보조 클래스
   ====================================================================== */

.muted { color: var(--muted); }


/* ======================================================================
   15. 반응형 · 인쇄
   ====================================================================== */

@media (max-width: 900px) {
  header.site { position: static; }
  .storefront [id] { scroll-margin-top: 16px; }
  .hero-panel { padding: 34px; }
}

@media (max-width: 760px) {
  .hero-panel, .creator-callout, .product-hero, .product-links, .signup-cta { grid-template-columns: 1fr; }
  .category-grid, .info-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .hero-panel { padding: 26px; border-radius: 18px; }
  .hero-panel h1 { font-size: 2rem; }
  .hero-panel.compact { grid-template-columns: 1fr; padding: 20px 18px; gap: 16px; } /* .compact 가 위 1fr 규칙보다 구체적이라 다시 지정 */
  .hero-panel.compact h1 { font-size: 1.55rem; }
  .entry-cards { grid-template-columns: 1fr; }
  .trust-band { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .store-section { padding: 28px 0; }
  .store-section.subtle { padding: 20px; }
  .creator-callout { padding: 28px 24px; }
  .creator-info-hero { padding: 30px 24px; }
  .product-facts { padding: 2px 12px; }
  .filter-row label, .filter-row select { width: 100%; }
  body.storefront { padding-top: 12px; }
  header.site { margin-bottom: 22px; }
  header.site nav { width: 100%; border-top: 1px solid var(--line); padding-top: 8px; }
}

@media (max-width: 640px) {
  :root { font-size: 15px; --section-gap: 2rem; }
  body { padding: 16px 12px 40px; }
  h1 { font-size: 1.35rem; }
  form { padding: 12px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=month],
  input[type=url], input[type=tel],
  select, textarea { max-width: none; }
  /* 관리자·작가 상단 메뉴: '|' 구분 글자를 숨기고 손가락으로 누르기 좋은 칩으로 */
  body > nav.area-nav { font-size: 0; gap: 6px; padding: 8px 10px; }
  nav.area-nav a { font-size: .9rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); line-height: 1.35; }
  nav.area-nav a:hover { text-decoration: none; background: var(--accent-soft); }
  nav.area-nav button { font-size: .9rem; padding: 6px 12px; }
  /* 상세 정보 표: 항목명 위, 값 아래로 쌓기 */
  .info-table, .info-table > tbody, .info-table tr, .info-table th, .info-table td { display: block; width: auto; }
  .info-table th { border-bottom: 0; padding-bottom: 2px; }
  .info-table td { padding-top: 4px; }
  .info-table .inline-form { margin: 8px 0 0; }
  /* 회원 목록: 표 머리줄을 숨기고 회원마다 카드 — 이메일을 제목으로, 나머지는 「항목 값」 한 줄씩 */
  .member-table { border: 0; background: none; overflow: visible; }
  .member-table, .member-table > tbody, .member-table tr, .member-table td { display: block; width: auto; }
  .member-table tr:first-child { display: none; }
  .member-table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
  .member-table tr td, .member-table tr:nth-child(even) td, .member-table tr:hover td { background: none; border: 0; padding: 2px 0; white-space: normal; min-width: 0; }
  .member-table td.member-id { float: right; color: var(--muted); font-size: .85rem; }
  .member-table td.member-id::before { content: "#"; }
  .member-table td.member-email { font-weight: 600; overflow-wrap: anywhere; padding-right: 3em; margin-bottom: 4px; }
  .member-table td[data-label] { display: flex; gap: 10px; font-size: .92rem; }
  .member-table td[data-label]::before { content: attr(data-label); flex: 0 0 5.5em; color: var(--muted); font-size: .85rem; }
  .member-table td.member-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .member-table td.member-actions:empty { display: none; }
  .eyebrow, .interest-form .req { font-size: .8rem; }
  /* 손가락으로 누르는 작은 요소: 높이 32px 이상 */
  .price-filter { line-height: 2.4; }
  .price-filter a { display: inline-block; padding: 5px 12px; line-height: 1.35; }
  details > summary { padding: 6px 0; }
  .row-actions button, .row-actions .button-link { padding: 7px 12px; }
  input[type=file] { padding: 6px 0; }
}

@media (max-width: 520px) {
  header.site nav > a, header.site .nav-logout button { padding: 6px 8px; font-size: .86rem; }
  .trust-band { grid-template-columns: 1fr; }
  .search-row button { min-width: 0; padding-left: 14px; padding-right: 14px; }
  .action-row { align-items: stretch; }
  .action-row .button-link { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  .listing-filters { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff; max-width: none; }
  nav, footer, form, button { display: none !important; }
  table { border: 0; }
  /* 동의서: 스크롤 없이 전부 인쇄. 팝업이 열려 있으면 팝업 내용만 인쇄 */
  .terms-body { max-height: none !important; overflow: visible !important; }
  body:has(> dialog[open]) > :not(dialog[open]) { display: none !important; }
  .terms-dialog[open] { position: static; display: block; width: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .terms-dialog header, .terms-dialog .terms-body { padding: 0 0 10px; border: 0; }
  .terms-dialog footer, .terms-actions { display: none !important; }
}

/* 2026-10-14: task-focused browsing and return visits, retaining the existing visual language. */
.material-thumb { text-decoration: none; }
.material-thumb:focus-visible, .button-link:focus-visible, nav a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card-summary { font-size: .91rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0; }
.cart-count { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .8rem; }
.filter-details { margin-top: 12px; }
.filter-details > summary { display: list-item; padding: 8px 0; font-weight: 700; }
.filter-details .filter-row { margin-top: 10px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.active-filters:empty { display: none; }
.active-filters a { padding: 6px 10px; background: var(--accent-soft); border-radius: 999px; }
.result-count { font-weight: 700; margin: 18px 0; }
.storefront .result-count[role=status] { background: var(--surface-alt); color: var(--text); }
.payment-pending[role=status], .unsaved-note[role=status] { background: var(--warn-bg); color: var(--warn); border-left: 4px solid #e0a400; }
.unsaved-note[hidden] { display: none; }
/* 관리자 자료 상세 「분류」의 「ご家庭向け」 자동 판정 안내 (2026-10-31) */
.home-use-note { margin: 10px 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--surface-soft); }
.home-use-note small { display: block; margin-top: 4px; }
.download-error p { margin: 4px 0; }
.download-error a { color: inherit; text-decoration: underline; }
.library-count { color: var(--muted); }
.empty-state { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.empty-state h2 { margin-top: 0; border: 0; }
.empty-state a { margin-right: 12px; }
.account-tabs { gap: 8px; padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.account-tabs a { padding: 10px 16px; border-radius: 999px; background: white; border: 1px solid var(--line); }
.account-tabs a[aria-current="page"], nav.area-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.library-search { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.library-search label { flex: 1 1 180px; margin: 0; }
.library-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.library-card { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 16px; background: white; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.library-card h3 { margin: 8px 0; overflow-wrap: anywhere; }
.library-card form { margin: 8px 0 0; }
.library-thumb { display: grid; place-items: center; align-self: start; background: var(--surface-alt); color: var(--muted); border-radius: 8px; min-height: 110px; overflow: hidden; }
.library-thumb img { display: block; width: 100%; max-height: 140px; object-fit: contain; }
.mobile-product-action { display: none; }
.publish-checklist { margin: 22px 0; padding: 18px; border: 1px solid #cadcd0; border-radius: 12px; background: #f3faf5; }
.publish-checklist h2 { margin-top: 0; }
.publish-checklist ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.editor-sections { position: sticky; top: 0; background: var(--surface); padding: 12px; z-index: 5; border: 1px solid var(--line); border-radius: 8px; }
body:has(.editor-sections) h2[id] { scroll-margin-top: 80px; }
body > nav.grouped-nav { align-items: start; gap: 12px; }
.nav-group { flex: 1 1 180px; }
.nav-group > summary { padding: 6px; font-weight: 700; font-size: .9rem; }
.nav-group > div { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.nav-group a { padding: 5px 8px; border-radius: 6px; }
.nav-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.nav-tools .nav-logout-form { margin: 0; }
a.nav-site-link { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; white-space: nowrap; font-size: .85rem; }
ul.stat-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; list-style: none; }
ul.stat-cards > li { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: white; margin: 0; }
/* 통계 「자료별·검색어」 (admin/stats-traffic.html) */
.account-tabs.stats-tabs { display: flex; flex-wrap: wrap; margin-bottom: 14px; }
.stats-period { align-items: center; }
.stats-period .list-search { margin: 0; }
.stats-pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-alt); color: #3f4652; white-space: nowrap; }
.stats-pill.zero { background: var(--danger-bg); color: #9b1c1c; }
.stats-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.stats-row > .stats-card { flex: 1 1 320px; min-width: 0; }
.stats-row > .stats-wide { flex: 999 1 560px; }
.stats-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; }
.stats-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.stats-card p { margin: 6px 0; }
.stats-big, .stats-funnel strong { font-size: 1.6rem; font-weight: 900; margin-right: 6px; }
.stats-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.stats-funnel > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stats-bar { display: block; height: 10px; border-radius: 999px; background: #e5e8eb; overflow: hidden; }
.stats-bar > span { display: block; height: 10px; max-width: 100%; background: var(--accent); }
.stats-terms { margin: 0; padding-left: 1.4em; }
.stats-terms li { padding: 3px 0; }
.stats-terms li > span:last-child { float: right; color: var(--muted); }
.stats-table th a { color: inherit; }
@media (max-width: 640px) { .stats-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notice-box { margin: 12px 0; padding: 12px 14px; border: 1px solid #f0d58a; border-radius: 10px; background: #fff8e6; }
.notice-box p { margin: 0 0 8px; }
fieldset.fx-basis { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
fieldset.fx-basis label, fieldset.fx-basis small { display: block; margin: 6px 0; }
fieldset.fx-basis .indent { margin-left: 26px; }
/* 비밀번호 조건 목록 — 입력하면 ✓(초록), 아직이면 ○, 입력했는데 못 채우면 빨강 */
.pw-rules { list-style: none; padding: 0; margin: 6px 0 14px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .85rem; color: var(--muted); }
.pw-rules li { margin: 0; }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: #1d7a46; }
.pw-rules li.ok::before { content: "✓ "; }
.pw-rules li.bad { color: #b42318; }
.pw-match { margin: 6px 0 14px; font-size: .85rem; }
.pw-match.ok { color: #1d7a46; }
.pw-match.bad { color: #b42318; }
@media (max-width: 760px) {
  header.site nav > a, header.site .nav-logout button { min-height: 44px; display: inline-flex; align-items: center; }
  .filter-details .filter-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .filter-details .filter-row select { min-width: 0; }
  .filter-details .filter-apply { min-height: 44px; }
  .filter-clear, .pagination a { min-height: 44px; display: inline-flex; align-items: center; }
  .library-grid { grid-template-columns: 1fr; }
  .product-preview { min-height: 0; max-height: 220px; }
  .product-preview img { max-height: 220px; object-fit: contain; }
  .product-hero { gap: 16px; padding-top: 14px; }
  .product-summary { padding-top: 0; }
  body.product-page { padding-bottom: 110px; }
  .mobile-product-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(31,46,61,.08); }
  .mobile-product-action button, .mobile-product-action a { min-height: 44px; font-size: .9rem; }
  .mobile-product-action strong { font-size: .95rem; }
  /* 모바일 장바구니 줄을 두 행으로 압축 (2026-10-30 소유자 — 한 줄이 330~400px 로 너무 컸음, docs/25 6장):
     1행 교재명(전체 폭), 2행 왼쪽 가격 · 오른쪽 작은 글자 「削除」. 표 머리줄은 숨김 */
  .cart-table, .cart-table > tbody, .cart-table td { display: block; width: 100%; }
  .cart-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .cart-table td { white-space: normal; padding: 0; border: 0; }
  .cart-table td:first-child { grid-column: 1 / -1; margin-bottom: 4px; line-height: 1.45; overflow-wrap: anywhere; }
  .cart-table td:first-child small { display: block; }
  .cart-table td:nth-child(2) { width: auto; font-weight: 700; }
  .cart-table td:nth-child(2) small { font-weight: 400; }
  .cart-table td:nth-child(2) .list-price, .cart-table td:nth-child(2) .cart-line-discount { display: block; }
  .cart-table td:has(form) { width: auto; min-width: 0; justify-self: end; }
  .cart-table td form { margin: 0; }
  /* 「削除」 는 작은 테두리 버튼 (밑줄 글자는 버튼으로 안 보인다 — 2026-10-30 소유자). 가격 줄 오른쪽이라 줄 높이는 그대로 */
  .cart-table button.secondary { min-height: 40px; min-width: 64px; margin: 0; padding: 8px 14px; font-size: .88rem; }
  .editor-sections { position: static; }
  ul.stat-cards { grid-template-columns: 1fr; }
  body > nav.grouped-nav { font-size: .9rem; display: block; }
  .nav-group { border-bottom: 1px solid var(--line); }
  .nav-group > summary { min-height: 44px; }
}

@media print { .mobile-product-action { display: none !important; } }

/* 작가 가입: 일본 사이트 필명 (모바일 한 줄 흐름, PC 는 입력칸 폭 제한) */
fieldset.pen-name-ja { margin: 4px 0 18px; padding: 16px 18px 14px; border: 1px solid #c9dcf2; border-left: 4px solid var(--accent, #2f6db3);
  border-radius: var(--radius); background: #f5f9ff; }
fieldset.pen-name-ja legend { padding: 0 6px; font-size: 1rem; font-weight: 700; color: var(--text); }
fieldset.pen-name-ja .pen-lead { margin: 2px 0 8px; font-size: 1rem; line-height: 1.6; }
fieldset.pen-name-ja .pen-from { margin: 0 0 12px; font-size: .9rem; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
fieldset.pen-name-ja label.pen-input { display: block; margin: 0 0 10px; font-weight: 600; }
fieldset.pen-name-ja label.pen-input input { display: block; width: 100%; max-width: 420px; margin-top: 6px; font-size: 1.15rem; font-weight: 400; }
fieldset.pen-name-ja .pen-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
fieldset.pen-name-ja .pen-preview-label { font-size: .85rem; color: var(--muted); }
fieldset.pen-name-ja .pen-preview-card { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 6px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow-wrap: anywhere; }
fieldset.pen-name-ja .pen-preview-by { font-size: .8rem; color: var(--muted); }
fieldset.pen-name-ja .pen-tips { margin: 0; padding-left: 1.1em; font-size: .88rem; line-height: 1.7; color: #4a5562; }
fieldset.pen-name-ja .pen-tips li + li { margin-top: 2px; }
@media (max-width: 600px) {
  fieldset.pen-name-ja { padding: 14px 14px 12px; }
  fieldset.pen-name-ja label.pen-input input { max-width: none; }
}

/* 법무 페이지 (特商法 표기·プライバシーポリシー): 표는 모바일에서 항목 → 내용 세로로 */
.legal-doc h2 { margin-top: 1.8em; }
.legal-doc li { line-height: 1.8; }
/* 約款の版表示·改定のお知らせ·改定履歴 (legal/document.html) */
.legal-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; color: var(--muted); font-size: .9rem; margin: -.4em 0 1.2em; }
.legal-meta strong { color: var(--text); font-weight: 600; }
.legal-meta a { white-space: nowrap; }
.legal-notice { background: var(--warn-bg); border: 1px solid #f0d9a6; border-radius: var(--radius); padding: 12px 14px; margin: 0 0 1.4em; line-height: 1.7; }
.legal-notice b { color: var(--warn); margin-right: .6em; }
.legal-history { margin-top: 2.4em; border-top: 1px solid var(--line); padding-top: .6em; }
.rev-list { list-style: none; padding: 0; margin: 0; }
.rev-list li { border-bottom: 1px solid var(--line); padding: 10px 0; line-height: 1.7; }
.rev-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.rev-head span { color: var(--muted); font-size: .92rem; }
.rev-list .tag { font-size: .75rem; border-radius: 4px; padding: 0 6px; }
.rev-list .tag.now { background: var(--accent-soft); color: var(--accent-strong); }
.rev-list .tag.next { background: var(--warn-bg); color: var(--warn); }
.legal-table { display: table; width: 100%; overflow: visible; border-collapse: collapse; margin: 8px 0 16px; }
.legal-table > tbody { display: table-row-group; }
.legal-table th, .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; line-height: 1.75;
  white-space: normal; overflow-wrap: anywhere; }
.legal-table th { width: 13em; background: var(--surface-alt, #f6f7f9); font-weight: 600; }
.legal-table small { color: var(--muted); }
@media (max-width: 640px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .legal-table th, .legal-table td { border: 0; padding: 4px 2px; }
  .legal-table th { background: none; color: var(--muted); font-size: .9rem; }
  .legal-grid .legal-head { display: none; }
  .legal-grid td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .85rem; }
}
.legal-grid th { width: auto; }

/* 特商法: 顧客向けの表は管理画面用の小さな見出し文字を引き継がない。 */
.tokushoho-table { max-width: 60rem; table-layout: fixed; font-size: 1rem; }
.tokushoho-table th, .tokushoho-table td { padding: 12px 16px; }
.tokushoho-table th {
  width: 15rem; font-size: inherit; font-weight: 700; color: var(--text);
  background: #eef3f8; border-right: 1px solid var(--line);
}
/* 管理用の縞模様・ホバー色を外し、項目名の帯と本文を明確に分ける。 */
.tokushoho-table td,
.tokushoho-table tr:nth-child(even) td,
.tokushoho-table tr:hover td { background: var(--surface); }
@media (max-width: 640px) {
  .tokushoho-table tr { padding: 0; }
  .tokushoho-table th {
    width: auto; font-size: .95rem; padding: 10px 14px;
    border-right: 0; border-bottom: 0;
  }
  .tokushoho-table td { padding: 12px 14px 14px; }
}


/* 사이트 하단 사업자 정보: 항목 사이 「|」, 작은 회색 글씨, 모바일은 자연스럽게 줄바꿈 */
.footer-biz { margin: 8px 0 0; font-size: .78rem; line-height: 1.8; color: var(--muted); }
.footer-biz p { margin: 0; }
.footer-biz span + span::before { content: "|"; margin: 0 8px; color: #c5ccd3; }
@media (min-width: 641px) { .footer-biz span { white-space: nowrap; } } /* 항목 하나가 줄 중간에서 끊기지 않게 (예: 「…1023호」 의 「호」만 다음 줄) */
@media (max-width: 640px) {
  .footer-biz span { display: block; }
  .footer-biz span + span::before { content: none; }
  .footer-biz p + p { margin-top: 4px; }
}

/* 소셜 가입: 메일 주소 취득·이용 목적 안내 (LINE 권한 심사용 캡처 화면) */
.email-purpose { margin: 4px 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent); background: #f5f9ff; font-size: .88rem; line-height: 1.7; border-radius: 4px; }

/* 작가·관리자 로그인 화면: 로그아웃 뒤 막다른 화면이 되지 않게 사이트 홈으로 가는 링크 */
.area-home { margin: 0 0 12px; font-size: .9rem; }

/* お問い合わせ (입력 → 확인 → 완료) · よくある質問 */
.contact-page, .faq-page { max-width: 760px; padding: 24px 0 48px; }
.form-steps { display: flex; gap: 8px; padding: 0; margin: 0 0 20px; list-style: none; counter-reset: step; }
.form-steps li { flex: 1; padding: 8px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--muted);
  font-size: .85rem; text-align: center; counter-increment: step; }
.form-steps li::before { content: counter(step) ". "; }
.form-steps li[aria-current] { background: var(--accent); color: #fff; font-weight: 700; }
.contact-guide { padding: 14px 18px; margin: 0 0 18px; border-radius: 12px; background: var(--accent-soft); }
.contact-guide p { margin: 4px 0; }
.contact-form { max-width: none; }
.contact-form small { font-weight: 400; }
.contact-confirm td.pre { white-space: pre-line; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.contact-actions form { margin: 0; }
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.faq-toc a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .9rem; text-decoration: none; }
.faq-section { margin-bottom: 28px; scroll-margin-top: 16px; }
.faq-section details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-section summary { padding: 12px 4px; font-weight: 700; color: var(--text); line-height: 1.5; }
.faq-section summary::before { content: "Q. "; color: var(--accent); }
.faq-section details p { margin: 0 4px 14px; line-height: 1.8; }
.faq-section details p::before { content: "A. "; color: var(--accent-strong); font-weight: 700; }
.faq-contact p { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inquiry-table td:nth-child(5) { min-width: 220px; white-space: normal; }
@media (max-width: 560px) {
  .form-steps li { font-size: .75rem; padding: 6px 4px; }
  .contact-actions form { flex: 1; }
  .contact-actions button { width: 100%; }
}

/* 문의 (1글 1답변): 질문 카드 Q + 답변 카드 A — 작가 「문의」, 관리자 문의함 */
.qa-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.qa-title h1 { margin: 0; }
.qa-title .button-link { margin-left: auto; }
.qa-stack { display: grid; gap: 12px; margin: 16px 0; }
.qa-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--surface); }
.qa-answer { background: var(--accent-soft); border-color: transparent; }
.qa-waiting { background: var(--surface-alt); border-style: dashed; }
.qa-parent { background: var(--surface-alt); margin-bottom: 16px; }
.qa-parent-answer { border-top: 1px solid var(--line); padding-top: 8px; margin: 10px 0 4px; }
.qa-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qa-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .8rem; font-weight: 700;
  background: var(--surface-alt); color: var(--muted); }
.qa-answer .qa-badge { background: var(--accent); color: #fff; }
.qa-body { white-space: pre-line; margin: 0; line-height: 1.7; }
.qa-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.qa-actions form { margin: 0; background: none; border: 0; padding: 0; }
.qa-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 14px; }
.qa-next p { margin: 0; }
.qa-link { margin: 8px 0; }
.qa-follow { display: inline-block; margin-left: 6px; font-size: .78rem; color: var(--accent-strong); }
.qa-empty { text-align: center; padding: 32px 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.qa-list { list-style: none; padding: 0; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.qa-list > li { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.qa-list > li + li { border-top: 1px solid var(--line); }
.qa-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; }
.qa-list a:hover { background: var(--surface-soft); text-decoration: none; }
.qa-list-main { display: grid; gap: 2px; min-width: 0; }
.qa-list-meta { font-size: .8rem; color: var(--muted); }
.qa-list-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
form.qa-form { background: none; border: 0; padding: 0; margin: 16px 0; }
.qa-form label { display: block; margin-bottom: 12px; }
.qa-form textarea, .qa-form select { width: 100%; max-width: none; }
.qa-form select { max-width: 360px; }
.qa-form textarea { min-height: 220px; }
.qa-edit { margin-top: 8px; }
.qa-guide { margin: 12px 0 18px; }
.qa-side-list { padding-left: 18px; margin: 0 0 12px; }
.inquiry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.inquiry-side { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; background: var(--surface); }
.inquiry-side h2 { margin-top: 0; }
.inquiry-side select, .inquiry-side textarea { width: 100%; max-width: none; }
.inquiry-side form { background: none; border: 0; padding: 0; margin: 0 0 12px; }
.inquiry-side p { overflow-wrap: anywhere; }
.inquiry-delete { margin-top: 16px; }
@media (max-width: 800px) { .inquiry-layout { grid-template-columns: 1fr; } }
.inline-check { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
tr.row-last-viewed > td { background: var(--accent-soft); }
/* 관리자 첫 화면 상단 CI (사이트 로고 + 「관리자」) */
.area-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* 사이트 보기·로그아웃은 메뉴가 아니라 화면 전체 도구 — 로고 줄 오른쪽 끝.
   (로그인 버튼 자리와 겹치지 않아 로그인 직후 두 번 누름으로 로그아웃되는 일도 없음) */
.area-hero .nav-tools { margin-left: auto; }
.area-hero-label, .area-hero .nav-tools a, .area-hero .nav-tools button { white-space: nowrap; flex-shrink: 0; }
.area-hero-label { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .85rem; font-weight: 700; }
.area-hero .nav-logout-form { padding: 0; border: 0; background: none; box-shadow: none; }
@media (max-width: 760px) {
  .area-hero { gap: 8px; flex-wrap: wrap; row-gap: 10px; }
  .area-hero .hide-narrow { display: none; }
  .area-hero-label { padding: 3px 8px; font-size: .78rem; }
  .area-hero .nav-tools { gap: 6px; }
  .area-hero .nav-tools .nav-logout-form button { font-size: .8rem; padding: 6px 10px; min-height: 32px; }
  .area-hero .nav-tools a.nav-site-link { font-size: .8rem; padding: 6px 8px; min-height: 32px; display: inline-flex; align-items: center; }
}

/* 장바구니 점수 할인 (docs/16 2-2): 사이트 띠 · 상세 안내 · 장바구니 금액 내역 */
.promo-band { margin: 0; padding: 6px 12px; background: var(--accent-soft); color: var(--accent-strong); font-size: .9rem; text-align: center; }
.discount-hint { margin: 8px 0; color: var(--accent-strong); font-size: .9rem; }
.cart-line-discount { display: block; color: var(--accent-strong); }
.cart-next-tier { margin: 12px 0; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); }
.cart-summary { margin: 8px 0; }
.cart-summary > div { display: flex; justify-content: space-between; max-width: 360px; }
.cart-summary dt, .cart-summary dd { margin: 0; }
.cart-summary .cart-discount dd { color: var(--accent-strong); }
.cart-minimum { color: #a33; font-weight: 600; }

/* 세트 (docs/16 9A) */
.pill.set { background: #fff4e5; color: #8a4b00; border-color: #f3d9b1; }
.set-items { list-style: none; padding: 0; }
.set-items > li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #eee; }
.set-items img { border: 1px solid #eee; border-radius: 4px; }
.set-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.set-card { border: 1px solid #eee; border-radius: 10px; padding: 10px; }
.set-card img { width: 100%; height: auto; border-radius: 6px; }


/* ======================================================================
   15-1. 일본 사이트 UX 보강 (2026-10-25): 스킵 링크 · 빵부스러기 · 카트 · 계정 폼
   ====================================================================== */

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--accent); color: #fff; border-radius: 8px; }
.skip-link:focus { left: 16px; outline: 3px solid var(--accent-strong); text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .9rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-strong); }
.breadcrumb [aria-current="page"] { color: var(--text); overflow-wrap: anywhere; }
.page-nav .back-link { margin: 0; }
.cart-table thead th { text-align: left; font-size: .85rem; color: var(--muted); }
/* PC 장바구니의 머리줄·본문이 같은 열 너비를 사용하도록 공통 block 표 규칙을 보정한다. */
@media (min-width: 761px) {
  .cart-table { display: table; width: 100%; }
  .cart-table > tbody { display: table-row-group; }
  .cart-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
  /* 가격은 오른쪽 정렬, 削除 는 맨 오른쪽 좁은 열 — 열이 왼쪽에 몰려 오른쪽이 비던 것 (2026-10-30 소유자 PC 캡처) */
  .cart-table th:nth-child(2), .cart-table td:nth-child(2) { width: 220px; text-align: right; }
  .cart-table th:last-child, .cart-table td:last-child { width: 1%; white-space: nowrap; text-align: right; padding-right: 12px; }
  .cart-table td:last-child form { margin: 0; }
  .cart-table td:last-child button { margin: 0; }
}
.cart-continue { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.field-error { display: block; margin: -6px 0 10px; font-size: .9rem; }
.account-form { margin-bottom: 20px; }
@media (max-width: 760px) {
  .cart-table thead { display: none; }
}

/* ======================================================================
   16. 작가 화면 UX (2026-10-25)
   ====================================================================== */

/* 입력 칸 옆 오류 문구 (가입·정산 정보 폼) */
.field-error { margin: 4px 0 10px; font-size: .9rem; color: #b42318; }
input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 2px #fde2df; }
/* 초대 링크 만료·무효 안내 */
.invite-invalid ul { padding-left: 1.2em; line-height: 1.8; }
/* 대시보드 「최근 정산」 카드 */
ul.stat-cards > li.stat-settlement { line-height: 1.7; }
.stat-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; vertical-align: middle; }
.stat-badge.pending { background: var(--warn-bg); color: var(--warn); }
.stat-badge.paid { background: #e3f6e8; color: #1d7a46; }
/* 작가 표 (대시보드 자료별·명세서): 좁은 화면에서는 행마다 카드 — .member-table 과 같은 data-label 방식 */
@media (max-width: 640px) {
  .author-table { border: 0; background: none; overflow: visible; }
  .author-table, .author-table > tbody, .author-table tr, .author-table td { display: block; width: auto; }
  .author-table > thead { display: none; }
  .author-table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
  .author-table tr td, .author-table tr:nth-child(even) td, .author-table tr:hover td { background: none; border: 0; padding: 2px 0; white-space: normal; min-width: 0; }
  .author-table td.author-table-title { font-weight: 600; overflow-wrap: anywhere; margin-bottom: 4px; }
  .author-table td[data-label] { display: flex; gap: 10px; font-size: .92rem; }
  .author-table td[data-label]::before { content: attr(data-label); flex: 0 0 6.5em; color: var(--muted); font-size: .85rem; }
}
/* 정산 정보 폼: 필수 표시, 세금 분류에 따라 사업자등록번호 칸 표시 (JS 없이 :has) */
.author-form .req, .req-note .req { color: #b42318; font-weight: 700; margin-left: 2px; }
.author-form fieldset.tax-class label { display: block; margin: 6px 0; }
.author-form fieldset.tax-class.invalid { border-color: #b42318; }
.author-form:has(input[name="taxClassification"][value="INDIVIDUAL"]:checked) .biz-only { display: none; }
.author-form:has(input[name="taxClassification"]:not([value="INDIVIDUAL"]):checked) .indiv-only { display: none; }
/* 명세서 상세: CSV·인쇄 버튼 줄. 인쇄할 때는 메뉴·버튼을 빼고 명세서만 */
.statement-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
@media print {
  body:has(> .statement-actions) > .area-hero, body:has(> .statement-actions) > nav.area-nav, .statement-actions { display: none; }
}

/* 기간 할인 가격 (docs/16 7-2) */
.sale-box { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.list-price { color: #666; font-size: .85rem; }
.sale-price { color: #b3261e; }
.sale-off { color: #b3261e; font-weight: 700; font-size: .85rem; }
.sale-until, .sale-label { color: #666; }

/* ==== 17. 관리자 화면 UX (2026-10-25) ==== */
/* 되돌리기 어려운 동작 (권한 전환·사용 중지·썸네일 되돌리기·다시 만들기)도 빨간 외곽선 — 5장 규칙과 같은 방식 */
form[action*="/role"] button, form[action*="/active"] button, form[action*="/reset"] button, form[action*="/regenerate"] button,
button.danger {
  background: #fff; color: var(--danger); border: 1px solid var(--danger);
}
form[action*="/role"] button:hover, form[action*="/active"] button:hover, form[action*="/reset"] button:hover,
form[action*="/regenerate"] button:hover, button.danger:hover { background: var(--danger-bg); }

/* 메뉴 「문의」 옆 답변 대기 건수 배지 */
.nav-badge { display: inline-grid; place-items: center; min-width: 1.5em; margin-left: 4px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }

/* 관리자 홈 「할 일」 카드: 숫자 = 그 목록의 필터 링크, 0 이면 회색 */
.admin-todo { margin: 0.3em 0 1.4em; }
.admin-todo > h2 { margin: 0 0 8px; font-size: 1rem; color: var(--muted); }
ul.todo-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
ul.todo-cards > li { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
ul.todo-cards > li > a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
ul.todo-cards > li > a > strong { font-size: 1.7rem; line-height: 1.1; color: var(--accent-strong); }
ul.todo-cards > li > a > span { font-size: .88rem; color: var(--muted); margin-top: 2px; }
ul.todo-cards > li > small { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }
ul.todo-cards > li.is-zero { background: var(--surface-alt); }
ul.todo-cards > li.is-zero > a > strong { color: var(--muted); }
ul.todo-cards > li.todo-alert { border-color: var(--danger); background: var(--danger-bg); }
ul.todo-cards > li.todo-alert > a > strong, ul.todo-cards > li.todo-alert > a > span { color: var(--danger); }
@media (max-width: 760px) { ul.todo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 「왜 이렇게?」 운영 규칙 팝업 (fragments/admin :: opsRules, docs/16 8-11): 노란 버튼, 카드 6장, 「왜?」로 연 카드는 강조 */
.ops-rules-button, .rule-why { margin: 0; padding: 3px 10px; font-size: .82rem; font-weight: 700; border-radius: 999px; border: 1px solid #e3c25a; background: #fff6d6; color: #6a4e00; vertical-align: middle; }
.rule-why { padding: 0 8px; font-size: .78rem; margin-left: 6px; }
.ops-rules-button:hover, .rule-why:hover { background: #ffe9a3; }
.ops-rules { width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.ops-rules[open] { display: flex; flex-direction: column; }
.ops-rules::backdrop { background: rgba(20, 24, 30, .55); }
.ops-rules header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ops-rules header h2 { margin: 0; padding: 0; border: 0; font-size: 1.1rem; }
.ops-rules header p { margin: 4px 0 0; font-size: .85rem; }
.ops-rules footer { display: flex; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-alt); }
.ops-rules footer button { margin: 0; }
ul.rule-cards { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px 18px; list-style: none; }
ul.rule-cards > li { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
ul.rule-cards > li.is-focus { border-color: #e3c25a; box-shadow: 0 0 0 3px #fff6d6; }
ul.rule-cards > li > strong { display: block; margin: 6px 0 4px; font-size: 1.02rem; line-height: 1.35; }
ul.rule-cards > li > p { margin: 0 0 6px; font-size: .9rem; }
ul.rule-cards > li > small { color: var(--muted); font-size: .78rem; }
.rule-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.rule-tag.law { background: #e4edfb; color: #1f4f9e; }
.rule-tag.ours { background: #efe6fb; color: #5b2d9e; }
@media (max-width: 640px) { ul.rule-cards { grid-template-columns: 1fr; } }
/* 작가 명세서: 세트명 병기 · 기준액이 결제액과 다른 줄 강조 */
.statement-set { display: block; font-weight: 400; }
.statement-base-differs { font-weight: 700; }
.statement-notes { margin-top: 10px; }

/* 상태 배지 색 (fragments/admin :: badge): 성공=초록 · 진행/대기=주황 · 실패/중지=빨강 · 중립=회색 */
.status-pill.tone-ok { background: var(--ok-bg); color: var(--ok); }
.status-pill.tone-wait { background: #fff4e5; color: #9a5b00; }
.status-pill.tone-bad { background: var(--danger-bg); color: var(--danger); }
.status-pill.tone-neutral { background: #eef0f3; color: var(--muted); }

/* 정산 계산: 환율 방식(실효/매매기준율)에 따라 반대쪽 입력을 숨긴다 (판매 방식 fieldset 과 같은 :has 방식) */
fieldset.fx-basis:has(input[value="EFFECTIVE"]:checked) .ref-only { display: none; }
fieldset.fx-basis:has(input[value="REFERENCE"]:checked) .eff-only { display: none; }

/* 표 머리줄(thead) + 가로 스크롤 wrapper. 6장의 table{display:block} 은 thead 가 있으면 머리줄과 본문이 따로 떨어지므로
   관리자 표는 div.table-wrap 이 스크롤을 맡고 표는 진짜 표(display:table)로 — :where 로 특이도를 낮춰 .member-table 등 반응형 규칙이 이긴다 */
.table-wrap { overflow-x: auto; max-width: 100%; margin: 12px 0; }
.table-wrap:empty { display: none; }
:where(.table-wrap) > table { display: table; width: 100%; margin: 0; overflow: visible; }
:where(.table-wrap) > table > thead { display: table-header-group; }
:where(.table-wrap) > table > tbody { display: table-row-group; }
:where(.table-wrap) > table > thead > tr > th { white-space: nowrap; }
@media (max-width: 640px) {
  .member-table > thead { display: none; }               /* 카드형에서는 머리줄 숨김 (tr:first-child 규칙이 본문 첫 줄을 숨기지 않게) */
  .member-table > tbody > tr:first-child { display: block; }
  .table-wrap:has(> .member-table) { overflow: visible; }
}

/* 필수 칸 표시: label 안 <span class="req">필수</span> — 서버가 실제로 거부하는 칸에만. 「*」 는 공개 전 입력 권장(경고만) */
/* label 의 글자가 span 없이 바로 오면 .req 가 첫 자식 요소가 되어 「label > span:first-child { display:block }」(1절)에 걸려
   한 줄 전체 너비의 빨간 테두리가 된다 → 같은 구체성으로 아래에 다시 적어 늘 글자 옆 작은 배지로 */
.req, label > span.req:first-child { display: inline-block; font-size: .7rem; color: var(--danger); font-weight: 700; margin: 0 0 0 4px; padding: 0 5px;
  border: 1px solid var(--danger); border-radius: 999px; line-height: 1.5; vertical-align: 2px; }
/* 관리자 화면 첫머리 안내 (무엇을 하는 화면인지·예시) */
.screen-intro { margin: 12px 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid #6b8fd6; border-radius: 10px; background: #f6f8fd; }
.screen-intro p { margin: 0 0 8px; }
.screen-intro ul { margin: 4px 0 0; padding-left: 20px; }
.fine-print { font-size: .85rem; padding-left: 20px; }
/* 작가 정산 정보의 「*」 표시는 배지가 아니라 빨간 별표만 (291aa2e 이전 모양) */
.author-form label > span.req, .author-form legend .req, .req-note .req {
  border: 0; padding: 0; border-radius: 0; font-size: inherit; line-height: inherit; vertical-align: baseline; margin-left: 2px; color: #b42318; }
/* 관리자 자료 상세 — 세로로 너무 길지 않게 넓은 화면에서는 칸을 나눈다 */
.field-cols { display: grid; gap: 0 24px; }
.field-row { display: grid; gap: 0 16px; }
.field-cols textarea { max-width: none; min-height: 168px; }
.field-row input, .field-row select { max-width: none; }
.sales-cards { display: grid; gap: 12px; }
.sales-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; }
.sales-card h3 { margin: 0 0 8px; font-size: 1rem; }
.sales-card p, .sales-card ul { margin: 4px 0 8px; }
.sales-card > small { display: block; }
.sales-card details > summary { cursor: pointer; font-weight: 700; }
.file-cols { display: grid; gap: 0 24px; }
.file-cols h3 { margin: 4px 0 6px; font-size: 1rem; }
.file-cols details > summary, details.help > summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
details.help { margin: 4px 0; }
.danger-zone { margin: var(--section-gap) 0 12px; border: 1px solid #f1c7c3; border-radius: var(--radius); padding: 10px 16px; background: var(--surface); }
.danger-zone > summary { cursor: pointer; font-weight: 700; color: #b42318; }
@media (min-width: 900px) {
  .field-cols { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr 2fr; }
  .sales-cards { grid-template-columns: 1fr 1fr; }
  .sales-card-wide { grid-column: 1 / -1; }
  .file-cols { grid-template-columns: 1fr 1fr; }
}
textarea.wide { max-width: none; min-height: 64px; }

/* 동의서 재동의 (2026-10-25): 작가 화면 위 띠 + 바뀐 줄만 보여 주는 상자 */
.reconsent-band { margin: 0 0 14px; padding: 12px 16px; border: 1px solid #f0d58a; border-left: 5px solid #e0a400; border-radius: 10px; background: #fff8e6; }
.reconsent-band p { margin: 0; line-height: 1.7; }
.reconsent-band .band-button { display: inline-block; margin-left: 8px; padding: 6px 14px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; }
.reconsent-band .band-button:hover { opacity: .92; }
.reconsent-summary s { color: #8a2d2d; margin-right: 4px; }
.terms-changes { max-height: none; }
.terms-changes p.terms-heading { margin-top: 10px; color: var(--muted); font-size: .92rem; }
.terms-changes p.terms-heading:first-child { margin-top: 0; }
.secondary-link { margin-left: 12px; font-size: .92rem; }
button.small { padding: 4px 10px; font-size: .82rem; }

/* 동의서 정합성 점검 (2026-10-26): 고쳐야 할 문장 카드 */
ul.terms-check { list-style: none; padding: 0; margin: 12px 0; }
ul.terms-check > li { border: 1px solid var(--line); border-left: 4px solid #e0a400; border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; background: #fff8e6; }
.terms-check .check-head { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.terms-check .check-head small { overflow-wrap: anywhere; min-width: 0; }
.terms-check .check-suggestion { margin: 0; white-space: pre-wrap; line-height: 1.6; font-size: .92rem; overflow-wrap: anywhere;
  background: #e3f6e8; border-left: 3px solid #2e9e55; padding: 6px 10px; border-radius: 4px; }
.terms-check .check-foot { margin: 8px 0 0; }
.terms-check .check-foot button { margin: 0; }
[role=status].ok { background: var(--ok-bg); color: var(--ok); border-radius: 6px; padding: 10px 14px; border-left: 4px solid #2e9e55; }

/* 분배안·계약서 (2026-10-27): 계약서 초안 본문 — 종이 문서처럼 한 장으로 */
.agreement-doc { max-width: 820px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 28px 28px; line-height: 1.8; overflow-wrap: anywhere; }
.agreement-doc h2 { text-align: center; border-bottom: 0; margin-top: .6em; }
.agreement-doc h3 { font-size: 1rem; margin: 1.6em 0 .4em; }
.agreement-doc p { margin: .35em 0; white-space: pre-wrap; }  /* 서명란 「2026년     월     일」 빈칸 유지 */
.agreement-doc ol { margin: .3em 0 .3em 1.2em; padding-left: 1em; }
.agreement-doc td.num, .agreement-doc th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 620px) { .agreement-doc { padding: 14px 16px 20px; } }

/* ======================================================================
   공지 (2026-10-27): 맨 위 띠 · 목록 · 본문 · 작가 대시보드 카드 · 관리자 쓰기 화면
   띠는 줄 전체가 링크(누르기 쉬움), × 는 44px 칸. 중요 = 주황(사이트는 닫기 없음), 일반 = 파랑.
   ====================================================================== */
.notice-bar { display: flex; align-items: stretch; margin: 0 0 12px; border-radius: 10px; font-size: .95rem; line-height: 1.5; overflow: hidden; }
.notice-bar.info { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid #c9daef; }
.notice-bar.important { background: #fff4e5; color: #7a3e00; border: 1px solid #f3c98b; border-left: 5px solid #e07b00; }
.notice-bar .notice-link { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  min-height: 44px; padding: 9px 14px; box-sizing: border-box; color: inherit; text-decoration: none; }
.notice-bar a.notice-link:hover .notice-title { text-decoration: underline; }
.notice-bar a.notice-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.notice-bar .notice-text { flex: 1 1 16em; min-width: 0; }
.notice-bar .notice-text .notice-tag { margin-right: 8px; }
.notice-bar .notice-title { font-weight: 700; overflow-wrap: anywhere; }
.notice-bar .notice-more { margin-left: auto; font-weight: 700; font-size: .88rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.notice-bar .notice-close, .notice-bar button.notice-close {
  flex: 0 0 44px; display: grid; place-items: center; width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: none; }
.notice-bar button.notice-close:hover { background: rgba(0, 0, 0, .06); }
.notice-bar .notice-close-form { display: flex; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.notice-tag { display: inline-block; flex: none; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; background: #fff;
  font-size: .74rem; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.notice-tag.important { color: #b45300; }
.notice-bar.important .notice-tag { color: #b45300; }
.notice-new { justify-self: end; padding: 1px 8px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.6; }

/* 목록: 한 줄 전체가 링크 (날짜 · 제목 · NEW). 좁은 화면은 날짜를 위로 */
.notice-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.notice-list > li { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.notice-list > li:last-child { border-bottom: 0; }
.notice-row { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) auto; align-items: baseline; gap: 2px 14px;
  min-height: 48px; padding: 12px 18px; box-sizing: border-box; color: var(--text); text-decoration: none; }
.notice-row:hover { background: var(--surface-soft); text-decoration: none; }
.notice-row:hover .notice-row-title > span:last-child { text-decoration: underline; }
.notice-row time { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice-row-title { overflow-wrap: anywhere; color: var(--accent-strong); font-weight: 600; }
.notice-row-title .notice-tag { margin-right: 6px; }
.notice-list li.unread .notice-row-title { font-weight: 700; }
.notice-list li.read .notice-row-title { color: var(--muted); font-weight: 400; }
.notice-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
@media (max-width: 560px) {
  .notice-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .notice-row time { grid-column: 1 / -1; font-size: .8rem; }
  .notice-bar { font-size: 1rem; }   /* 모바일 기본 글자(15px) 그대로 — 띠 제목이 14px 아래로 작아지지 않게 */
  .notice-bar .notice-link { padding: 9px 12px; }
}

/* 본문 */
.notice-page h1 { margin: 8px 0 16px; }
.notice-article { margin: 12px 0 16px; padding: 22px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.notice-article h1 { margin: 4px 0 14px; font-size: 1.35rem; line-height: 1.5; border: 0; padding: 0; }
.notice-meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .88rem; }
.notice-body { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.9; }
.notice-foot { color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { .notice-article { padding: 16px 16px 18px; } .notice-article h1 { font-size: 1.15rem; } }

/* 작가 대시보드 공지 카드 */
.notice-card { margin: 0 0 18px; }
.notice-card-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.notice-card-head h2 { margin: 0; padding: 0; border: 0; background: none; font-size: 1.05rem; }
body:has(> nav.area-nav) .notice-card-head h2 { margin: 0; padding: 0; border: 0; background: none; }

/* 관리자 */
.notice-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-table-title { white-space: normal; min-width: 14em; }
.read-progress { display: inline-block; width: 80px; height: 8px; margin-right: 6px; overflow: hidden; border-radius: 4px; background: #eef0f3; vertical-align: middle; }
.read-progress i { display: block; height: 100%; background: var(--ok); }
.notice-read-box { margin: 0 0 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.notice-read-box p { margin: 0; }
.notice-unread-names { margin: 6px 0 0; }
.notice-form { max-width: 760px; }
.notice-form label.choice { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.notice-form label.choice input { flex: none; width: auto; margin-top: .35em; }
.notice-form label.choice small { display: block; color: var(--muted); }
.notice-form .notice-fixed { margin: 4px 0; font-weight: 600; }
.notice-dates input { width: auto; }
.notice-preview-title { margin: 1.4em 0 .4em; font-size: 1rem; }
.notice-preview { padding: 12px; border: 2px dashed #b9c9dc; border-radius: 12px; background: #fbfcfe; }
.notice-preview .notice-bar { margin: 0; }
.notice-preview p { margin: 6px 0 0; }
.notice-submit { margin-top: 18px; }
.notice-delete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 760px; margin-top: 28px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }

/* 작가 화면 하단 문서 링크 (운영 규칙·개인정보 처리방침은 게시만) */
.author-footer { margin-top: 48px; }
.author-footer p { margin: 10px 0 0; }
/* 게시 문서(운영 규칙·개인정보 처리방침) 화면은 전문을 그대로 펼쳐 보여 준다 (동의서 상자처럼 420px 스크롤 X) */
.doc-page .terms-body { max-height: none; overflow: visible; }


/* ======================================================================
   목록·상세에서 바로 담기 — 상태별 버튼·「カート内」 배지·토스트·모바일 바 (docs/25-cart-ux-proposal.md, 2026-10-30)
   담김 여부는 .cart-state[data-in-cart] 가 들고, 안의 [data-when=in|out] 중 하나만 보인다 (JS 는 속성만 바꾼다)
   ====================================================================== */
.cart-state[data-in-cart="false"] [data-when="in"], .cart-state[data-in-cart="true"] [data-when="out"] { display: none !important; }
.pill.incart { background: #fff4e5; color: #8a4b00; border-color: #f3d9b1; }
/* 버튼은 카드 맨 아래 고정 — 분류 줄이 두 줄로 접히는 카드와 한 줄인 카드의 버튼 높이가 달랐다 (2026-10-30 소유자 모바일 캡처) */
.material-card .material-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.material-card .material-body > * { margin-top: 0; margin-bottom: 8px; }
.material-card .material-body > :last-child { margin-bottom: 0; }
.material-card .material-body .card-badges:not(:has(*)) { display: none; }   /* 배지 없는 빈 줄은 자리 차지 않게 */
.card-actions { margin-top: auto !important; padding-top: 10px; }
.card-actions form { margin: 0; }
.card-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px;
  padding: 8px 12px; border-radius: 10px; font-size: .9rem; font-weight: 700; line-height: 1.25; cursor: pointer;
  text-decoration: none; text-align: center; white-space: normal; box-sizing: border-box;
}
.card-btn.add { background: #fff; color: #2a4a8a; border: 1.5px solid #2a4a8a; }
.card-btn.add:hover { background: #eef3fb; color: #2a4a8a; text-decoration: none; }
.card-btn.incart { background: #edf1ff; color: #4057b2; border: 1.5px solid #c9d3f7; }
.card-btn.incart:hover { background: #e2e8fd; text-decoration: none; }
.card-btn.done { background: #167242; color: #fff; border: 1.5px solid #167242; }
.card-btn.done:hover { background: #125c36; color: #fff; text-decoration: none; }
.card-btn .short { display: none; }
@media (max-width: 760px) {
  .card-btn { font-size: .85rem; min-height: 38px; padding: 7px 6px; }
  .card-btn.add [aria-hidden] { display: none; }   /* 2열 카드(390px)에서 「＋ カートに入れる」 가 두 줄로 접혀 「＋」 는 뺀다 */
  .card-btn .long { display: none; }   /* 2열 카드에서 두 줄로 접히지 않게 「カート内」 로 */
  .card-btn .short { display: inline; }
}
/* 상세: 담긴 자료의 안내 상자 */
.detail-incart { background: #edf1ff; border: 1px solid #c9d3f7; border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.detail-incart strong { color: #4057b2; }
.detail-incart-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.detail-incart-row form { margin: 0; }
.detail-incart-row button.link-button { margin: 0; color: var(--muted); }
.mobile-cart-state { display: contents; }
/* 담기 결과 토스트 (화면 이동 없이 알림) */
.cart-toast {
  position: fixed; left: 16px; right: 16px; top: 12px; z-index: 60; margin: 0 auto; width: fit-content; max-width: calc(100vw - 32px);
  display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: #1f2e3d; color: #fff;
  font-size: .95rem; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.cart-toast[hidden] { display: none; }
.cart-toast a { color: #ffd37a; font-weight: 700; white-space: nowrap; }
/* 모바일 하단 바 — 목록 화면만. PC 는 헤더의 수량 배지로 충분 */
.cart-bar { display: none; }
@media (max-width: 760px) {
  .cart-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(31,46,61,.08);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .cart-bar[hidden] { display: none; }
  .cart-bar strong { font-size: .95rem; }
  .cart-bar small { display: block; color: var(--muted); font-size: .8rem; }
  .cart-bar .button-link { margin: 0; white-space: nowrap; }
  body:has(.cart-bar:not([hidden])) { padding-bottom: 72px; }
}
@media print { .cart-bar, .cart-toast { display: none !important; } }

/* 장바구니 아래쪽 정리 (2026-10-30 소유자 — 합계·안내·버튼이 흩어져 있음, docs/25 6장):
   합계 상자 하나 안에 할인 → 합계 → 반품 안내(작은 글자) → 동의·구매 버튼(전체 폭). 비로그인은 로그인 버튼 + 가입 링크 */
.cart-checkout-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 18px 0 0; max-width: 560px; }
@media (min-width: 761px) { .cart-checkout-box { margin-left: auto; } }   /* PC: 표의 가격·합계 쪽(오른쪽)에 맞춰 둔다 */
.cart-total-line:first-child { border-top: 0; padding-top: 0; margin-top: 0; }   /* 소계·할인 줄이 없으면 위 구분선도 없음 */
.cart-checkout-box .cart-next-tier { margin: 0 0 12px; }
.cart-checkout-box .cart-summary { margin: 0; }
.cart-checkout-box .cart-summary > div { max-width: none; padding: 4px 0; color: var(--muted); }
.cart-total-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.cart-total-line strong { font-size: 1.35rem; color: #152235; }
.cart-total-line small { color: var(--muted); font-size: .85rem; }
.cart-checkout-box .cart-minimum, .cart-checkout-box .notice-box { margin: 12px 0 0; }
.cart-notice { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #f6f8fb; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.cart-notice strong { display: block; color: var(--text); font-size: .9rem; margin-bottom: 4px; }
.cart-notice p { margin: 0 0 6px; }
.cart-notice a { font-size: .86rem; }
.cart-agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 12px; font-size: .9rem; line-height: 1.55; }
.cart-agree input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.cart-checkout-box form { margin: 0; }
.cart-checkout-box form p { margin: 0; }
.cart-checkout { display: block; width: 100%; min-height: 50px; margin: 0; font-size: 1rem; text-align: center; box-sizing: border-box; }
.checkout-signin { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.checkout-signin .text-link { font-size: .92rem; }
.checkout-signin small { color: var(--muted); text-align: center; line-height: 1.5; }
.cart-continue { margin-top: 22px; }
@media (max-width: 760px) {
  .cart-checkout-box { padding: 16px; margin-top: 14px; }
  .cart-continue { flex-direction: column; align-items: stretch; gap: 10px; }
  .cart-continue .button-link { text-align: center; margin: 0; }
  .cart-continue .text-link { text-align: center; }
}

/* 포인트 (docs/27-points.md, 2026-11-01): 장바구니 「ポイントを使う」 상자 · 마이페이지 「ポイント」 탭 · 상세 안내 */
.cart-points { margin: 12px 0 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fffdf5; }
.cart-points-balance { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cart-points-balance strong { font-size: 1.1rem; color: #152235; }
.cart-points-use { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.cart-points-use label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cart-points-use input { width: 7em; min-height: 40px; text-align: right; font-size: 1rem; }
.cart-points-use .cart-points-all { min-height: 40px; padding: 0 14px; margin: 0; }
.cart-points-use small { flex-basis: 100%; }
.cart-points-summary { margin: 10px 0 0 !important; }
.cart-pay-line { margin-top: 6px; }
.cart-pay-line strong { color: var(--accent-strong); }
.cart-points-earn { margin: 10px 0 0; font-size: .92rem; color: var(--accent-strong); }
.cart-points-signup { color: var(--accent-strong) !important; }
.points-hint { margin: 6px 0 0; font-size: .9rem; color: var(--accent-strong); }
.order-points-used { color: var(--accent-strong); }
.order-points-earned { padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); }
.account-tabs .tab-count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .8rem; font-weight: 700; }
.points-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: 480px; }
.points-card .points-balance { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.points-card .points-balance strong { font-size: 1.6rem; color: #152235; }
.points-card p.muted { margin: 6px 0 0; font-size: .9rem; }
.points-rules { margin: 14px 0; padding-left: 1.2em; font-size: .9rem; line-height: 1.6; }
.points-history { display: table; width: 100%; max-width: 720px; border-collapse: collapse; font-size: .92rem; table-layout: auto; }   /* 공통 table{display:block} 을 되돌려 머리줄·본문 열을 맞춘다 (2026-11-02) */
.points-history > thead { display: table-header-group; }
.points-history > tbody { display: table-row-group; }
.points-history-wrap { overflow-x: auto; max-width: 100%; }                       /* 좁은 화면(320px)에서는 표가 가로 스크롤 */
.points-history td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }  /* 내용·주문번호 열은 줄바꿈 */
.points-history th, .points-history td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.points-history td:nth-child(3), .points-history td:nth-child(4), .points-history th:nth-child(3), .points-history th:nth-child(4) { text-align: right; white-space: nowrap; }
.points-history td.plus { color: var(--accent-strong); font-weight: 700; }
.points-history td.minus { color: #a33; }
@media (max-width: 760px) {
  .cart-points-use input { width: 6em; }
  .points-history { font-size: .85rem; }
  .points-history th, .points-history td { padding: 6px 4px; }
}

/* 관리자 「포인트」 (2026-11-02 레이아웃 수정 — 입력칸이 한 줄씩 떨어지고 표 머리줄이 어긋나던 것): 설명 글 안에 작은 입력칸, 조정 폼은 한 줄 */
.points-settings label, .points-adjust label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 12px 4px 0; }
.points-settings p { margin: 10px 0; }
.points-settings p small { display: block; margin-top: 2px; }
.points-settings input.inline-input { width: 5em; margin-top: 0; }
.points-adjust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.points-adjust input.inline-input { margin-top: 0; }
.points-adjust .points-delta { width: 8em; }
.points-adjust .points-note { width: 20em; max-width: 100%; }
.points-adjust button { margin: 0; }
@media (max-width: 760px) { .points-adjust .points-note { width: 100%; } }

/* ======================================================================
   19. お気に入り(즐겨찾기 ♡)·役に立った(추천)·ひとこと(감상) — docs/29 (2026-11-02)
   ♥ 와 추천은 살구색(--warm, 가정용 배지와 같은 따뜻한 보조색) — 파랑 신뢰 바탕 위 포인트. 별점은 없다.
   통계 줄 클래스는 .stat-line·.card-social — .social-line 은 LINE 로그인 버튼(초록)이라 쓰지 않는다 (재발 주의).
   ====================================================================== */
.icon { display: inline-block; vertical-align: -3px; flex: none; }
.material-card { position: relative; }
.fav-form { margin: 0; }
.material-card > .fav-form { position: absolute; top: 10px; right: 10px; z-index: 2; }
.fav-button { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); color: #9aa3ad; box-shadow: var(--shadow-sm); cursor: pointer; }
.fav-button .icon path { fill: transparent; }
.fav-button:hover { color: var(--warm); border-color: var(--warm-line); background: #fff; }
.fav-button[data-fav-on="true"] { color: var(--warm); border-color: var(--warm-line); background: var(--warm-soft); }
.fav-button[data-fav-on="true"] .icon path, .fav-detail[data-fav-on="true"] .icon path { fill: currentColor; }
.fav-button:focus-visible, .fav-detail:focus-visible, .helpful-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.card-social { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: .86rem; margin: 0; }
.card-social span { display: inline-flex; align-items: center; gap: 3px; }
.card-social .icon, .stat-line .icon { color: var(--warm); }
.stat-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); margin: -4px 0 12px; font-size: .95rem; }
.stat-line a, .stat-line span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.stat-line a:hover { color: var(--warm-text); }
.fav-detail-form { margin: 10px 0 0; }
.fav-detail { display: inline-flex; align-items: center; gap: 6px; }
.fav-detail .icon path { fill: transparent; }
.fav-detail[data-fav-on="true"] { color: var(--warm-text); background: var(--warm-soft); border-color: var(--warm-line); }
.social-flash { display: none; }
/* 상품 화면 「使ってみた感想」 */
.voices h2 { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.voices-count { font-size: .95rem; font-weight: 400; color: var(--muted); }
.chip-tally { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
.chip-tally li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: var(--warm-soft); border: 1px solid var(--warm-line); color: var(--warm-text); font-size: .9rem; }
.chip-tally strong { font-size: .95rem; }
.voice-item { border-top: 1px solid var(--line); padding: 14px 0; }
.voice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9rem; color: var(--muted); }
.voice-name { color: var(--text); }
.voice-head time { font-variant-numeric: tabular-nums; }
.voice-report { margin-left: auto; position: relative; }
.voice-report summary { list-style: none; cursor: pointer; font-size: .8rem; color: var(--muted); text-decoration: underline; }
.voice-report summary::-webkit-details-marker { display: none; }
.voice-report-form { position: absolute; right: 0; top: 1.6em; z-index: 5; width: min(260px, 80vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-md); }
.voice-report-form fieldset { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.voice-report-form legend { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.voice-report-form label { display: flex; gap: 6px; align-items: center; font-weight: 400; color: var(--text); }
.voice-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 0; }
.voice-chips li { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 2px 10px; font-size: .82rem; color: var(--muted); }
.voice-body { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.voices-empty { margin: 0; }
.voices-from-library { margin: 14px 0 0; }
/* 「マイ教材」 카드 — 👍 는 다운로드 버튼 옆 같은 크기 1순위 (살구색) */
.library-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.library-card .library-actions form { margin: 0; }
.helpful-form { margin: 0; }
.helpful-button { display: inline-flex; align-items: center; gap: 6px; background: var(--warm); border-color: var(--warm); color: #fff; }
.helpful-button:hover { background: #d97520; border-color: #d97520; }
.helpful-button[data-helpful-on="true"] { background: var(--warm-soft); border-color: var(--warm-line); color: var(--warm-text); }
.helpful-button.pulse { animation: helpful-pulse 1.4s ease-out 1; }
@keyframes helpful-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 132, 46, .55); } 100% { box-shadow: 0 0 0 14px rgba(232, 132, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .helpful-button.pulse { animation: none; } }
.library-voice { grid-column: 1 / -1; display: grid; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.voice-result { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: .9rem; }
.voice-result.error { background: var(--danger-bg); color: var(--danger); }
.voice-state { margin: 0; font-size: .85rem; color: var(--muted); }
.pill.pending { background: var(--warn-bg); color: var(--warn); border-color: #f1dca6; }
.voice-panel > summary { cursor: pointer; color: var(--accent); font-size: .92rem; width: fit-content; }
.voice-panel[open] > summary { font-weight: 700; }
.voice-form { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 8px; display: grid; gap: 10px; }
.voice-form-title { margin: 0; font-weight: 700; font-size: .92rem; }
.voice-form label { margin: 0; }
.voice-form textarea { width: 100%; }
.voice-form select { max-width: 100%; }
.voice-form button { justify-self: start; margin: 0; }
.voice-note { margin: 0; font-size: .8rem; }
.chip-check { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check legend { font-size: .88rem; margin-bottom: 6px; }
.chip-check label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 400; font-size: .88rem; cursor: pointer; }
.chip-check label:has(input:checked) { border-color: var(--warm-line); background: var(--warm-soft); color: var(--warm-text); }
.chip-check input { margin: 0; width: auto; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.voice-delete { margin: 6px 0 0; }
.request-state { margin-top: 8px; }
.request-state p { margin: 0; font-size: .88rem; }
.request-answer-title { font-weight: 700; }
.request-answer { white-space: pre-line; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-top: 4px !important; }
@media (max-width: 760px) {
  .material-card > .fav-form { top: 6px; right: 6px; }
  .fav-button { width: 32px; height: 32px; }
  .card-social { font-size: .82rem; gap: 10px; }
  .library-actions { display: grid; grid-template-columns: 1fr; }
  .library-actions button, .helpful-button { width: 100%; justify-content: center; }
  .voice-report-form { right: -4px; }
}
/* 관리자 「자료 후기 관리」·문의 「담당자에게 메일로 전달」·작가 「손님 의견」 (docs/29) */
.voice-summary { margin: 8px 0 14px; }
.voice-settings { margin: 0 0 18px; }
.voice-settings > summary { cursor: pointer; font-weight: 700; }
.voice-settings label { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-right: 12px; }
.voice-settings textarea { width: 100%; max-width: 520px; display: block; margin-top: 4px; }
.voice-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 20px; }
.voice-actions form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.relay-box { border: 1px solid var(--warm-line); background: var(--warm-soft); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; }
.relay-box h2 { margin-top: 0; }
.relay-list { padding-left: 1.2em; }
.relay-list li { margin-bottom: 10px; }
.relay-reply { background: var(--surface); border-radius: 8px; padding: 8px 10px; }
/* 개선 요청 → 매형·번역가 메일 (2026-11-02, docs/29 12장): 요지는 짧게 — 답변 칸(220px)보다 낮게 */
.forward-form textarea { min-height: 110px; }
.forward-to { background: var(--surface); }
.forward-to label { display: flex; margin: 6px 0; }
.forward-to label span { overflow-wrap: anywhere; }
.forward-to .forward-extra { display: block; margin: 12px 0 4px; }
.forward-extra input { max-width: 420px; }
.forward-hint { margin: 4px 0 0; font-size: .85rem; }
.author-voices { margin: 22px 0; }
.voice-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 16px; margin: 10px 0; }
.voice-card-head { margin: 0 0 6px; color: var(--muted); font-size: .92rem; }
.voice-card-head strong { color: var(--text); }
.voice-card-body { margin: 6px 0; white-space: pre-line; overflow-wrap: anywhere; }
.voice-card .voice-chips li { background: var(--warm-soft); border-color: var(--warm-line); color: var(--warm-text); }
.voice-original summary { cursor: pointer; color: var(--muted); font-size: .86rem; }
.voice-original p { color: var(--muted); font-size: .9rem; white-space: pre-line; }
.relay-card { border-color: var(--warm-line); }
.relay-replied { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
/* 내 교재: 한 카드의 ひとこと 를 펼쳐도 옆 카드가 같이 늘어나지 않게 (2026-11-02 브라우저 검사) */
.library-grid { align-items: start; }
.library-card { align-content: start; }
.voice-row-delete { margin: 0; } .voice-row-delete button { padding: 4px 10px; min-height: 0; font-size: .85rem; }
/* 관리자 감상 목록: 삭제는 상태 칸 배지 밑(표가 넓어도 왼쪽에서 바로), 글은 줄바꿈 (2026-11-02 브라우저 검사) */
.voice-table td { vertical-align: top; }
.voice-table .voice-row-delete { margin-top: 6px; }
.voice-table .voice-cell-body { white-space: normal; min-width: 14em; max-width: 26em; overflow-wrap: anywhere; }
/* 2026-11-02 화면 점검 스윕에서 고친 것 (docs/29 9장) */
.voice-actions form { margin: 0; padding: 0; border: 0; background: none; }      /* 관리자 한마디 상세: 「삭제」만 공통 폼 여백으로 들여써지던 것 */
.voice-actions button { margin: 0; }
.voice-form textarea, .voice-form select { max-width: 100%; }                      /* 공통 max-width:480px 때문에 넓은 화면에서 글 칸이 선택 칸보다 짧던 것 */
.library-actions button { margin: 0; }
.library-actions form:not(.helpful-form) button { white-space: nowrap; }   /* 「再ダウンロード」는 한 줄. 👍 는 누른 뒤 「役に立ったと答えました」가 길어 320px 에서 넘치므로 줄바꿈 허용 (2026-11-02 검사) */
.helpful-button { text-align: center; }
@media (max-width: 400px) {
  /* 320~400px 내 교재 카드: 「再ダウンロード」·「役に立った」가 두 줄로 꺾이고 사이가 벌어지던 것 → 썸네일을 줄여 버튼 폭 확보 */
  .library-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .library-thumb { min-height: 84px; }
  .library-actions { gap: 6px; }
  .library-actions button, .helpful-button { padding-left: 10px; padding-right: 10px; font-size: .92rem; }
}
.library-card .library-actions form { padding: 0; border: 0; background: none; min-height: 0; }   /* 공통 폼 여백 때문에 320px 에서 버튼 사이가 30px 벌어지던 것 */
.helpful-button[data-helpful-on="true"] { font-size: .9rem; padding-left: 12px; padding-right: 12px; }   /* 누른 뒤 긴 문구가 768px 2열에서 두 줄로 뭉치던 것 */
/* 한마디 이름 표시·긴 글 접기·카드 최신 한 줄 (2026-11-02, docs/29 13장) */
.voice-name-choice { margin: 10px 0 2px; }
.voice-name-choice .inline-check { margin: 0; }
.voice-name-preview { margin: 2px 0 0 24px; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.voice-name-choice:has(input[name=maskName]:checked) .name-full,
.voice-name-choice:not(:has(input[name=maskName]:checked)) .name-masked { display: none; }
/* PC 한 줄 70자는 읽기 힘들어 42자로 묶는다. 접기: PC 4줄(약 160자)·모바일 5줄(390px 약 115자) */
.voices .voice-body { max-width: 42em; }
.voices .voice-body.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
@media (max-width: 767px) { .voices .voice-body.is-clamped { -webkit-line-clamp: 5; } }
.voices button.voice-more-toggle { margin: 4px 0 0; text-decoration: none; font-weight: 700; }
/* 카드: 가장 새 한마디 한 줄, 넘치면 말줄임 (이름 없음) */
.card-voice { margin: 2px 0 0; min-width: 0; font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 감상 더 보기·감상 전체 화면 (2026-11-02, docs/29 14장) */
.voices-more-row { margin: 14px 0 0; overflow-anchor: none; } /* 더 보기 뒤 화면이 단추를 따라 밀리지 않게 */
.voices .voice-list { overflow-anchor: none; }
.voices-more-row[hidden] { display: none; }
.voices .voices-more { min-width: 240px; justify-content: center; }
@media (min-width: 768px) {
  .voices-more-row.mobile-only { display: none; }      /* PC 는 5개까지 다 보이므로 단추 없음 (JS 없을 때) */
  .voices-page-more-row { display: none; }             /* 감상 전체 화면 PC 는 쪽 넘김 */
}
@media (max-width: 767px) {
  .voices .voice-item.voice-extra-m { display: none; } /* 모바일은 처음 3개 */
  .voices .voices-more { width: 100%; min-height: 48px; }
  .voices-all:not(.use-more) .voices-page-more-row { display: none; } /* JS 가 없으면 쪽 넘김 */
  .voices-all.use-more .voices-pager { display: none; }
}
.voice-item:focus { outline: none; }
.voice-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.voices-page-material { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 8px; color: inherit; font-weight: 700; }
.voices-page-material img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.voices-all h1 { font-size: 1.4rem; margin: 6px 0 10px; }

/* 홍보 메일 (docs/28, 2026-11-04): 관리자 작성·미리보기 · 사이트 수신 동의 체크·配信停止 */
.marketing-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* 공통 「fieldset label = 옆으로 나란히」(인라인) 를 이 폼에선 끈다 — 저장 잠금용 fieldset 으로 감싸서 칸이 흩어졌던 일 (2026-11-04) */
.marketing-form > fieldset > label { display: block; max-width: 720px; margin: 10px 0; }
.marketing-form .field-label { font-size: 0.9rem; color: var(--muted); margin: 10px 0 4px; max-width: 720px; }
.marketing-form fieldset.marketing-audience { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.marketing-form .marketing-audience label { display: block; margin: 6px 0; }
.marketing-form textarea { max-width: 720px; }
.marketing-button-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; }
.marketing-button-row input { flex: 1 1 220px; margin-top: 0; }
.marketing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0; }
.marketing-actions form { margin: 0; padding: 0; border: 0; background: none; }
.marketing-actions .marketing-schedule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.marketing-actions .marketing-schedule label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.marketing-actions .marketing-schedule input { width: auto; margin-top: 0; }
.marketing-actions button { margin: 0; }
.marketing-preview { width: 100%; max-width: 640px; height: 760px; border: 1px solid var(--line); border-radius: 12px; background: #f2f4f7; }
.marketing-settings label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 12px 4px 0; }
.marketing-settings input.inline-input { width: 8em; margin-top: 0; }
.marketing-settings p small { display: block; margin-top: 2px; }
td.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 10em; }
label.marketing-consent { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 2px; }
label.marketing-consent input { flex: none; margin-top: 3px; }
.marketing-consent-note { display: block; color: var(--muted); font-size: .85rem; margin: 0 0 8px 26px; }
.mail-settings-state { margin: 4px 0; color: var(--muted); }
.unsubscribe-page { max-width: 640px; }
.unsubscribe-form { background: none; border: 0; padding: 0; margin: 16px 0; }
/* 홍보 메일 외부 수신처 (docs/28 8장) */
.contact-form label { max-width: 720px; }
.contact-form label.contact-confirm { display: flex; gap: 8px; align-items: flex-start; }
.contact-form label.contact-confirm input { flex: none; width: auto; margin-top: 3px; }
.marketing-form .marketing-audience label.marketing-external { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
[data-promo-row] .danger-text { color: var(--danger); }
/* 홍보 메일 가입 포인트 프로모션 (docs/28 9장) */
.marketing-form fieldset.marketing-promo { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; max-width: 720px; }
.marketing-promo .promo-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.marketing-promo .promo-row label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.marketing-promo .promo-row input.inline-input { width: 6.5em; margin-top: 0; }
.marketing-promo label.promo-share { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.marketing-promo label.promo-share input { flex: none; width: auto; margin-top: 3px; }
.marketing-promo label.promo-share > span { display: block; color: inherit; font-size: 1rem; margin: 0; }
.promo-sample-mail { background: #fafbfc; border: 1px solid #eceef1; border-left: 4px solid #2f6fb3; border-radius: 8px; padding: 12px 14px; overflow-wrap: anywhere; }
.promo-sample-mail p { margin: 6px 0 10px; }
.promo-sample-button { display: inline-block; background: #2f6fb3; color: #fff; border-radius: 8px; padding: 6px 14px; font-weight: 700; margin-right: 10px; }
.marketing-form fieldset.marketing-creator { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; max-width: 720px; }
.marketing-creator label.promo-share { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.marketing-creator label.promo-share input { flex: none; width: auto; margin-top: 3px; }
.marketing-creator label.promo-share > span { display: block; color: inherit; font-size: 1rem; margin: 0; }
.creator-sample-mail { background: #fbf7f0; border: 1px solid #efe4d2; border-radius: 10px; padding: 12px 14px; overflow-wrap: anywhere; }
.creator-sample-mail small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #b07a2a; }
.creator-sample-mail p { margin: 6px 0 10px; }
.creator-sample-button { display: inline-block; background: #fff; color: #2f6fb3; border: 2px solid #2f6fb3; border-radius: 8px; padding: 5px 13px; font-weight: 700; }
.marketing-creator:not(:has([data-creator-recruit]:checked)) .creator-sample-mail { opacity: .55; }
.promo-banner { font-weight: 600; }
/* 홍보 메일 신규 교재 초안·카드 (docs/28 10장) */
.marketing-form fieldset.marketing-draft, .marketing-form fieldset.marketing-items { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; max-width: 720px; }
.marketing-draft .promo-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.marketing-draft .promo-row label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; }
.marketing-draft .promo-row input.inline-input { width: 5.5em; margin-top: 0; }
.marketing-draft .draft-counts { align-items: center; }
.marketing-draft [data-cards-total].over { color: #c62828; font-weight: 700; }
.marketing-draft label.promo-share, .marketing-items label.promo-share { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.marketing-draft label.promo-share input, .marketing-items label.promo-share input { flex: none; width: auto; margin-top: 3px; }
.marketing-draft label.promo-share > span, .marketing-items label.promo-share > span { display: block; color: inherit; font-size: 1rem; margin: 0; }
.marketing-draft .ai-models { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 6px 0; }
.marketing-draft .ai-models label { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.marketing-draft .ai-models input { width: auto; margin: 0; }
.marketing-draft .field-label-inline { font-size: .9rem; color: var(--muted); }
.marketing-draft label { display: block; }
.marketing-draft .draft-note { display: block; margin-top: 4px; }
.marketing-draft button { margin-right: 8px; }
.marketing-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px dashed var(--line); }
.marketing-item:first-of-type { border-top: 0; }
.marketing-item img { flex: none; width: 64px; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.marketing-item-body { flex: 1; min-width: 0; }
.marketing-item-body strong, .marketing-item-body small { display: block; overflow-wrap: anywhere; }
.marketing-items label { display: block; }
.marketing-draft .ai-models label { align-items: flex-start; }
.marketing-draft .ai-models label input { margin-top: 4px; flex: none; }
.marketing-item .pill-new, .marketing-item .pill-random { display: inline-block; font-size: .72rem; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 2px; }
.marketing-item .pill-new { background: #e2231a; color: #fff; }
.marketing-item .pill-random { background: var(--line); color: var(--muted); }