@charset "utf-8";
/* ============================================================================
 *  도서출판 끌림 — 안내 페이지 공통 스타일
 *  파일 위치: /theme/kkeullim_theme/css/kkeullim.css
 * ----------------------------------------------------------------------------
 *  ■ 어느 페이지가 이 파일을 쓰나
 *    page_content/ 안의 모든 끌림 페이지입니다.
 *      이용약관 · 개인정보처리방침 · 인사말 · 출판 방향 · 오시는 길
 *      출판 안내 · 기획 출판 · 자비 출판 · 동인지 제작 · 집필 대행
 *
 *  ■ 왜 한 파일로 모았나
 *    페이지마다 스타일을 넣으면 열 군데를 고쳐야 합니다.
 *    여기 한 곳만 고치면 모든 페이지가 함께 바뀝니다.
 *
 *  ■ 어디서 불러오나
 *    head.sub.php 가 불러옵니다. (수정파일목록.md 에 적어 두었습니다)
 *
 *  ■ ★ 대표님이 고치실 값은 아래 「값 모음」 열 줄뿐입니다.
 * ========================================================================== */

/* ── 애플 산돌고딕 Neo ──────────────────────────────────────────────────────
   찾는 순서가 세 겹입니다.
     ① 기기에 깔린 글꼴  — 맥·아이폰은 아무것도 내려받지 않습니다
     ② CDN 조각 글꼴     — 윈도우·안드로이드는 본 글자만
     ③ Pretendard        — 둘 다 안 될 때 (테마가 이미 불러오고 있습니다)
   ※ @import 는 반드시 다른 규칙보다 먼저 와야 합니다. 순서를 바꾸지 마십시오. */
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/subsets/AppleSDGothicNeo-dynamic-subset.css");

@font-face{ font-family:'ASGN-System'; font-weight:200;
  src:local('Apple SD Gothic Neo UltraLight'), local('AppleSDGothicNeo-UltraLight'); }
@font-face{ font-family:'ASGN-System'; font-weight:300;
  src:local('Apple SD Gothic Neo Light'), local('AppleSDGothicNeo-Light'); }
@font-face{ font-family:'ASGN-System'; font-weight:400;
  src:local('Apple SD Gothic Neo Regular'), local('AppleSDGothicNeo-Regular'); }
@font-face{ font-family:'ASGN-System'; font-weight:500;
  src:local('Apple SD Gothic Neo Medium'), local('AppleSDGothicNeo-Medium'); }
@font-face{ font-family:'ASGN-System'; font-weight:600;
  src:local('Apple SD Gothic Neo SemiBold'), local('AppleSDGothicNeo-SemiBold'); }

/* ══════════════════════════════════════════════════════════════════════════
   값 모음  —  ★ 여기만 고치시면 됩니다
   (1rem = 10px 입니다. 1.5rem = 15px)
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 본문 글꼴 — 한글은 애플 산돌고딕, 영문과 숫자는 Jost.
     ★ Jost 를 «맨 앞» 에 둡니다.
       Jost 에는 한글 글자가 없어서, 앞에 두어도 한글은 저절로 다음 글꼴로 넘어갑니다.
       브라우저가 글자마다 알아서 갈라 줍니다.
         영문·숫자 → Jost
         한글      → 애플 산돌고딕 Neo
     ★ 영문도 애플고딕으로 쓰시려면 맨 앞의 'Jost', 만 지우십시오. */
  --kk-sans:'Jost','ASGN-System','Apple SD Gothic Neo','Pretendard Variable',Pretendard,
            system-ui,sans-serif;

  --kk-fs:1.5rem;       /* 본문 글자 크기   (테마 기본 1.6rem) */
  --kk-lh:1.6;         /* 본문 줄간격      (테마 기본 2.0) */
  --kk-w:300;           /* 본문 굵기 — 가는 고딕 */
  --kk-gap:3.2rem;      /* 조와 조 사이     (테마 기본 5.6rem) */
  --kk-td:1rem;         /* 표 칸 위아래 여백 (테마 기본 1.6rem) */
  --kk-td-lh:1.55;      /* 표 안 줄간격     (테마 기본 1.7) */

  --kk-par-fs:.9em;     /* 명조 괄호 크기 — 고딕과 높이 맞추기 */
  --kk-pin-w:300;       /* 괄호 안 글자 굵기 — '제1조' 는 600, '(목적)' 은 가늘게 */
  --kk-serif-ls:-.075em;/* 명조 글자의 자간 */

  --kk-bar:var(--point-color);      /* 조 제목 앞 세로바 */
  --kk-num:var(--primary-color);    /* 항 번호 */

  /* ── 도서 목록·상세에서 쓰는 값 ─────────────────────────────────────────
     ★ 한 줄에 몇 권을 놓을지는 --cols 세 줄로 정합니다. */
  --cols:5;             /* 데스크톱 — 한 줄에 몇 권 */
  --cols-md:4;          /* 태블릿 */
  --cols-sm:2;          /* 휴대폰 */

  --bk-cover-h:26rem;   /* 목록의 표지 높이 — 가로는 비율대로 따라옵니다 */
  --bk-fs:1.4rem;       /* 도서명 글자 크기 */
  --bk-pad:1.2rem;      /* 표지와 도서명 사이 */

  /* 서점 단추 — 서점 브랜드색을 쓰지 않고 사이트 톤으로 통일합니다 */
  --btn-bg:transparent;
  --btn-fg:var(--point-color);
  --btn-bd:var(--point-color);

  --rule:var(--body-color);         /* 굵은 구분선 */
  --bg-tint:var(--lightgray-color); /* 옅은 바탕 */
}

/* ══════════════════════════════════════════════════════════════════════════
   머리말 로고
   --------------------------------------------------------------------------
   테마 원본은 가로로 긴 글자 로고(210 x 40px)를 전제로 만들어져 있습니다.
   끌림 로고는 글자 없는 심볼이고 비율이 1.232 : 1 이라 자리를 다시 잡았습니다.

   ★ 크기를 바꾸시려면 아래 --kk-logo-h 한 줄만 고치십시오.
     가로폭은 비율대로 저절로 따라옵니다. 로고가 눌리거나 늘어나지 않습니다.

   ※ style.css 를 고치지 않고 여기서 덮어썼습니다.
     나중에 테마를 새로 받으셔도 이 파일만 다시 얹으면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 맨 위에서 — 로고를 크게 보여 줍니다 */
  --kk-logo-h:60px;                          /* 로고 높이 */
  --kk-logo-w:calc(var(--kk-logo-h) * 1.232);/* 가로폭 — 비율대로 자동 */
  --kk-hd-h:100px;                           /* 머리말 높이 (로고의 약 1.7배) */

  /* 스크롤한 뒤 — 읽는 동안은 얇게
     ★ 머리말이 화면에 붙어 다니므로(position:fixed) 100px 이 계속 자리를 먹습니다.
       노트북(세로 768px)에서는 화면의 13%입니다.
       그래서 맨 위에서만 크게 보여 주고, 내리면 줄입니다. */
  --kk-logo-h-scr:46px;
  --kk-hd-h-scr:78px;
}

/* 로고 자리 — 가로폭을 로고에 맞춰 좁힙니다.
   원본은 210px 이라 심볼 오른쪽에 160px 이 비어 보입니다. */
#header h1 a{
  width:var(--kk-logo-w);
  height:var(--kk-logo-h);
  background-size:contain;
  background-position:left center;
}
#header h1{
  min-width:var(--kk-logo-w);
  height:var(--kk-hd-h);
}

/* 머리말 높이 — 로고 높이에서 뽑아 씁니다 */
#header .hd_wrap,
#header.on .hd_wrap{ height:var(--kk-hd-h); transition:height .24s ease; }
#header h1 a{ transition:width .24s ease, height .24s ease; }

/* 스크롤하면 (custom.js 가 .scr 를 붙입니다)
   ※ 테마 원본은 이 효과를 좁은 화면에서만 켜 두었습니다.
     여기 규칙은 미디어쿼리 밖이라 데스크톱에서도 동작합니다. */
#header.scr .hd_wrap{ height:var(--kk-hd-h-scr); }
#header.scr h1{ height:var(--kk-hd-h-scr); }
#header.scr h1 a{
  height:var(--kk-logo-h-scr);
  width:calc(var(--kk-logo-h-scr) * 1.232);
}

/* 움직임을 꺼 두신 분에게는 전환 없이 */
@media (prefers-reduced-motion:reduce){
  #header .hd_wrap, #header h1 a{ transition:none; }
}

/* 꼬리말 로고
   ★ 우리 SVG 에는 width/height 가 없고 viewBox 만 있습니다.
     크기를 정해 주지 않으면 브라우저가 300 x 150px 로 늘려 버립니다. */
#footer .f_logo img{
  display:block;
  height:var(--kk-logo-h-ft);
  width:calc(var(--kk-logo-h-ft) * 1.232);
}

:root{ --kk-logo-h-ft:44px; }   /* 꼬리말 로고 높이 — 머리말(52px)보다 조금 작게 */

/* 좁은 화면 — 머리말이 화면을 많이 먹지 않게 한 단계 줄입니다.
   ★ 데스크톱과 같게 두시려면 아래 :root 줄을 지우십시오. */
@media (max-width:1024px){
  :root{ --kk-logo-h:44px; --kk-hd-h:72px; --kk-logo-h-scr:36px; --kk-hd-h-scr:62px; --kk-logo-h-ft:38px; }
  #header .hd_wrap, #header.on .hd_wrap{ height:var(--kk-hd-h); }
}

/* ══════════════════════════════════════════════════════════════════════════
   꼬리말 라벨
   --------------------------------------------------------------------------
   「Contact」「Quick Link」는 테마가 원래 쓰던 영문 라벨입니다.
   Jost 서체에 대문자로 나옵니다. 글자가 아니라 장식에 가까운 자리입니다.

   테마 원본에는 자간이 없는데, 대문자 영문은 조금 벌려야 답답해 보이지 않습니다.
   테마가 다른 곳(표 제목)에서 0.2em 을 쓰고 있어 그보다 조금 좁게 맞췄습니다.

   ★ 우리말로 바꾸시려면 tail.php 의 <h3> 글자를 바꾸시고,
     아래 규칙을 이렇게 고치십시오.
       font-family:var(--kk-sans); text-transform:none; letter-spacing:.06em;
     (Jost 에는 한글이 없어 그대로 두면 다른 글꼴로 떨어집니다)
   ══════════════════════════════════════════════════════════════════════════ */
#footer .col h3{
  letter-spacing:.16em;
}

/* ══════════════════════════════════════════════════════════════════════════
   장식 글꼴(Jost)이 걸린 자리 정리
   --------------------------------------------------------------------------
   테마는 「Contact」 「Quick Link」 같은 영문 라벨에 Jost 를 씁니다.
   그 값(--eng-font)은 그대로 두었습니다. 테마의 얼굴이라 건드리지 않습니다.

   ★ 다만 Jost 가 걸린 21곳 가운데 «한글이 들어가는 자리»가 있습니다.
     주메뉴 · 빵부스러기 · 단추 · 표 제목이 그렇습니다.
     Jost 에는 한글이 없어서 그 자리들이 Pretendard 로 떨어집니다.
     그러면 한 화면에 애플고딕·Jost·Pretendard 세 글꼴이 섞입니다.

     그래서 «한글이 들어가는 자리만» 본문 글꼴로 돌려놓습니다.
     영문만 들어가는 자리(Contact · 전화번호 · 쪽번호)는 Jost 그대로입니다.

   ※ 테마 원래 모습대로 두시려면 아래 규칙을 통째로 지우십시오.
   ══════════════════════════════════════════════════════════════════════════ */

/* 한글이 들어가는 자리 → 본문 글꼴 */
#header .gnb > ul > li > a,      /* 주메뉴 — 출판사 소개 · 도서 · 책 만들기 … */
.sub_nav .navigation,            /* 빵부스러기 */
.accent_btn, .default_btn,       /* 단추 — 자세히 보기 · 문의하기 … */
.line_btn, .icon_btn,
.sub_content .table th,          /* 테마 표의 제목칸 */
.fo_wrap .input .tit,            /* 폼 항목 이름 */
#header .tel{                    /* 「전화문의」 — 뒤의 번호는 아래에서 Jost 로 */
  font-family:var(--kk-sans);
}

/* 영문·숫자만 들어가는 자리 → Jost 그대로 (테마 원래 모습) */
#footer .col h3,                 /* Contact · Quick Link */
#footer .ft_cs .call,            /* 전화번호 */
#footer .ft_bar address,         /* Copyright */
#header .tel strong,             /* 전화번호 */
.pg_current,                     /* 쪽번호 */
.title em,                       /* 단락 위 영문 라벨 */
.design{
  font-family:var(--eng-font);
}

/* ══════════════════════════════════════════════════════════════════════════
   머리말의 로그인·회원가입
   --------------------------------------------------------------------------
   테마 원본은 아이콘만 두었습니다. 무엇을 누르는 것인지 알기 어렵고,
   화면 읽어 주는 프로그램에는 아무것도 들리지 않습니다. 글자로 바꿨습니다.

   회원가입은 한 단계 또렷하게 둡니다. 처음 오신 분에게 보이는 문입니다.
   ══════════════════════════════════════════════════════════════════════════ */
#header .adm{ gap:0; }
#header .adm a{ letter-spacing:-.02em; }

/* 두 링크 사이의 세로선.
   ★ 선 «왼쪽»은 앞 링크의 오른쪽 여백, «오른쪽»은 뒤 링크의 왼쪽 여백입니다.
     둘을 같게 두어야 선이 가운데에 놓입니다.
     전에는 오른쪽만 1rem 이라 선이 「로그인」에 붙어 보였습니다. */
#header .adm a + a{ position:relative; padding-left:1.2rem; margin-left:1.2rem; }
#header .adm a + a::before{
  content:""; position:absolute; top:50%;
  /* ★ left:0 이 «가운데» 입니다.
       로그인 글자 끝 → margin 12px → 여기(링크 왼쪽 끝) → padding 12px → 회원가입 글자
       좌우가 각 12px 이라 이 자리가 한가운데입니다.
       -1.2rem 으로 두면 margin 의 «시작» 이라 「로그인」에 붙습니다. */
  left:0;
  width:1px; height:1.1rem; margin-top:-.55rem;
  background:currentColor; opacity:.28;
}
#header .adm a.join{ font-weight:500; }

/* 좁은 화면 — 메뉴 안으로 들어가면 세로선을 지웁니다.
   위아래로 쌓이므로 선이 있으면 오히려 어수선합니다. */
@media (max-width:1024px){
  #header .adm{ gap:1.6rem; }
  #header .adm a + a{ padding-left:0; margin-left:0; }
  #header .adm a + a::before{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   사이트 전체 글꼴
   --------------------------------------------------------------------------
   테마 기본은 Pretendard 입니다 (lib/css/fonts.css).
   이 파일이 그 뒤에 실려 애플 산돌고딕 Neo 로 덮어씁니다.

   ★ 되돌리시려면 아래 body 규칙 세 줄을 지우십시오.
     그러면 약관·방침 본문만 애플고딕이 되고 나머지는 Pretendard 로 돌아갑니다.

   ※ 영문 라벨(--eng-font, Jost)과 명조 제목(--serif-font)은 그대로 둡니다.
     그 둘은 일부러 다른 글꼴을 쓰는 자리입니다.
   ══════════════════════════════════════════════════════════════════════════ */
body{
  font-family:var(--kk-sans);
}

/* ══════════════════════════════════════════════════════════════════════════
   본문
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc{
  font-family:var(--kk-sans);
  font-size:var(--kk-fs);
  font-weight:var(--kk-w);
  line-height:var(--kk-lh);
  color:var(--text-color);
}

/* 설명 글은 모두 가는 고딕입니다.
   제목(h3.chap · h4)과 표 제목만 굵기와 글꼴이 다릅니다. */
.kk-doc p,
.kk-doc li,
.kk-doc dd,
.kk-doc td{ font-family:var(--kk-sans); font-weight:var(--kk-w); }

.kk-doc .cont{ margin-bottom:var(--kk-gap); }
.kk-doc .cont:last-child{ margin-bottom:0; }

.kk-doc p{ margin-bottom:.8rem; }
.kk-doc p:last-child{ margin-bottom:0; }

/* 첫 문단 — 크기만 키우고 글꼴과 굵기는 본문과 같습니다 */
.kk-doc .lead{ font-size:1.9rem; line-height:1.6; letter-spacing:-.03em;
  color:var(--body-color); margin-bottom:2.8rem; }

/* 강조 — 본문보다 한 단계만 굵게. 검게 만들지 않습니다 */
.kk-doc strong{ font-weight:500; color:var(--body-color); }

/* ══════════════════════════════════════════════════════════════════════════
   제목
   ══════════════════════════════════════════════════════════════════════════ */

/* 장 제목 — 약관에만 있습니다. 명조를 남겨 큰 마디를 짚어 줍니다 */
.kk-doc h3.chap{ margin:4rem 0 2rem; padding-bottom:1.2rem;
  border-bottom:1px solid var(--primary-color);
  font-family:var(--serif-font); font-size:2rem; font-weight:400;
  letter-spacing:var(--kk-serif-ls); color:var(--body-color); }
/* ★ 장 제목도 같은 이유로 :first-child 로 둡니다.
     :first-of-type 은 앞에 무엇이 있든 첫 h3 에 걸립니다. */
.kk-doc h3.chap:first-child{ margin-top:0; }
.mtext h3.chap:first-child{ margin-top:0; }

/* 조 제목 — 고딕. 고딕은 명조보다 자간을 좁혀야 헐거워 보이지 않습니다 */
.kk-doc h4{ position:relative; margin-bottom:1.2rem; padding-left:1.6rem;
  font-family:var(--kk-sans); font-size:1.7rem; font-weight:600;
  letter-spacing:-.045em; line-height:1.45; color:var(--body-color); }
.kk-doc h4::before{ content:""; position:absolute; top:.5rem; bottom:.5rem; left:0;
  width:2px; background:var(--kk-bar); }

/* 조 제목의 괄호 — 고딕 괄호는 크고 벌어져 보여 명조로 바꿉니다.
   ★ 괄호 안의 글자까지 명조로 하시려면 아래 .pin 규칙의 주석을 푸십시오. */
.kk-doc h4 .par{ font-family:var(--serif-font); font-style:normal; font-weight:400;
  font-size:var(--kk-par-fs); letter-spacing:var(--kk-serif-ls); }
/* 괄호 안의 글자 — '제1조' 는 굵고 '(목적)' 은 가늡니다.
   번호는 표시이고 그 안은 이름이라, 굵기로 층을 나눕니다. */
.kk-doc h4 .pin{ font-style:normal; font-weight:var(--kk-pin-w); }
/* .kk-doc h4 .pin{ font-family:var(--serif-font); font-weight:var(--kk-pin-w);
     font-size:var(--kk-par-fs); letter-spacing:var(--kk-serif-ls); } */

/* 조 안의 작은 제목 */
.kk-doc h5{ margin:1.6rem 0 .5rem; font-family:var(--kk-sans);
  font-size:var(--kk-fs); font-weight:500; color:var(--body-color); }

/* ══════════════════════════════════════════════════════════════════════════
   항 번호
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc ol{ counter-reset:kk; margin:.5rem 0 .8rem; }
.kk-doc ol > li{ position:relative; counter-increment:kk; padding-left:2.4rem;
  margin-bottom:.5rem; color:var(--muted-color); }
.kk-doc ol > li::before{ content:counter(kk) "."; position:absolute; left:0; top:0;
  color:var(--kk-num); font-family:var(--eng-font); font-weight:400; }
.kk-doc ol ol{ margin:.5rem 0 0; counter-reset:kk2; }
.kk-doc ol ol > li{ counter-increment:kk2; margin-bottom:.3rem; }
.kk-doc ol ol > li::before{ content:counter(kk2, lower-roman) "."; }

/* 글머리표 목록 */
.kk-doc ul.dot{ margin:.5rem 0 .8rem; }
.kk-doc ul.dot > li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem;
  color:var(--muted-color); }
.kk-doc ul.dot > li::before{ content:""; position:absolute; left:0; top:1.1rem;
  width:.5rem; height:1px; background:var(--darkgray-color); }

/* ══════════════════════════════════════════════════════════════════════════
   표
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc table.tbl{ width:100%; border-collapse:collapse; margin:1.2rem 0 1.8rem;
  border-top:1px solid var(--primary-color); border-bottom:1px solid var(--line-color);
  font-size:1.4rem; font-variant-numeric:tabular-nums; }
.kk-doc table.tbl th, .kk-doc table.tbl td{
  padding:var(--kk-td) 1.2rem; border-bottom:1px solid var(--line-color);
  border-left:1px solid var(--line-color); text-align:left; vertical-align:top;
  line-height:var(--kk-td-lh); }
.kk-doc table.tbl td{ font-weight:var(--kk-w); }
.kk-doc table.tbl th:first-child, .kk-doc table.tbl td:first-child{ border-left:0; padding-left:0; }
.kk-doc table.tbl td:last-child{ padding-right:0; }

/* 표 머리줄과 왼쪽 항목 이름 — 둘 다 '제목' 이라 같은 글꼴을 씁니다 */
.kk-doc table.tbl thead th{ text-align:center; font-family:var(--kk-sans);
  font-weight:600; letter-spacing:-.03em; color:var(--body-color);
  background:var(--lightgray-color); border-bottom:1px solid var(--primary-color);
  padding-top:.8rem; padding-bottom:.8rem; }
.kk-doc table.tbl tbody th{ width:16rem; font-family:var(--kk-sans);
  font-weight:500; letter-spacing:-.03em; color:var(--body-color); word-break:keep-all; }
.kk-doc table.tbl tbody tr:last-child th,
.kk-doc table.tbl tbody tr:last-child td{ border-bottom:0; }

/* ══════════════════════════════════════════════════════════════════════════
   꼭 봐야 할 한 줄
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc .callout{ margin:1.4rem 0 1.8rem; padding:1.4rem 1.8rem;
  background:var(--lightgray-color); border-left:2px solid var(--kk-bar);
  color:var(--text-color); }

/* 아주 작은 덧말 */
.kk-doc .fine{ font-size:1.3rem; color:var(--darkgray-color); }

/* ══════════════════════════════════════════════════════════════════════════
   테마가 그리는 명조 요소
   화면 위쪽 페이지 제목 등은 테마가 그립니다. 기본 자간이 -0.025em 이라
   본문의 명조보다 헐거워 보여 같은 자간으로 맞춥니다.
   ※ 테마 원래 모습대로 두시려면 아래 세 줄을 지우십시오.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_title .title h2,
.sub_content .page_title h3 strong,
.sub_content .sub_title_tit{ letter-spacing:var(--kk-serif-ls); }

/* ══════════════════════════════════════════════════════════════════════════
   좁은 화면
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .kk-doc{ --kk-gap:2.6rem; --kk-td:.8rem; }

  /* 표를 세로로 풉니다. 칸 너비를 억지로 유지하면 글자가 한 자씩 끊깁니다 */
  .kk-doc table.tbl thead{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); }
  .kk-doc table.tbl tbody tr{ display:block; padding:1.2rem 0;
    border-bottom:1px solid var(--line-color); }
  .kk-doc table.tbl tbody th, .kk-doc table.tbl tbody td{
    display:block; width:auto; border:0; padding:0; }
  .kk-doc table.tbl tbody th{ margin-bottom:.4rem; }
  .kk-doc table.tbl tbody th br{ display:none; }
  .kk-doc table.tbl tbody td{ padding-left:1.2rem; position:relative; margin-top:.3rem; }
  .kk-doc table.tbl tbody td::before{ content:""; position:absolute; left:0; top:1rem;
    width:.6rem; height:1px; background:var(--darkgray-color); }
}

/* ══════════════════════════════════════════════════════════════════════════
   안내 페이지 (인사말 · 출판 방향 · 출판 안내 · 기획/자비/동인지/집필 · 오시는 길)
   --------------------------------------------------------------------------
   약관·방침과 같은 .kk-doc 안에서 씁니다. 아래는 그 페이지들에만 나오는 모양입니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 첫 문장 — 페이지의 시각적 중심 */
.kk-doc .opening{
  font-family:var(--serif-font);
  font-size:clamp(2.2rem,3.4vw,3.2rem);
  font-weight:400; line-height:1.62;
  letter-spacing:var(--kk-serif-ls);
  color:var(--body-color);
  margin:0 0 clamp(3.2rem,4vw,4.8rem);
}

/* 소제목 */
.kk-doc .sub-h{
  margin:3.6rem 0 1.2rem; padding-bottom:1rem;
  border-bottom:1px solid var(--line-color);
  font-family:var(--kk-sans); font-size:1.7rem; font-weight:600;
  letter-spacing:-.045em; color:var(--body-color);
}
/* ★ 소제목이 «맨 처음» 일 때만 위 여백을 없앱니다.
     전에는 :first-of-type 이었는데, 그것은 «앞에 무엇이 있든» 첫 h2 에 걸립니다.
     그래서 첫 문단 뒤에 오는 소제목까지 위 여백이 0 이 되어 윗글에 붙어 있었습니다. */
.kk-doc .sub-h:first-child{ margin-top:0; }

/* 소제목 아래 한 번 더 나눌 때 */
.kk-doc .mini-h{ margin:2rem 0 .6rem; font-weight:500; color:var(--body-color); }

/* 서명 */
.kk-doc .sign{ margin-top:clamp(3.2rem,4vw,4.8rem); font-weight:500;
  color:var(--body-color); }

/* --- 출판 방향의 다섯 항목 -------------------------------------------------
   ※ 요구사항: 카드나 아이콘 박스로 나누지 말고
     「가로 구분선 하나로만 나눈 세로 흐름」으로 둘 것. 선을 지우지 마십시오. */
.kk-doc .direction-lead{
  font-family:var(--serif-font); font-size:clamp(1.9rem,2.8vw,2.6rem);
  font-weight:400; line-height:1.62; letter-spacing:var(--kk-serif-ls);
  color:var(--body-color); margin:0 0 clamp(2.8rem,3.6vw,4rem);
}
.kk-doc .creed{ border-top:1px solid var(--line-color); }
.kk-doc .creed > div{ padding:clamp(2.4rem,3vw,3.2rem) 0;
  border-bottom:1px solid var(--line-color); }
.kk-doc .creed h2{ font-size:1.8rem; font-weight:600; letter-spacing:-.045em;
  margin:0 0 1rem; color:var(--body-color); }
.kk-doc .creed h2 em{ font-style:normal; color:var(--point-color); margin-right:1rem; }
.kk-doc .creed p{ margin:0; }
.kk-doc .closing{
  font-family:var(--serif-font); font-size:clamp(1.8rem,2.4vw,2.2rem);
  font-weight:400; line-height:1.62; letter-spacing:var(--kk-serif-ls);
  color:var(--body-color); padding:clamp(3.2rem,4vw,4.4rem) 0 0;
}

/* --- 출판 안내의 갈래 카드 ------------------------------------------------- */
.kk-doc .road-label{ margin:3.2rem 0 1rem; font-size:1.3rem; font-weight:500;
  letter-spacing:.04em; color:var(--darkgray-color); }
.kk-doc .road{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.kk-doc .road.one{ grid-template-columns:1fr; }
.kk-doc .road-card{ display:block; padding:2.4rem; border:1px solid var(--line-color);
  background:#fff; transition:border-color .18s ease, transform .18s ease; }
.kk-doc .road-card:hover{ border-color:var(--point-color); transform:translateY(-2px); }
.kk-doc .road-card b{ display:block; font-size:1.7rem; font-weight:600;
  letter-spacing:-.045em; color:var(--body-color); margin-bottom:.8rem; }
.kk-doc .road-card span{ display:block; color:var(--muted-color); }
.kk-doc .road-card em{ display:block; margin-top:1.4rem; font-style:normal;
  font-size:1.3rem; font-weight:500; color:var(--point-color); }

/* --- 목록 ------------------------------------------------------------------ */
.kk-doc .do-list{ margin:.6rem 0 1.2rem; padding:0; list-style:none; }
.kk-doc .do-list > li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem;
  color:var(--muted-color); }
.kk-doc .do-list > li::before{ content:""; position:absolute; left:0; top:1.2rem;
  width:.6rem; height:1px; background:var(--darkgray-color); }
.kk-doc .steps{ counter-reset:st; margin:.6rem 0 1.2rem; padding:0; list-style:none; }
.kk-doc .steps > li{ position:relative; counter-increment:st; padding-left:2.8rem;
  margin-bottom:.8rem; color:var(--muted-color); }
.kk-doc .steps > li::before{ content:counter(st); position:absolute; left:0; top:0;
  width:2rem; text-align:center; font-family:var(--eng-font); font-weight:500;
  color:var(--point-color); }

/* --- 단추 줄 --------------------------------------------------------------- */
.kk-doc .ask-row{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  margin:2.4rem 0 1rem; }

/* ── 단추 ────────────────────────────────────────────────────────────────
   ★ inline-flex 로 «가로·세로 모두» 가운데 놓습니다.

   전에는 inline-block 에 위아래 여백을 같게 주어 «우연히» 가운데로 보였습니다.
   그러면 줄간격 값(--kk-lh)을 바꾸시는 순간 글자가 위나 아래로 쏠립니다.
   테마의 자체 단추(.accent_btn)도 같은 방식을 씁니다.

   ★ 글자가 두 줄이 되어도 가운데에 머뭅니다.
   ★ min-height 4.4rem 은 손가락으로 누르기 좋은 최소 크기입니다. */
.kk-doc .btn,
.kk-doc .btn-txt,
.mtext .btn,
.mtext .btn-txt{
  display:inline-flex;
  align-items:center;        /* 세로 가운데 */
  justify-content:center;    /* 가로 가운데 */
  min-height:4.4rem;
  line-height:1.4;
  text-align:center;
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:-.02em;
  word-break:keep-all;
}

.kk-doc .btn,
.mtext .btn{
  padding:.8rem 2.4rem;
  background:var(--point-color);
  color:#fff;
  transition:background .18s ease;
}
.kk-doc .btn:hover,
.mtext .btn:hover{ background:var(--point-dark); }

/* 글자만 있는 단추 — 밑줄은 글자 아래에 붙어야 하므로 상자 테두리를 쓰지 않습니다 */
.kk-doc .btn-txt,
.mtext .btn-txt{
  padding:.8rem 0;
  color:var(--point-color);
  text-decoration:none;
  text-underline-offset:.4rem;
}
.kk-doc .btn-txt:hover,
.mtext .btn-txt:hover{ text-decoration:underline; text-decoration-thickness:1px; }

/* 키보드로 이동하셨을 때 */
.kk-doc .btn:focus-visible,
.kk-doc .btn-txt:focus-visible,
.mtext .btn:focus-visible,
.mtext .btn-txt:focus-visible{
  outline:2px solid var(--point-color); outline-offset:3px;
}
.kk-doc .ask-etc{ font-size:1.3rem; color:var(--muted-color); }
.kk-doc .ask-etc a{ color:var(--body-color); border-bottom:1px solid var(--line-color); }

/* --- 지도 자리 ------------------------------------------------------------- */
.kk-doc .map-box{ margin:1.6rem 0 2.4rem; border:1px solid var(--line-color); line-height:0; }
.kk-doc .map-box iframe{ width:100%; height:clamp(24rem,38vw,38rem); border:0; display:block; }

/* --- 3열 비교표 ------------------------------------------------------------ */
.kk-doc table.cmp3 tbody th{ width:14rem; }

@media (max-width:768px){
  .kk-doc .road{ grid-template-columns:1fr; }
  .kk-doc .ask-row{ gap:1.2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   표지 — 메인 화면의 사진 자리를 채웁니다
   --------------------------------------------------------------------------
   ★ 표지를 «자르지 않습니다».
     판형이 책마다 다릅니다. 시집은 홀쭉하고 단행본은 넓적합니다.
     높이만 맞추고 가로는 비율대로 두면, 실제 서가처럼 판형 차이가 그대로 드러납니다.
     잘라서 맞추면 그 차이가 사라지고 시집 표지는 위아래가 잘려 나갑니다.

   ★ 책이 없을 때
     깨진 그림 대신 회색 「표지 자리」가 나옵니다.
     책을 올리시면 그 자리가 저절로 채워집니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-cover-lg:32rem;   /* 크게 — 히어로·대표 도서 */
  --kk-cover-md:20rem;   /* 보통 — 나란히 놓기 */
  --kk-cover-sm:13rem;   /* 작게 — 여러 권 */
}

.kk-cover{ display:block; height:var(--kk-cover-md); width:auto;
  background:var(--lightgray-color); }
.kk-cover-lg{ height:var(--kk-cover-lg); }
.kk-cover-sm{ height:var(--kk-cover-sm); }

.kk-cover img{ display:block; height:100%; width:auto;   /* ← 자르지 않습니다 */
  box-shadow:0 1px 0 rgba(32,32,32,.10); transition:transform .18s ease; }
a.kk-cover:hover img{ transform:translateY(-3px); }

/* 책이 없을 때 / 표지를 안 올리셨을 때 */
.kk-cover.is-empty, .kk-cover.is-noimg{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/4; width:auto; padding:1.2rem;
  border:1px solid var(--line-color); background:var(--lightgray-color);
  text-align:center; }
.kk-cover.is-empty em, .kk-cover.is-noimg em{
  font-style:normal; font-size:1.2rem; font-weight:400; line-height:1.6;
  color:var(--darkgray-color); }
.kk-cover.is-noimg em{ color:var(--muted-color); }

/* 여러 권 나란히 — 바닥선을 맞춰 서가처럼 보이게 합니다 */
.kk-shelf{ display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(1.2rem,2vw,2.4rem); flex-wrap:wrap; }
.kk-shelf-item{ display:flex; flex-direction:column; align-items:center; }
.kk-shelf-meta{ margin:1rem 0 0; text-align:center; font-size:1.3rem; line-height:1.6; }
.kk-shelf-meta b{ display:block; font-weight:500; color:var(--body-color); }
.kk-shelf-meta span{ display:block; font-weight:300; color:var(--muted-color); }

@media (max-width:768px){
  :root{ --kk-cover-lg:22rem; --kk-cover-md:15rem; --kk-cover-sm:10rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   메인 — 가로로 긴 배경 자리
   --------------------------------------------------------------------------
   1920 x 970 처럼 가로로 긴 자리에는 책 표지를 넣을 수 없습니다.
   3:4 표지를 그 비율로 자르면 «세로의 38%» 만 남아 띠처럼 보입니다.

   그래서 데모 사진을 걷어내고 먹색 바탕에 글자만 두었습니다.
   ★ 사진을 마련하시면 main_html 안의 background-image 주석을 푸십시오.
     쌓아 놓은 책, 펼친 지면, 활자, 종이의 결 — 직접 찍으신 사진이 가장 좋습니다.
   ══════════════════════════════════════════════════════════════════════════ */
#main_intro .section,
#main_intro .bg,
#main_philosophy{
  background-color:var(--primary-color);
}
#main_intro .bg::after,
#main_philosophy::after{ display:none; }   /* 사진 위에 씌우던 어두운 막 — 필요 없어짐 */

/* ══════════════════════════════════════════════════════════════════════════
   게시판 스킨 — 도서 · 작가의 방 · 문의 접수
   --------------------------------------------------------------------------
   skin/board/kk_book · kk_works · kk_inquiry 가 쓰는 모양입니다.

   ★ 색과 글꼴은 테마 값(var)을 그대로 씁니다.
     테마의 포인트색을 바꾸시면 게시판도 함께 바뀝니다.

   ★ 표지는 자르지 않습니다.
     판형이 책마다 달라서, 높이만 맞추고 가로는 비율대로 둡니다.
   ══════════════════════════════════════════════════════════════════════════ */
small, .fs-small, .book-sub, .news-date, .hero-meta, .spec, .biz, .copy, .count, .detail-crumb, .buy-note, .filter, .lead { font-weight:400; }
.bk-s, .news-d, .biz, .copy, .count, .detail-crumb, .buy-note, .eyebrow, .tag, .field small, .cover-a, .d-series, .flabel { letter-spacing:calc(-.02em + .012em); }
.eyebrow, .d-series, .ms .label { letter-spacing:.14em; }
.cover { position:relative; height:var(--bk-cover-h); aspect-ratio:3/4; background:var(--lightgray-color); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:13% 11%; text-align:center; overflow:hidden; border:1px solid var(--line-color); transition:transform .25s ease; }
.cover-img ~ .cover, .cover-img + .cover { display:none; }
.cover-t { font-family:var(--kk-sans); font-weight:600; font-size:clamp(.75rem,1.05vw,.9375rem); line-height:1.45; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; }
.cover-a { font-size:12px; font-weight:400; color:var(--muted-color); margin-top:auto; padding-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
a:hover .cover { transform:translateY(-3px); }
.shelf { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:0; border-top:1px solid var(--line-color); }
/* 칸 안에서 표지를 아래에 붙이고 가운데로 모읍니다.
   높이는 같고 가로만 다르므로, 이렇게 해야 줄이 반듯해 보입니다. */
.shelf .bk { padding:var(--bk-pad); border-bottom:1px solid var(--line-color); min-width:0; }

/* 표지를 감싸는 칸 — 높이를 붙들어 바닥선을 맞춥니다 */
.bk-cover { display:flex; align-items:flex-end; justify-content:center;
  height:var(--bk-cover-h); }
.bk-cover .cover { display:flex; flex-direction:column; justify-content:center;
  height:100%; aspect-ratio:3/4; }
.bk-cover .cover-t, .bk-cover .cover-a { display:block; }
.shelf .bk:hover { background:var(--lightgray-color); }
.shelf.plain { border-top:0; }
.shelf.plain .bk { border-bottom:0; }
.shelf.plain .bk:hover { background:transparent; }
.bk-info { margin-top:13px; min-width:0; }
.bk-t { font-family:var(--kk-sans); font-weight:600; font-size:var(--bk-fs); line-height:1.45; }
.bk-s { font-size:1.3rem; font-weight:400; color:var(--muted-color); margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; }
.pg-hd { padding:clamp(28px,4vw,44px) 0 0; }
.pg-hd h1 { font-size:clamp(2.4rem,4vw,3.6rem); font-weight:200; font-family:var(--kk-sans); }
.filter { margin-top:22px; border-top:2px solid var(--rule); border-bottom:1px solid var(--line-color); }
.frow { display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:6px 0; }
.frow + .frow { border-top:1px solid var(--line-color); }
.ftab { padding:9px 13px; font-size:.9375rem; font-weight:400; min-height:42px; display:inline-flex; align-items:center; color:var(--muted-color); white-space:nowrap; }
.ftab[aria-current="true"] { color:var(--body-color); font-weight:600; box-shadow:inset 0 -2px 0 var(--body-color); }
.frow.minor { font-size:12px; }
.frow.minor .flabel { color:var(--muted-color); letter-spacing:.06em; padding-right:6px; font-size:12px; }
.frow.minor .ftab { font-size:12px; padding:7px 10px; min-height:36px; }
.fsort { margin-left:auto; display:flex; gap:2px; }
.detail-crumb { font-size:12px; color:var(--muted-color); padding-top:22px; }
.detail { display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr); gap:clamp(26px,3.5vw,52px); padding:26px 0 clamp(2.6rem,3vw,4rem); }
.d-series { display:block; font-size:12px; font-weight:500; letter-spacing:.12em; color:var(--point-color); padding:0; margin-bottom:8px; }
.d-title { font-family:var(--kk-sans); font-weight:200; font-size:clamp(1.5rem,3vw,2.125rem); line-height:1.35; }
.spec { width:100%; border-collapse:collapse; margin-top:22px; font-size:1.4rem; }
.spec th, .spec td { text-align:left; padding:9px 0; border-bottom:1px solid var(--line-color); vertical-align:top; }
.spec th { width:1%; white-space:nowrap; padding-right:20px; font-weight:400; color:var(--muted-color); }
.spec td { font-weight:400; }
.buy { margin-top:26px; padding-top:20px; border-top:2px solid var(--rule); }
.buy h2 { font-size:1rem; font-weight:600; letter-spacing:calc(-.03em + 0em); }
.buy-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.buy-btn { flex:1 1 132px; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:12px 14px; font-size:1.4rem; font-weight:500; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); transition:background .18s,color .18s; }
.buy-btn:hover { background:var(--point-dark); border-color:var(--point-dark); color:#fff; }
.buy-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto; }
.buy-note { font-size:12px; color:var(--muted-color); margin-top:12px; line-height:1.6; }
.d-body { padding-bottom:clamp(2.6rem,3vw,4rem); }
.d-body section { padding:22px 0 26px; }
.d-body h2 { font-size:1.125rem; font-weight:600; letter-spacing:calc(-.03em + 0em); margin-bottom:14px; }
.d-body p { margin:0 0 .9em; max-width:64rem; }
@media (max-width:1024px){
  .shelf { grid-template-columns:repeat(var(--cols-md),1fr); }
  .detail { grid-template-columns:1fr; }
  .d-cover { max-width:210px; }
}
@media (max-width:768px){
  .buy-btn { flex:1 1 100%; }
}
@media (max-width:480px){
  .shelf { grid-template-columns:repeat(var(--cols-sm),1fr); }
  .shelf .bk { padding:16px 7px 18px; }
  .bk-t { font-size:.875rem; }
}
/* ★ 표지를 자르지 않습니다. 높이만 맞추고 가로는 비율대로 둡니다.
   판형이 다른 책들이 «바닥선에 나란히» 서서 실제 서가처럼 보입니다. */
.cover-img { height:var(--bk-cover-h); width:auto; max-width:100%; object-fit:contain;
  background:transparent; border:0; box-shadow:0 1px 0 rgba(32,32,32,.12);
  transition:transform .25s ease; }
a:hover .cover-img { transform:translateY(-3px); }
.d-cover .cover-img { }
.d-cover a:hover .cover-img { transform:none; }
a.ftab { display:inline-flex; align-items:center; }
.ftab[aria-current="true"] { color:var(--body-color); font-weight:600; box-shadow:inset 0 -2px 0 var(--body-color); }
.frow.minor .ftab[aria-current="true"] { color:var(--body-color); box-shadow:inset 0 -1px 0 var(--body-color); }
.detail-crumb a:hover { color:var(--point-color); }
.admin-bar { display:flex; gap:10px; flex-wrap:wrap; padding:32px 0; }
.pg-title { font-family:var(--kk-sans); font-size:clamp(2.4rem,4vw,3.6rem); font-weight:200; padding:clamp(32px,4vw,48px) 0 24px; }
/* ★ 아래 여백을 44px 에서 16px 로 줄입니다.
     단추 줄에도 위 여백이 있어 «두 번 겹쳐» 88px 이 되고 있었습니다. */
/* ★ 선을 긋지 않습니다. 제목과 여백만으로 나뉩니다. */
.wform { border:0; margin:0 0 1.6rem; padding:0; }
/* ★ legend(「진행 정보」)는 «화면에서 숨겨진» 상태입니다.
     테마의 default.css 가 position:absolute · font-size:0 으로 감춰 두었습니다.
     화면 읽어 주는 프로그램에만 들리게 하는 방식입니다.

     그래서 legend 에 여백을 줘도 아무 일이 없었습니다.
     첫 항목이 선에 붙어 보인 까닭입니다.

     다시 보이게 하지 않습니다.
     화면에 이미 「새 진행 등록」 제목이 있어 같은 말이 두 번이 됩니다.
     대신 폼 자체에 위 여백을 줍니다. */
.wform { padding-top:2.8rem; }
.wnote { font-size:1.4rem; color:var(--muted-color); background:var(--bg-tint); padding:16px 18px; line-height:1.65; margin:0 0 24px; }
.wnote code { font-family:var(--kk-sans); font-size:1.3rem; background:var(--white-color); border:1px solid var(--line-color); padding:2px 7px; }
/* ★ 항목 사이에 줄을 긋지 않습니다.
     칸마다 선을 그으면 화면이 «표» 처럼 보여 시끄럽습니다.
     이름(굵은 글씨)과 여백만으로 충분히 나뉩니다. */
.wrow { padding:0 0 2.8rem; }
.wrow label { display:block; font-size:1.4rem; font-weight:600; margin-bottom:8px; }
.wrow .frm_input, .wrow .frm_textarea, .wrow select { width:100%; max-width:640px; }
.wrow .frm_file { font-size:1.4rem; }
.whelp { font-size:1.3rem; color:var(--muted-color); line-height:1.6; margin:8px 0 0; }
.req { font-size:11px; color:var(--point-color); border:1px solid currentColor; padding:1px 6px; margin-left:6px; vertical-align:2px; font-weight:400; }
.works-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--body-color); }
.works-list li { border-bottom:1px solid var(--line-color); }
.works-list a { display:grid; grid-template-columns:70px 1fr auto auto; gap:18px; align-items:baseline; padding:20px 4px; }
.works-list a:hover { background:rgba(244,242,236,.6); }
.works-cat { font-size:1.3rem; color:var(--point-color); letter-spacing:.04em; }
.works-title { font-family:var(--kk-sans); font-weight:600; font-size:1rem; line-height:1.5; }
.works-list a:hover .works-title { text-decoration:underline; text-underline-offset:5px; }
.works-cmt { font-style:normal; font-family:var(--kk-sans); font-size:1.3rem; color:var(--muted-color); margin-left:8px; }
.works-by { font-size:1.4rem; color:var(--muted-color); }
.works-date { font-size:1.3rem; color:var(--muted-color); }
.approve-note { font-size:1.4rem; color:var(--muted-color); line-height:1.65; margin:0; }
.approve-note a { color:var(--point-color); border-bottom:1px solid currentColor; }
.works-search { display:flex; gap:8px; justify-content:center; padding:0 0 clamp(2.6rem,3vw,4rem); }
.works-search input[type=text] { min-height:46px; padding:10px 14px; font:inherit; background:var(--white-color); border:1px solid var(--line-color); width:min(280px,60vw); }
.works-search button { min-height:46px; padding:10px 22px; border:1px solid var(--body-color); font-size:1.4rem; }
.works-search button:hover { background:var(--body-color); color:var(--white-color); }
@media (max-width:768px){
  .works-list a { grid-template-columns:1fr auto; gap:4px 12px; padding:18px 4px; }
  .works-cat { grid-column:1/-1; }
  .works-date { text-align:right; }
}
.works-view { max-width:112rem; }
.works-head { padding:clamp(48px,6vw,80px) 0 0; text-align:center; }
.works-cat-line { font-size:1.3rem; letter-spacing:.16em; color:var(--point-color); margin:0 0 18px; }
.works-view-title { font-family:var(--kk-sans); font-weight:200; font-size:clamp(1.5rem,3vw,2.125rem); line-height:1.4; letter-spacing:calc(-.02em + 0em); }
.works-meta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:1.3rem; color:var(--muted-color); margin:20px 0 0; padding-bottom:20px; }
.works-author { color:var(--body-color); }
.works-body { max-width:64rem; margin:0 auto; padding:clamp(48px,6vw,72px) clamp(1.8rem,2vw,2.4rem); font-weight:300; font-size:1.0625rem; line-height:1.8; word-break:keep-all; }
.works-body p { margin:0 0 1.6em; }
.works-body img { margin:2em auto; }
.works-files { max-width:64rem; margin:0 auto; padding:24px clamp(1.8rem,2vw,2.4rem); border-top:1px solid var(--line-color); font-size:1.4rem; }
.works-files h2 { font-size:1.4rem; color:var(--muted-color); margin-bottom:10px; }
.works-files ul { list-style:none; margin:0; padding:0; }
.works-files a { color:var(--point-color); border-bottom:1px solid var(--line-color); display:inline-block; padding:6px 0; }
.works-files em { font-style:normal; color:var(--muted-color); font-size:1.3rem; }
.works-copyright { max-width:64rem; margin:0 auto; padding:28px clamp(1.8rem,2vw,2.4rem) 0; font-size:1.3rem; color:var(--muted-color); text-align:center; }
.works-nav { display:flex; justify-content:space-between; gap:16px; max-width:64rem; margin:0 auto; padding:40px clamp(1.8rem,2vw,2.4rem) 0; font-size:1.4rem; }
.works-nav a { color:var(--muted-color); padding:10px 0; }
.works-nav a:hover { color:var(--point-color); }
.works-nav .next { margin-left:auto; }
.works-editor { font-family:var(--kk-sans); font-size:1.0625rem; line-height:1.7; }
.room-nav { display:flex; gap:18px; flex-wrap:wrap; margin-top:24px; font-size:1.4rem; }
.room-nav a { color:var(--muted-color); padding:8px 0; border-bottom:1px solid transparent; }
.room-nav a:hover { color:var(--body-color); }
.room-nav a[aria-current="page"] { color:var(--body-color); border-bottom-color:var(--point-color); }
.closed-note { margin-top:20px; padding:14px 18px; background:var(--bg-tint); font-size:1.3rem; color:var(--muted-color); }
.agree-box { background:var(--lightgray-color); padding:16px 18px 6px; margin:0 0 14px; }
.agree-box .cmp { margin:0 0 .6em; border-top:0; }
.agree-box .cmp th, .agree-box .cmp td { border-color:var(--line-color); }
.agree-box .cmp tbody tr:last-child th, .agree-box .cmp tbody tr:last-child td { border-bottom:0; }
.agree-box .fine { margin:0; }
.agree-box .fine a { color:var(--point-color); border-bottom:1px solid var(--line-color); }
.agree-check { display:flex; align-items:flex-start; gap:9px; padding:12px 0; font-size:1.4rem; font-weight:400; cursor:pointer; min-height:44px; }
.agree-check input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--point-color); }
.agree-check b { font-weight:600; }
.room-back { font-size:1.3rem; font-weight:400; color:var(--muted-color); margin:0 0 6px; }
.room-back a:hover { color:var(--point-color); }
.room-sum { font-size:1.4rem; font-weight:400; color:var(--muted-color); margin:8px 0 0; }
a.works-by, a.works-author { border-bottom:1px solid transparent; }
a.works-by:hover, a.works-author:hover { color:var(--point-color); border-bottom-color:var(--point-color); }

/* ══════════════════════════════════════════════════════════════════════════
   화면 옆에 붙는 바로가기 (전화 · 맨 위로)
   --------------------------------------------------------------------------
   _access.tail.side.php 가 그립니다.
   테마 원본 CSS 에서 네이버·카카오 관련 규칙만 빼고 그대로 가져왔습니다.
   (SNS 를 쓰지 않기로 하여 그 두 단추는 마크업에도 없습니다)
   ══════════════════════════════════════════════════════════════════════════ */
#side_lnk { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 100; transform: translate(0, 200%); opacity: 0; visibility: hidden; transition: 0.8s; }
#side_lnk.on { bottom: 1.6rem; transform: translate(0, 0); opacity: 1; visibility: visible; }
#side_lnk .lnk_wrap { display: flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-color); border-radius: 0; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1); padding: 0.8rem; margin-bottom: 0; }
#side_lnk .lnk_wrap > a { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.6rem; border-radius: 0; color: var(--body-color); white-space: nowrap; transition: 0.3s; }
#side_lnk .lnk_wrap > a:hover { background: var(--lightgray-color); color: var(--point-color); }
#side_lnk .lnk_wrap .icon { width: 1.8rem; height: 1.8rem; stroke: var(--body-color); stroke-width: 1.2; }
#side_lnk .lnk_wrap > a span { display: block; font-size: 1.3rem; }
#side_lnk .lnk_wrap > a.d_btn { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; margin-left: 0.4rem; background: var(--primary-color); border-radius: 0; transition: background 0.3s; }
#side_lnk .lnk_wrap > a.d_btn:hover { background: var(--point-color); }
#side_lnk .lnk_wrap > a.d_btn .icon { stroke: var(--white-color); stroke-width: 1.5; }
#side_lnk .lnk_wrap > a.d_tel { display: none; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; background: var(--point-color); border-radius: 0; }
#side_lnk .lnk_wrap > a.d_tel .icon { stroke: var(--white-color); stroke-width: 1.5; }
#side_lnk .lnk_wrap > a:not(.d_tel):not(.d_btn) { display: none; }
#side_lnk .lnk_wrap > a.d_tel { display: flex; }
#side_lnk { left: auto; right: 4rem; bottom: 4rem; transform: translate(0, 200%); }
#side_lnk.on { bottom: 4rem; transform: translate(0, 0); }
#side_lnk .lnk_wrap { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
#side_lnk .lnk_wrap > a:not(.d_btn) { display: none; }
#side_lnk .lnk_wrap > a.d_btn { margin-left: 0; width: 4.8rem; height: 4.8rem; }
#side_lnk .lnk_wrap > a.d_btn .icon { width: 2rem; height: 2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   맨 위로 — 조용하게
   --------------------------------------------------------------------------
   테마 원본은 먹색으로 채운 동그라미였습니다. 화면에 떠 있는 것이라 무겁습니다.
   흰 바탕에 가는 테두리로 바꾸고, 마우스를 올렸을 때만 포인트색이 됩니다.

   ★ 크기를 바꾸시려면 --kk-top-size 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --kk-top-size:4.4rem; }   /* 손가락으로 누르기 좋은 최소 크기입니다 */

#side_lnk{ right:clamp(1.6rem, 2vw, 3.2rem); bottom:clamp(1.6rem, 2vw, 3.2rem); }

#side_lnk .lnk_wrap{ background:none; border:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap:0; }

#side_lnk .lnk_wrap > a.d_btn{
  width:var(--kk-top-size); height:var(--kk-top-size);
  background:rgba(255,255,255,.92);
  border:1px solid var(--line-color);
  border-radius:50%;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
#side_lnk .lnk_wrap > a.d_btn .icon{
  width:1.8rem; height:1.8rem;
  stroke:var(--body-color); stroke-width:1.4;
  transition:stroke .18s ease;
}
#side_lnk .lnk_wrap > a.d_btn:hover{
  background:#fff; border-color:var(--point-color); transform:translateY(-2px);
}
#side_lnk .lnk_wrap > a.d_btn:hover .icon{ stroke:var(--point-color); }

/* 키보드로 이동하셨을 때도 또렷하게 */
#side_lnk .lnk_wrap > a.d_btn:focus-visible{
  outline:2px solid var(--point-color); outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  #side_lnk, #side_lnk .lnk_wrap > a.d_btn{ transition:none; }
  #side_lnk .lnk_wrap > a.d_btn:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   지금 보고 있는 메뉴
   --------------------------------------------------------------------------
   _access.navigation.php 가 aria-current="page" 를 붙입니다.
   방문자가 「내가 지금 어디에 있는지」 알 수 있어야 합니다.

   ★ 색으로만 알리지 않습니다.
     큰 메뉴는 아래 선, 작은 메뉴는 굵기로도 구분합니다.
     색을 못 가리는 분도 알 수 있어야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 큰 메뉴 — 아래에 선이 그어집니다.
   ★ 테마는 이 선을 «width» 로 늘립니다 (transform 이 아닙니다).
     같은 값을 써야 마우스를 올렸을 때와 어긋나지 않습니다. */
#header .gnb > ul > li > a[aria-current="page"]::after{
  width:calc(100% - 4.8rem);
}
#header .gnb > ul > li > a[aria-current="page"]{ font-weight:500; }

/* 작은 메뉴 — 굵기와 색 */
#header .gnb > ul > li ul li a[aria-current="page"]{
  font-weight:500; color:var(--point-color);
}

/* 좁은 화면(펼친 메뉴) 에서도 같게 */
@media (max-width:1024px){
  #header .gnb a[aria-current="page"]{ font-weight:500; color:var(--point-color); }
}



/* ══════════════════════════════════════════════════════════════════════════
   「자세한 안내」 줄 — 여러 갈래를 나란히 놓을 때
   --------------------------------------------------------------------------
   ★ 넷을 «같은 모양» 으로 둡니다.
     하나만 채워진 단추로 두면 「이걸 권합니다」로 읽힙니다.
     끌림은 어느 방식도 권하지 않는다고 글에 써 두었으니 화면도 그래야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc .ask-more{ gap:0 1.6rem; padding-top:1.2rem; border-top:1px solid var(--line-color); }
.kk-doc .ask-more .ask-etc{ font-size:1.3rem; color:var(--darkgray-color); }
.kk-doc .ask-more .btn-txt{ min-height:3.6rem; }

@media (max-width:600px){
  .kk-doc .ask-more{ gap:0 1.2rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   제작 진행 — 저자가 자기 책이 어디까지 왔는지 보는 화면
   --------------------------------------------------------------------------
   ★ 색으로만 알리지 않습니다.
     진행 막대 옆에 「5 / 9 · 편집·교정」 이라는 «글자» 를 함께 둡니다.
     단계 목록에도 「마침」 「진행 중」 이라는 글자를 붙입니다.
     색을 못 가리는 분도 알 수 있어야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 ─────────────────────────────────────────────────────────────── */
.prg-list{ list-style:none; margin:2.4rem 0 0; padding:0;
  border-top:1px solid var(--body-color); }
.prg-item{ border-bottom:1px solid var(--line-color); }
.prg-link{ display:block; padding:2rem 0; transition:background .18s ease; }
.prg-link:hover{ background:var(--lightgray-color); }

.prg-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.prg-title{ font-size:1.7rem; font-weight:600; letter-spacing:-.04em;
  color:var(--body-color); }
.prg-head .tag{ font-size:1.2rem; font-weight:400; color:var(--muted-color);
  border:1px solid var(--line-color); padding:.2rem .8rem; }

/* 진행 막대 */
.prg-bar{ position:relative; height:4px; margin:1.4rem 0 .8rem;
  background:var(--line-color); overflow:hidden; }
.prg-fill{ display:block; height:100%; background:var(--point-color);
  transition:width .4s ease; }

.prg-meta{ display:flex; gap:1.6rem; flex-wrap:wrap;
  font-size:1.3rem; color:var(--muted-color); }
.prg-step{ font-weight:500; color:var(--body-color); }

/* 저자가 하셔야 할 일 — 눈에 띄게 */
.prg-todo{ margin:1.2rem 0 0; padding:1rem 1.4rem;
  background:var(--lightgray-color); border-left:2px solid var(--point-color);
  font-size:1.3rem; color:var(--text-color); }
.prg-todo b{ color:var(--point-color); margin-right:.6rem; }

/* ── 상세: 아홉 단계 ──────────────────────────────────────────────────── */
.prg-spec tbody th{ width:12rem; }

.prg-steps{ list-style:none; margin:1.6rem 0 0; padding:0; }
.prg-step-item{ position:relative; display:flex; gap:1.6rem;
  padding:1.6rem 0; border-bottom:1px solid var(--line-color); }

.prg-num{ flex:0 0 auto; width:3.2rem; height:3.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--eng-font); font-size:1.3rem; font-weight:500;
  border:1px solid var(--line-color); color:var(--darkgray-color);
  background:#fff; }

.prg-body{ min-width:0; }
.prg-body b{ display:block; font-size:1.5rem; font-weight:500;
  color:var(--body-color); margin-bottom:.3rem; }
.prg-body span{ display:block; font-size:1.3rem; color:var(--muted-color);
  line-height:1.6; }

/* 지난 단계 */
.prg-step-item.is-done .prg-num{ background:var(--lightgray-color);
  border-color:var(--line-color); color:var(--muted-color); }
.prg-step-item.is-done .prg-body b{ color:var(--muted-color); }

/* 지금 단계 */
.prg-step-item.is-now{ background:var(--lightgray-color); }
.prg-step-item.is-now .prg-num{ background:var(--point-color);
  border-color:var(--point-color); color:#fff; }
.prg-step-item.is-now .prg-body b{ color:var(--body-color); font-weight:600; }

/* 「마침」 「진행 중」 글자 — 색만으로 알리지 않기 위한 것입니다 */
.prg-state{ margin-left:.8rem; font-size:1.2rem; font-weight:400;
  color:var(--point-color); }
.prg-step-item.is-done .prg-state{ color:var(--darkgray-color); }

/* 아직 오지 않은 단계 */
.prg-step-item.is-wait .prg-body b,
.prg-step-item.is-wait .prg-body span{ color:var(--darkgray-color); }

/* 그동안의 기록 */
/* ★ 기록은 「표지 시안 3종 전달」 같은 «짧은 한 줄» 이 여럿입니다.
     본문 줄간격(1.75)은 긴 글에 맞춘 값이라 여기서는 헐겁습니다.
     줄간격을 1.5 로 줄이고 문단 사이도 좁힙니다. */
.prg-log{ margin-top:1.2rem; font-size:1.4rem; line-height:1.5;
  color:var(--muted-color); }
.prg-log p{ margin:0 0 .4rem; }
.prg-log p:last-child{ margin-bottom:0; }

@media (max-width:600px){
  .prg-step-item{ gap:1.2rem; }
  .prg-num{ width:2.8rem; height:2.8rem; font-size:1.2rem; }
  .prg-spec tbody th{ width:auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   구분 표시 — 세로바
   --------------------------------------------------------------------------
   ★ 가운뎃점(·) 과 세로바(|) 는 하는 일이 다릅니다.
       가운뎃점  대등한 «낱말» 을 잇습니다        편집·교정 · 언론보도·서평
       세로바    다른 «종류» 를 가릅니다          5 / 9 | 편집·교정
     한 줄에 둘이 섞이면 어느 쪽이 무엇인지 알 수 없습니다.

   ★ <i> 태그라 그냥 두면 «기울어져» 나옵니다. 그것부터 풉니다.
   ★ 본문보다 옅게 두어 글자를 방해하지 않게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sep{
  font-style:normal;              /* <i> 의 기울임을 풉니다 */
  /* ★ --line-color(대비 1.3:1)는 «선» 색입니다. 글자에 쓰면 안 보입니다.
       세로바도 «글자» 이므로 읽히는 색을 씁니다. */
  color:var(--darkgray-color);
  margin:0 .25em;
  font-weight:300;
  user-select:none;               /* 글을 복사하실 때 딸려가지 않게 */
}


/* ══════════════════════════════════════════════════════════════════════════
   게시판 스킨의 감싸개
   --------------------------------------------------------------------------
   ★ .ms > .read.mtext 가 게시판 네 개(도서·작가의 방·문의·제작 진행)의
     공통 감싸개입니다. 안내 페이지의 .kk-doc 과 같은 자리를 맡습니다.

   이것이 없으면 글이 «화면 끝까지» 퍼져 한 줄이 너무 길어집니다.
   한 줄이 45자를 넘으면 눈이 다음 줄을 못 찾습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.ms{ padding:clamp(2.8rem,3.6vw,4.8rem) 0 clamp(2.6rem,3vw,4rem); }
.read{ max-width:64rem; margin:0 auto; padding:0 clamp(1.8rem,2vw,2.4rem); }
.mtext{ font-size:var(--kk-fs); line-height:var(--kk-lh); font-weight:var(--kk-w);
  letter-spacing:-.02em; color:var(--text-color); }
.mtext p{ margin:0 0 1.6em; }
.mtext .sub-h:first-child{ margin-top:0; }

/* 목록·상세에서 쓰는 넓은 폭 — 표지가 여럿 늘어서야 하는 화면 */
.ms.wide .read{ max-width:112rem; }

/* 첫 문단 — 안내 한 줄 */
.lead-p{ font-size:var(--kk-fs); color:var(--body-color); margin:0 0 2em; }
.lead-p .fine{ display:block; margin-top:.4rem; }

/* 아무것도 없을 때 */
.empty{ padding:5.6rem 0; text-align:center; color:var(--muted-color);
  border-top:1px solid var(--line-color); }

/* 몇 건인지 */
.total{ font-size:1.3rem; color:var(--muted-color); }

/* 제작 진행의 예정 시기 */
.prg-due{ color:var(--muted-color); }


/* ── 게시판에서 쓰는 나머지 자잘한 것들 ─────────────────────────────────── */

/* 도서·작가의 방의 표시 딱지 */
.tag-new{ color:var(--point-color); border-color:var(--point-color); }
.tag-imp{ color:var(--body-color); border-color:var(--body-color); font-weight:500; }

/* 넓은 감싸개 (목록 화면) */
.wrap{ max-width:112rem; margin:0 auto; padding:0 clamp(1.8rem,2vw,2.4rem); }

/* 글쓰기 폼의 파일 칸 */
.wrow-file{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.wrow-file .frm_file{ flex:1 1 24rem; min-width:0; }

/* 작가의 방 */
.works{ margin-top:2.4rem; }
.works-hit{ font-size:1.2rem; color:var(--darkgray-color); }

/* 앞뒤 글 이동 */
.prev, .next{ color:var(--muted-color); }
.prev:hover, .next:hover{ color:var(--point-color); }

/* 댓글 수 */
.cnt_cmt{ font-size:1.2rem; color:var(--point-color); margin-left:.4rem; }

/* 두 칸 표 */
.two th{ width:32%; }

@media (max-width:600px){
  .two th{ width:auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   제작 진행 — 월별 띠 (누구나 보는 목록)
   --------------------------------------------------------------------------
   달을 왼쪽에 두고, 그 달에 나올 책을 오른쪽에 나열합니다.

   ★ 달력을 쓰지 않는 이유
     한 권에 날짜가 둘뿐이라 달력에 찍으면 칸의 95%가 빕니다.
     띠는 «책이 있는 달만» 나오므로 빈 칸이 없습니다.

   ★ 좁은 화면에서는 달이 위로 올라가고 책이 아래로 쌓입니다.
   ══════════════════════════════════════════════════════════════════════════ */
.band{ border-top:1px solid var(--body-color); margin-top:2.4rem; }

.band-row{ display:flex; gap:2.4rem;
  padding:2rem 0; border-bottom:1px solid var(--line-color); }

/* 달 — 왼쪽에 붙박이로 */
.band-when{ flex:0 0 11rem; padding-top:.2rem;
  font-size:1.4rem; font-weight:500; color:var(--body-color); }

/* 그 달에 나올 책들 */
.band-books{ flex:1; min-width:0;
  display:flex; flex-direction:column; gap:1.6rem; }

.band-item{ display:block; }
.band-item b{ display:block; margin-bottom:.6rem;
  font-size:1.6rem; font-weight:500; letter-spacing:-.03em;
  color:var(--body-color); }
.band-item:hover b{ color:var(--point-color); }

/* 진행 막대 */
.band-bar{ display:block; height:3px; margin-bottom:.5rem;
  background:var(--line-color); overflow:hidden; }
.band-bar i{ display:block; height:100%; background:var(--point-color);
  transition:width .4s ease; }

/* 「5/9 | 편집·교정」 — 색으로만 알리지 않기 위한 글자 */
.band-item em{ font-style:normal; font-size:1.3rem; color:var(--muted-color); }

@media (max-width:640px){
  .band-row{ flex-direction:column; gap:1rem; }
  .band-when{ flex:none; }
}
@media (prefers-reduced-motion:reduce){
  .band-bar i{ transition:none; }
}


/* ── 제작 진행 등록 화면 ─────────────────────────────────────────────────
   ★ 달력 칸(type="date")은 브라우저마다 폭이 제각각입니다.
     그냥 두면 다른 칸과 어긋나 보입니다. */
.wform input[type="date"]{
  width:auto; min-width:18rem; max-width:100%;
  font-family:var(--kk-sans); font-size:1.5rem;
}
/* 달력 아이콘을 누르기 좋게 */
.wform input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; padding:.4rem;
}
.wform input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* 목록에서 고르는 칸 — 고를 수 있다는 것이 보이게 */
.wform input[list]{ background-image:none; }
.wform input[list]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }


/* ── 맨 아래 단추 줄 ─────────────────────────────────────────────────────
   ★ .admin-bar 는 세 곳에서 쓰입니다.
       목록  「새 진행 등록」 + 설명 글   → 왼쪽 그대로
       상세  「고치기·지우기」 + 저자 아이디 → 왼쪽 그대로
       등록  「저장·목록으로」            → 가운데  ← is-center
     설명 글이 붙은 줄까지 가운데로 모으면 글이 붕 떠 보입니다. */
.admin-bar.is-center{
  justify-content:center;
  align-items:center;
  gap:1.6rem;
  /* ★ 선을 긋지 않습니다.
       마지막 입력칸의 아래선과 겹쳐 두 줄로 보였고,
       한 줄만 남겨도 단추가 상자에 갇힌 듯 답답했습니다.
       선 대신 «여백» 으로 나눕니다. 화면이 조용해집니다. */
  padding-top:3.2rem;
}
/* 저장 단추가 조금 더 크게 — 누르실 것이 무엇인지 분명하게 */
.admin-bar.is-center .btn{ min-width:14rem; }

@media (max-width:480px){
  .admin-bar.is-center{ flex-direction:column; gap:.8rem; }
  .admin-bar.is-center .btn{ width:100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   고르는 칸 (select) — 사이트 모양에 맞추기
   --------------------------------------------------------------------------
   ★ 브라우저가 기본으로 그리는 모양은 운영체제마다 다릅니다.
     맥은 둥근 회색 상자, 윈도우는 각진 파란 테두리로 나옵니다.
     사이트와 따로 놉니다.

   ★ appearance:none 으로 그 기본 모양을 지우고 «우리가 직접» 그립니다.
     아래 방향 삼각형도 우리 것으로 바꿉니다. (SVG 를 배경 그림으로)

   ★ 다만 «펼쳐진 목록» 은 브라우저가 그립니다.
     맥과 아이폰에서는 CSS 가 거의 닿지 않습니다. 운영체제가 직접 그리기 때문입니다.
     윈도우·안드로이드에서는 아래 option 규칙이 어느 정도 먹습니다.
     완전히 맞추려면 자바스크립트로 «가짜 목록» 을 만들어야 하는데,
     그러면 키보드와 화면 읽어 주는 프로그램에서 탈이 나기 쉽습니다.
     닫힌 모양을 맞추는 데까지만 하는 편이 낫습니다.

   ★ 색을 바꾸시려면 아래 --kk-sel-arrow 의 stroke 값을 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 아래 방향 삼각형 — 색을 바꾸시려면 stroke='%231c1b19' 부분을 고치십시오 */
  --kk-sel-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231c1b19' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.kk-doc select,
.mtext select,
.wform select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;

  height:4.4rem;                 /* 손가락으로 누르기 좋은 크기 */
  padding:0 4rem 0 1.4rem;       /* 오른쪽은 삼각형 자리 */
  border:1px solid var(--line-color);
  border-radius:0;
  background-color:#fff;
  background-image:var(--kk-sel-arrow);
  background-repeat:no-repeat;
  background-position:right 1.4rem center;
  background-size:12px 8px;

  font-family:var(--kk-sans);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--body-color);
  line-height:1.4;
  cursor:pointer;

  transition:border-color .18s ease, background-color .18s ease;
}

/* 마우스를 올렸을 때 */
.kk-doc select:hover,
.mtext select:hover,
.wform select:hover{ border-color:var(--darkgray-color); }

/* 눌러서 펼쳤을 때 · 키보드로 옮겨 왔을 때 */
.kk-doc select:focus,
.mtext select:focus,
.wform select:focus{
  outline:none;
  border-color:var(--point-color);
  box-shadow:0 0 0 1px var(--point-color);
}
.kk-doc select:focus-visible,
.mtext select:focus-visible,
.wform select:focus-visible{
  outline:2px solid var(--point-color); outline-offset:2px; box-shadow:none;
}

/* 아직 고르지 않았을 때 — 옅게 두어 「비어 있다」가 보이게 */
.wform select:invalid,
.wform select option[value=""]{ color:var(--muted-color); }

/* 펼쳐진 목록 — 윈도우·안드로이드에서만 어느 정도 먹습니다 */
.kk-doc select option,
.mtext select option,
.wform select option{
  background:#fff;
  color:var(--body-color);
  padding:.8rem 1.2rem;
}
.wform select option:checked{ background:var(--lightgray-color); font-weight:500; }

/* 좁은 화면 */
@media (max-width:600px){
  .kk-doc select, .mtext select, .wform select{
    width:100%; max-width:100%; font-size:1.6rem;   /* 아이폰이 확대하지 않는 최소 크기 */
  }
}
@media (prefers-reduced-motion:reduce){
  .kk-doc select, .mtext select, .wform select{ transition:none; }
}


/* ── 선이 두 번 그어지지 않게 ─────────────────────────────────────────────
   .wrow 는 칸마다 아래에 선을 긋고, .admin-bar 는 위에 선을 긋습니다.
   마지막 칸 바로 아래가 단추 줄이라 선이 겹쳐 «두 줄» 로 보였습니다.
   칸 목록이 거기서 끝나므로 마지막 칸의 선을 지웁니다. */
.wform .wrow:last-child{ padding-bottom:0; }

/* 목록에서도 같은 일이 생기지 않게 */
.prg-list .prg-item:last-child{ border-bottom:0; }
.band .band-row:last-child{ border-bottom:0; }

.prg-steps .prg-step-item:last-child{ border-bottom:0; }
.works-list li:last-child{ border-bottom:0; }


/* 단계별 날짜 — 저절로 쌓인 기록 */
.prg-date{ display:block; margin-top:.4rem;
  font-family:var(--eng-font); font-size:1.2rem; letter-spacing:.02em;
  color:var(--darkgray-color); }
.prg-step-item.is-now .prg-date{ color:var(--point-color); font-weight:500; }

/* ══════════════════════════════════════════════════════════════════════════
   게시판 스킨에도 같은 모양을
   --------------------------------------------------------------------------
   안내 페이지는 .kk-doc, 게시판 스킨은 .mtext 를 감싸개로 씁니다.
   아래 것들이 .kk-doc 안에서만 정의되어 있어 게시판에서는 «모양이 없었습니다».
     ask-row   단추 줄        · ask-etc  단추 옆 작은 글
     callout   강조 상자      · do-list  붙임 목록
     tbl       표 (서지정보·진행 정보)

   ★ 원본 규칙은 건드리지 않고 «.mtext 용 복사본» 을 뒤에 붙였습니다.
     원본을 고치려면 규칙 수십 개를 손대야 하고, 하나라도 틀리면
     안내 페이지가 깨집니다.
   ══════════════════════════════════════════════════════════════════════════ */
.mtext table.tbl{width:100%; border-collapse:collapse; margin:1.2rem 0 1.8rem; border-top:1px solid var(--primary-color); border-bottom:1px solid var(--line-color); font-size:1.4rem; font-variant-numeric:tabular-nums;}
.mtext table.tbl th,
.mtext table.tbl td{padding:var(--kk-td) 1.2rem; border-bottom:1px solid var(--line-color); border-left:1px solid var(--line-color); text-align:left; vertical-align:top; line-height:var(--kk-td-lh);}
.mtext table.tbl td{font-weight:var(--kk-w);}
.mtext table.tbl th:first-child,
.mtext table.tbl td:first-child{border-left:0; padding-left:0;}
.mtext table.tbl td:last-child{padding-right:0;}
.mtext table.tbl thead th{text-align:center; font-family:var(--kk-sans); font-weight:600; letter-spacing:-.03em; color:var(--body-color); background:var(--lightgray-color); border-bottom:1px solid var(--primary-color); padding-top:.8rem; padding-bottom:.8rem;}
.mtext table.tbl tbody th{width:16rem; font-family:var(--kk-sans); font-weight:500; letter-spacing:-.03em; color:var(--body-color); word-break:keep-all;}
.mtext table.tbl tbody tr:last-child th,
.mtext table.tbl tbody tr:last-child td{border-bottom:0;}
.mtext .callout{margin:1.4rem 0 1.8rem; padding:1.4rem 1.8rem; background:var(--lightgray-color); border-left:2px solid var(--kk-bar); color:var(--text-color);}
.mtext table.tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.mtext table.tbl tbody tr{display:block; padding:1.2rem 0; border-bottom:1px solid var(--line-color);}
.mtext table.tbl tbody th,
.mtext table.tbl tbody td{display:block; width:auto; border:0; padding:0;}
.mtext table.tbl tbody th{margin-bottom:.4rem;}
.mtext table.tbl tbody th br{display:none;}
.mtext table.tbl tbody td{padding-left:1.2rem; position:relative; margin-top:.3rem;}
.mtext table.tbl tbody td::before{content:""; position:absolute; left:0; top:1rem; width:.6rem; height:1px; background:var(--darkgray-color);}
.mtext .do-list{margin:.6rem 0 1.2rem; padding:0; list-style:none;}
.mtext .do-list > li{position:relative; padding-left:1.4rem; margin-bottom:.6rem; color:var(--muted-color);}
.mtext .do-list > li::before{content:""; position:absolute; left:0; top:1.2rem; width:.6rem; height:1px; background:var(--darkgray-color);}
.mtext .ask-row{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin:2.4rem 0 1rem;}
.mtext .ask-etc{font-size:1.3rem; color:var(--muted-color);}
.mtext .ask-etc a{color:var(--body-color); border-bottom:1px solid var(--line-color);}
.mtext .ask-row{gap:1.2rem;}


/* ── 글자 링크가 나란할 때 ────────────────────────────────────────────────
   .btn-txt 는 좌우 여백이 없습니다. 글자에서 바로 끝납니다.
   그래서 둘이 나란히 놓이면 16px 밖에 안 떨어져 「목록으로문의하기」처럼 읽힙니다.

   ★ 채워진 단추(.btn) 옆에 올 때는 지금 간격이 알맞으므로,
     «글자 링크끼리 이어질 때만» 더 벌립니다. */
.kk-doc .ask-row .btn-txt + .btn-txt,
.mtext .ask-row .btn-txt + .btn-txt{ margin-left:1.6rem; }

/* 사이에 옅은 세로선 — 두 링크가 «따로» 라는 것이 분명해집니다 */
.kk-doc .ask-row .btn-txt + .btn-txt::before,
.mtext .ask-row .btn-txt + .btn-txt::before{
  content:""; position:absolute; left:-1.6rem; top:50%;
  width:1px; height:1.2rem; margin-top:-.6rem;
  background:var(--line-color);
}
.kk-doc .ask-row .btn-txt,
.mtext .ask-row .btn-txt{ position:relative; }

/* ── 게시판의 소제목도 같은 모양으로 ─────────────────────────────────────
   .sub-h(소제목)와 .lead(첫 문단)도 .kk-doc 안에만 있었습니다.
   게시판에서는 「진행 순서」 「그 밖의 기록」 같은 제목이
   «꾸밈 없는 맨 제목» 으로 나오고 있었습니다. */
.mtext .lead{font-size:1.9rem; line-height:1.6; letter-spacing:-.03em; color:var(--body-color); margin-bottom:2.8rem;}
.mtext .sub-h{margin:3.6rem 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line-color); font-family:var(--kk-sans); font-size:1.7rem; font-weight:600; letter-spacing:-.045em; color:var(--body-color);}
.mtext .sub-h:first-child{margin-top:0;}


/* ══════════════════════════════════════════════════════════════════════════
   소제목 바로 아래가 표일 때 — 선을 한 번만
   --------------------------------------------------------------------------
   소제목은 아래에 선을 긋고, 표는 위에 선을 긋습니다.
   둘이 붙어 있으면 «선이 두 줄» 로 보입니다.

   ★ 표가 이미 자기 윗선으로 시작을 알리므로 소제목의 선은 필요 없습니다.

   ★ :has() 는 「바로 다음이 표인 소제목」을 골라내는 요즘 방식입니다.
     대표님이 나중에 표를 더 넣으셔도 «저절로» 걸립니다.
     따로 표시를 붙이실 필요가 없습니다.
     아주 오래된 브라우저에서는 안 걸리는데, 그때는 선이 그대로 남을 뿐
     화면이 깨지지는 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 표 말고도 «윗선으로 시작하는» 것들이 있어 함께 다룹니다.
   table    서지정보·비교표          .prg-list  제작 진행 목록
   .shelf   도서 목록               .works-list 작가의 방 목록 */
.kk-doc .sub-h:has(+ table),
.kk-doc .sub-h:has(+ .prg-list),
.kk-doc .sub-h:has(+ .works-list),
.kk-doc .sub-h:has(+ .shelf),
.mtext  .sub-h:has(+ table),
.mtext  .sub-h:has(+ .prg-list),
.mtext  .sub-h:has(+ .works-list),
.mtext  .sub-h:has(+ .shelf){
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:1.2rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   굵은 글자 (<b> · <strong>)
   --------------------------------------------------------------------------
   ★ 브라우저 기본값 bolder 는 «부모보다 한 단계» 라는 뜻입니다.
     본문이 300 이면 bolder 는 400 밖에 안 됩니다. 눈에 거의 안 띕니다.
     그래서 굵기를 직접 정해 줍니다.

   ★ 색도 함께 진하게 합니다.
     「진행 순서」처럼 설명 글이 옅은 자리에서는 굵기만으로는 부족합니다.

   ※ .prg-body b · .band-item b 처럼 «따로 정한 자리» 는 그 값이 이깁니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc b, .kk-doc strong,
.mtext  b, .mtext  strong{
  font-weight:600;
  color:var(--body-color);
}

/* 「진행 순서」 같은 목록 — 이름과 설명이 한 줄에 있어 더 벌려 줍니다 */
.kk-doc .steps > li b,
.mtext  .steps > li b,
.kk-doc .do-list > li b,
.mtext  .do-list > li b{
  margin-right:.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   견적에 필요한 것 — 문의 폼 안의 묶음
   --------------------------------------------------------------------------
   자비 출판·동인지 제작을 고르셨을 때만 나타납니다.
   갑자기 칸이 늘어나므로 «한 덩어리» 로 묶어 놀라지 않게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.quote-box{
  margin:0 0 2.8rem;
  padding:2rem 2rem .4rem;
  background:var(--lightgray-color);
  border-left:2px solid var(--point-color);
}
.quote-box[hidden]{ display:none; }

.quote-head{ margin:0 0 1.6rem; }
.quote-head b{ display:block; font-size:1.5rem; font-weight:600;
  color:var(--body-color); margin-bottom:.3rem; }
.quote-head span{ display:block; font-size:1.3rem; color:var(--muted-color); }

/* 상자 안에서는 칸 사이를 조금 좁힙니다 */
.quote-box .wrow{ padding-bottom:1.8rem; }
.quote-box .wrow:last-child{ padding-bottom:1.8rem; }
.quote-box .whelp{ margin-top:.5rem; }

@media (max-width:600px){
  .quote-box{ padding:1.6rem 1.4rem .4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   폼의 마디 제목
   --------------------------------------------------------------------------
   ★ <legend> 는 테마가 화면에서 숨깁니다 (position:absolute · font-size:0).
     화면 읽어 주는 프로그램에만 들리게 하는 방식입니다.
     그래서 「파일 첨부」 「개인정보 수집·이용 동의」 같은 마디 제목이
     «눈에는 하나도 안 보이고» 있었습니다. 칸들이 줄줄이 이어져 보입니다.

   ★ legend 는 그대로 두고 «보이는 제목» 을 따로 둡니다.
     화면 읽어 주는 프로그램에 두 번 들리지 않게 aria-hidden 은 쓰지 않습니다.
     legend 와 같은 말이라 두 번 들려도 뜻이 흐트러지지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.wsec{
  margin:0 0 2rem;
  font-size:1.6rem; font-weight:600; letter-spacing:-.03em;
  color:var(--body-color);
}
.wform + .wform .wsec{ margin-top:1.2rem; }

/* ── 개인정보 동의 ──────────────────────────────────────────────────────── */
.agree-box{ margin:0 0 1.6rem; }
.agree-box .tbl{ margin:0 0 1rem; }
.agree-box p{ font-size:1.3rem; color:var(--muted-color); margin:0; }

.agree-check{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:1.4rem 1.6rem;
  background:var(--lightgray-color);
  border-left:2px solid var(--point-color);
  cursor:pointer;
}
.agree-check input{ margin-top:.3rem; width:1.8rem; height:1.8rem; flex:0 0 auto; }
.agree-check b{ font-size:1.4rem; font-weight:500; color:var(--body-color); }

/* ── 파일 첨부 ──────────────────────────────────────────────────────────── */
.wnote{
  margin:0 0 1.8rem; padding:1.2rem 1.4rem;
  background:var(--lightgray-color);
  font-size:1.3rem; color:var(--text-color);
}
.wrow-file label{ flex:0 0 6rem; }


/* ══════════════════════════════════════════════════════════════════════════
   개인정보 동의 표 · 단추 모양 마무리
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 동의 표 ────────────────────────────────────────────────────────────
   항목(왼쪽)과 내용(오른쪽)이 한눈에 갈리도록 합니다.
   ★ 브라우저는 <th> 를 «가운데» 로 놓습니다. 왼쪽으로 되돌립니다.
   ★ 항목 칸에 옅은 바탕을 깔아 «표의 왼쪽 기둥» 이 보이게 합니다. */
.agree-box .tbl th,
.agree-box .tbl td{ text-align:left; vertical-align:top; }
.agree-box .tbl tbody th{
  width:10rem;
  background:transparent;        /* 옅은 바탕 없이 — 선만으로 갈립니다 */
  font-size:1.3rem;              /* 항목 이름은 작게 */
  font-weight:500;
  color:var(--muted-color);
  white-space:nowrap;
}
.agree-box .tbl tbody td{
  font-size:1.3rem;
  font-weight:300;               /* 내용은 얇게 */
  color:var(--text-color);
}

@media (max-width:600px){
  /* 좁은 화면에서는 위아래로 쌓습니다 */
  .agree-box .tbl,
  .agree-box .tbl tbody,
  .agree-box .tbl tr,
  .agree-box .tbl th,
  .agree-box .tbl td{ display:block; width:auto; }
  .agree-box .tbl tbody th{ border-bottom:0; padding-bottom:.2rem; }
  .agree-box .tbl tbody td{ padding-top:0; }
}

/* ── 단추 ────────────────────────────────────────────────────────────────
   ★ <button> 은 브라우저가 «테두리와 바탕» 을 스스로 붙입니다.
     <a> 로 만든 단추와 모양이 달라 보입니다. 그것을 지웁니다.
   ★ 자비 출판 페이지의 「자비 출판 문의하기」 단추와 같은 모양이 됩니다. */
.kk-doc button.btn, .mtext button.btn,
.kk-doc .btn_submit, .mtext .btn_submit{
  border:0;
  border-radius:0;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  font-family:var(--kk-sans);
}
.mtext .btn_submit:hover{ background:var(--point-dark); }


/* ── 단추 색 마지막 잠금 ─────────────────────────────────────────────────
   ★ 그누보드 default.css 에 «.btn_submit { background:#3a8afd }» 가 있습니다.
     파란색입니다. 우리 규칙이 더 세지만, 감싸개가 어긋나면 저 파랑이 나옵니다.
     실제로 문의 폼이 .mtext 밖에 있어 파랗게 나오고 있었습니다.
     감싸개를 고쳤고, 여기서 한 번 더 못을 박아 둡니다. */
.mtext .btn_submit,
.kk-doc .btn_submit,
.mtext button.btn,
.kk-doc button.btn{ background:var(--point-color); color:#fff; }
.mtext .btn_submit:hover,
.kk-doc .btn_submit:hover,
.mtext button.btn:hover,
.kk-doc button.btn:hover{ background:var(--point-dark); }


/* ── 메뉴 글자를 머리말 가운데에 ────────────────────────────────────────
   테마 원본은 line-height:8rem 로 «80px» 에 맞춰 두었습니다.
   우리는 머리말을 100px 로 올렸으므로 메뉴가 위로 치우쳐 보입니다.
   높이 값을 따라가게 고칩니다. 스크롤해서 얇아질 때도 함께 따라갑니다. */
#header .gnb > ul > li > a{ line-height:var(--kk-hd-h); }
#header.scr .gnb > ul > li > a{ line-height:var(--kk-hd-h-scr); }
#header h1{ height:auto; min-width:0; }


/* ══════════════════════════════════════════════════════════════════════════
   메뉴 글자와 펼침 메뉴 높이
   --------------------------------------------------------------------------
   ★ 값을 바꾸시려면 아래 두 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-gnb-weight:500;      /* 큰 메뉴 굵기 — 400 얇게 / 500 / 600 굵게 */
  --kk-sub-line:3.6rem;     /* 펼침 메뉴 한 줄 높이 (원본 4.4rem) */
}

/* 큰 메뉴 — 굵게 */
#header .gnb > ul > li > a{ font-weight:var(--kk-gnb-weight); }

/* 펼침 메뉴 — 한 줄 높이를 줄여 전체가 낮아집니다.
   ★ 손가락으로 누르는 자리라 너무 줄이면 안 됩니다.
     좁은 화면(휴대폰)에서는 44px 로 되돌립니다. */
#header .gnb > ul > li ul li a{
  line-height:var(--kk-sub-line);
  padding:0 3.2rem 0 2rem;
  font-size:1.35rem;
}

/* 위아래 여백도 함께 */
#header .gnb > ul > li ul{ padding-top:.8rem; padding-bottom:.8rem; }

@media (max-width:1024px){
  /* 휴대폰에서는 손가락 크기를 지킵니다 */
  :root{ --kk-sub-line:4.4rem; }
  #header .gnb > ul > li ul li a{ font-size:1.5rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   로그인 화면의 「자동로그인」 체크박스
   --------------------------------------------------------------------------
   ★ 테마 원본은 네모(span)를 float:left 로 띄웁니다.
     float 는 글줄에서 «빠져나오므로» 글자의 세로 가운데와 맞출 수 없습니다.
     네모는 줄 맨 위, 글자는 줄 가운데에 놓여 어긋나 보입니다.

   ★ float 를 풀고 inline-flex 로 «가운데 정렬» 합니다.
     회원 스킨의 style.css 는 손대지 않습니다.
     테마를 새로 받으시면 덮어씌워지기 때문입니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 사이트 «전체» 의 체크박스·라디오에 걸립니다.
     그누보드·테마 스킨 서른 곳이 같은 구조를 씁니다.
     파일을 고치지 않고 여기서 한 번에 덮습니다.

   ── 두 가지 구조 ──
     ㉮ <label><span></span> 자동로그인</label>            글이 label «안»
     ㉯ <label><span></span></label><span class="chk_li">글</span>   글이 label «밖»
     둘 다 다룹니다. */

/* ㉮ 글이 label 안에 있을 때 */
.chk_box input[type="checkbox"] + label,
.chk_box input[type="radio"] + label{
  display:inline-flex;
  align-items:center;          /* 네모와 글자를 세로 가운데로 */
  gap:.7rem;
  padding-left:0;
  line-height:1.5;
  cursor:pointer;
  vertical-align:middle;
}
.chk_box input[type="checkbox"] + label span,
.chk_box input[type="radio"] + label span{
  float:none;                  /* ★ 이 한 줄이 핵심입니다 */
  position:static;
  flex:0 0 auto;
  margin:0;
}

/* ㉯ 글이 label 밖에 있을 때 — 「기타 개인설정」의 메일링·SMS 같은 것 */
li.chk_box{
  display:flex;
  align-items:center;
  gap:.7rem;
}
li.chk_box .chk_li{
  padding-left:0;              /* 원본의 20px 를 풉니다. gap 이 대신합니다 */
  line-height:1.5;
  cursor:pointer;              /* label 로 바꿨으므로 눌러도 체크됩니다 */
}
li.chk_box .chk_li:hover{ color:var(--point-color); }
/* label 안이 네모뿐일 때는 gap 이 필요 없습니다 */
li.chk_box label{ gap:0; }


/* ══════════════════════════════════════════════════════════════════════════
   회원 화면 — 강조 글자와 색을 사이트에 맞추기
   --------------------------------------------------------------------------
   테마의 회원 스킨은 자기 색을 씁니다.
     파랑 #3a8afd #2172f8 #3ca1ff  (18곳)
     빨강 #e8180c · 분홍 #ed6478
   우리 사이트는 테라코타(#ce6455) 하나만 씁니다.
   회원 화면만 파랗게 나오면 다른 사이트처럼 보입니다.

   ★ 회원 스킨의 style.css 는 손대지 않습니다.
     테마 원본이라 테마를 새로 받으시면 덮어씌워집니다. 여기서 덮어씁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 강조 글자 ─────────────────────────────────────────────────────────── */
#reg_result strong,
#reg_result h2 strong,
#reg_result #result_email strong,
#mb_confirm p strong,
#pw_confirm p strong{
  color:var(--point-color);
  font-weight:600;
}

/* ── 단추 ──────────────────────────────────────────────────────────────── */
.mbskin .btn_submit,
.register .btn_submit,
#register_form .btn_submit,
.mbskin .btn_confirm .btn_submit{
  background:var(--point-color);
  border:0; border-radius:0;
  font-family:var(--kk-sans);
  cursor:pointer;
}
.mbskin .btn_submit:hover,
.register .btn_submit:hover,
#register_form .btn_submit:hover{ background:var(--point-dark); }

/* ── 링크 ──────────────────────────────────────────────────────────────── */
.mbskin a:hover,
.register a:hover{ color:var(--point-color); }

/* ── 체크박스·라디오 ────────────────────────────────────────────────────── */
.chk_box input[type="checkbox"]:checked + label{ color:var(--body-color); }
.chk_box input[type="checkbox"]:checked + label span{
  background-color:var(--point-color);
  border-color:var(--point-color);
}
.chk_box input[type="checkbox"] + label:hover{ color:var(--point-color); }
.chk_box input[type="radio"]:checked + label{ color:var(--point-color); }
.chk_box input[type="radio"]:checked + label span{ border-color:var(--point-color); }
.chk_box input[type="radio"]:checked + label span:before{ background:var(--point-color); }

/* ── 입력칸이 눌렸을 때 ─────────────────────────────────────────────────── */
.mbskin .frm_input:focus,
.register .frm_input:focus,
#register_form .frm_input:focus{
  border-color:var(--point-color);
  outline:none;
}

/* ── 필수 표시 ───────────────────────────────────────────────────────────
   ★ .required 에는 색을 주지 않습니다.
     그누보드는 이 이름을 «입력칸» 에만 붙입니다.
     화면에 「필수」라고 적힌 글자와는 무관합니다.
     색을 주면 아이디·비밀번호를 칠 때 «친 글자» 가 빨갛게 나옵니다.
     (2026-08, 실제로 그렇게 나와 걷어냈습니다)

   ★ 화면에 「(필수)」 라고 적히는 글자는 .cert_req 입니다. 거기에만 색을 줍니다. */
.mbskin .cert_req,
.register .cert_req,
#register_form .cert_req{ color:var(--point-color); font-weight:500; }

/* 입력칸의 글자는 언제나 먹색입니다 */
.mbskin .frm_input,
.register .frm_input,
#register_form .frm_input,
.mtext .frm_input,
.kk-doc .frm_input,
.frm_input, .frm_textarea{
  color:var(--body-color);
}
.mbskin .frm_input::placeholder,
.register .frm_input::placeholder,
.frm_input::placeholder{ color:var(--darkgray-color); }


/* ══════════════════════════════════════════════════════════════════════════
   그누보드 기본 파랑을 사이트 색으로
   --------------------------------------------------------------------------
   그누보드와 테마의 기본 스킨은 파랑(#3a8afd)을 씁니다.
   회원·검색·FAQ·비밀번호 확인 같은 «우리가 안 만든 화면» 에 그 색이 나옵니다.
   사이트 안에서 색이 둘이면 다른 사이트에 온 것처럼 보입니다.

   ★ 파일을 고치지 않고 여기서 덮어씁니다.
     테마나 그누보드를 새로 받으셔도 우리 규칙이 살아 있습니다.

   ★ 여기 없는 화면에서 파란 것을 보시면 알려 주십시오. 한 줄 더하면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 단추 — 그누보드 기본 클래스 전부 */
.btn_submit, .btn_confirm .btn_submit,
input[type="submit"].btn_submit, button.btn_submit{
  background:var(--point-color);
  border:0; border-radius:0;
  font-family:var(--kk-sans);
  cursor:pointer;
}
.btn_submit:hover, button.btn_submit:hover{ background:var(--point-dark); }

.btn_b01, .btn_b02, .btn_b03, a.btn_b01, a.btn_b02{
  border-radius:0; font-family:var(--kk-sans);
}
.btn_b01:hover, .btn_b02:hover, a.btn_b01:hover, a.btn_b02:hover{
  border-color:var(--point-color); color:var(--point-color);
}

/* 쪽번호 — 지금 쪽 */
.pg_current{
  background:var(--point-color);
  border-color:var(--point-color);
  color:#fff;
}
.pg_page:hover{ color:var(--point-color); }

/* 링크 · 강조 */
#validation_check strong,
.reg_result strong,
.new_win strong{ color:var(--point-color); }

/* 검색·FAQ 에서 찾은 낱말 */
.sch_word, .search_result strong, .faq_con .tit em{
  color:var(--point-color); font-style:normal;
}

/* 입력칸이 눌렸을 때 */
.frm_input:focus, .frm_textarea:focus{
  border-color:var(--point-color); outline:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   체크박스·라디오 — 눌렀을 때의 색
   --------------------------------------------------------------------------
   그누보드와 테마는 «체크 표시» 를 이렇게 그립니다.
     background: url(chk.png) no-repeat 50% 50% #3a8afd;   ← 파란 바탕 + 흰 체크 그림
   사이트 전체에서 파랑이 나오는 자리가 열한 군데입니다.

   ★ 그림(chk.png)은 그대로 쓰고 «바탕색만» 바꿉니다.
     그림은 흰 체크 표시라 어느 바탕색에도 어울립니다.

   ★ 여기 없는 자리에서 파란 것을 보시면 알려 주십시오.
     선택자 한 줄만 더하면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 체크 표시가 켜졌을 때 ─────────────────────────────────────────────── */
.chk_box input[type="checkbox"]:checked + label span,
.fregister_agree input[type="checkbox"]:checked + label span,
.member_cert_refresh_agree input[type="checkbox"]:checked + label span,
.switch_field input:checked + label{
  background-color:var(--point-color) !important;
  border-color:var(--point-color) !important;
}

/* ── 켜진 글자 ─────────────────────────────────────────────────────────── */
.chk_box input[type="radio"]:checked + label,
.fregister_agree input[type="checkbox"]:checked + label,
.member_cert_refresh_agree input[type="checkbox"]:checked + label{
  color:var(--body-color);
}
.chk_box input[type="radio"]:checked + label span{ border-color:var(--point-color); }
.chk_box input[type="radio"]:checked + label span:before{ background:var(--point-color); }

/* ── 마우스를 올렸을 때 ────────────────────────────────────────────────── */
.chk_box input[type="checkbox"] + label:hover,
.fregister_agree input[type="checkbox"] + label:hover,
.member_cert_refresh_agree input[type="checkbox"] + label:hover{
  color:var(--point-color);
}

/* ── 새 창(파일 고르기 등)의 «고른 줄» ─────────────────────────────────── */
.new_win .win_ul .selected{
  background:var(--point-color);
  border-color:var(--point-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   남은 파랑 마무리
   --------------------------------------------------------------------------
   게시판 상세·댓글·FAQ·검색 같은 «우리가 안 만든 화면» 에 남아 있던 파랑입니다.
   자주 보는 자리는 아니지만, 사이트 안에서 색이 둘이면 안 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 게시판 상세 — 분류 탭 · 붙임 파일 · 링크 */
#bo_cate a:hover, #bo_cate a:focus, #bo_cate .bo_cate_on,
#bo_v_file a:hover, #bo_v_file a:focus,
#bo_v_link a:hover, #bo_v_link a:focus,
#bo_v_top a:hover, #bo_v_bot a:hover{
  color:var(--point-color);
  border-color:var(--point-color);
}

/* 댓글 수 */
.cmt_btn span.total, .cmt_btn span.total:after{
  color:var(--point-color); background:transparent;
}

/* FAQ */
#faq_con .con_inner .closer_btn,
#faq_con .tit:hover, #faq_con li.active .tit{ color:var(--point-color); }

/* 회원가입 단추 */
.reg_btn_submit{ background:var(--point-color); border-color:var(--point-color); }
.reg_btn_submit:hover{ background:var(--point-dark); }

/* 새 창 — 몇 건 */
.new_win .win_total strong{ color:var(--point-color); }

/* 그누보드 기본 메뉴 (지금은 안 쓰지만 대비) */
#gnb .gnb_1dli:hover > a, a.gnb_2da:hover,
.gnb_wrap .gnb_empty a, #gnb_all .gnb_al_li .gnb_al_a:hover{ color:var(--point-color); }

/* 안내 글자 — 빨강 대신 포인트색 */
.txt_done, .txt_expired{ color:var(--point-color); }


/* ══════════════════════════════════════════════════════════════════════════
   글꼴과 모서리 마무리
   --------------------------------------------------------------------------
   ★ 사이트 방침
       글꼴   애플 산돌고딕 Neo + Jost. 맑은고딕·굴림은 쓰지 않습니다.
       모서리 각지게. 둥근 모서리는 쓰지 않습니다.
     그누보드·테마 기본 스킨이 이 둘을 어깁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 글꼴 — 게시판·회원 화면의 입력칸과 단추까지 */
.mbskin, .register, #bo_v, #bo_w, #bo_list, #bo_gall,
.tbl_frm01, .tbl_head01, .tbl_head02,
input, select, textarea, button{
  font-family:var(--kk-sans);
}

/* 모서리 — 각지게 */
.mbskin *, .register *, #bo_v *, #bo_w *, #bo_list *,
.tbl_frm01 *, .btn_submit, .btn_b01, .btn_b02, .btn_confirm,
.frm_input, .frm_textarea, .pg_page, .pg_current{
  border-radius:0;
}
/* 동그라미여야 하는 것은 되돌립니다 */
.chk_box input[type="radio"] + label span,
.mbskin .profile_img img, .member_img img{ border-radius:50%; }


/* ══════════════════════════════════════════════════════════════════════════
   소식·이야기 마당 목록
   --------------------------------------------------------------------------
   공지사항 · 언론보도·서평 · 낭독회·행사 · 이야기 마당이 함께 씁니다.
   줄 하나에 «제목 + 날짜» 만 두는 단순한 목록입니다.
   표(table)로 만들면 좁은 화면에서 칸이 뭉개집니다.
   ══════════════════════════════════════════════════════════════════════════ */
.news-list{ list-style:none; margin:2.4rem 0 0; padding:0;
  border-top:1px solid var(--body-color); }
.news-item{ border-bottom:1px solid var(--line-color); }

.news-link{ display:flex; align-items:baseline; gap:1.6rem;
  padding:1.6rem 0; transition:background .18s ease; }
.news-link:hover{ background:var(--lightgray-color); }

.news-head{ flex:1; min-width:0; display:flex; align-items:baseline;
  gap:.8rem; flex-wrap:wrap; }
.news-title{ font-size:1.55rem; font-weight:400; letter-spacing:-.03em;
  color:var(--body-color); }
.news-link:hover .news-title{ color:var(--point-color); }

.news-meta{ flex:0 0 auto; font-size:1.3rem; color:var(--muted-color);
  font-family:var(--eng-font); }

/* 공지로 올린 글 */
.news-item.is-notice{ background:rgba(28,27,25,.02); }
.news-item.is-notice .news-title{ font-weight:500; }

/* 글이 없을 때 */
.news-list + .empty{ border-top:0; }

/* 검색 */
.news-search{ display:flex; gap:.8rem; margin-top:2.8rem;
  padding-top:2.4rem; border-top:1px solid var(--line-color); }
.news-search .frm_input{ flex:1; max-width:32rem; height:4.4rem; }
.news-search .btn{ flex:0 0 auto; }

/* 본문 — 소식은 사진이 들어가는 일이 많습니다 */
.news-body img{ max-width:100%; height:auto; }
.news-body{ font-size:var(--kk-fs); line-height:var(--kk-lh); color:var(--text-color); }

@media (max-width:600px){
  .news-link{ flex-direction:column; gap:.6rem; }
  .news-meta{ font-size:1.2rem; }
  .news-search{ flex-direction:column; }
  .news-search .frm_input{ max-width:100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   목록의 분류 탭 — 글자 크기 바로잡기
   --------------------------------------------------------------------------
   ★ 원래 값이 .9375rem 이었습니다.
     이건 «html 글자가 16px» 일 때 15px 이 되도록 쓴 값입니다.
       .9375 × 16 = 15px
     그런데 우리 사이트는 html 을 10px 로 둡니다 (font-size:62.5%).
       .9375 × 10 = 9.4px      ← 절반이 되어 버립니다

   ★ 분류 탭은 «눌러서 화면을 바꾸는» 것입니다.
     딱지(1.2rem)나 날짜(1.3rem)보다 커야 무엇을 누르는지 알아봅니다.

   ★ 크기를 바꾸시려면 아래 --kk-tab-fs 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-tab-fs:1.5rem;      /* 분류 탭 글자 — 본문과 같은 크기 */
}

.ftab{
  font-size:var(--kk-tab-fs);
  font-weight:400;
  letter-spacing:-.03em;
  padding:1rem 1.6rem;
  min-height:4.4rem;          /* 손가락으로 누르기 좋은 크기 */
  display:inline-flex;
  align-items:center;
}
/* 지금 보고 있는 분류 */
.ftab[aria-current]{ font-weight:600; }

.frow{ gap:.4rem; }

@media (max-width:600px){
  :root{ --kk-tab-fs:1.4rem; }
  .ftab{ padding:.9rem 1.2rem; }
}


/* ── 도서 목록·표지의 글자 크기 바로잡기 ─────────────────────────────────
   .ftab 과 같은 이유입니다. «html 16px» 기준으로 쓴 값이라 절반이 되었습니다.
     .875rem   × 10 = 8.8px   (16px 기준이면 14px)
     .9375rem  × 10 = 9.4px   (16px 기준이면 15px)
   도서명이 8.8px 이면 읽기 어렵습니다. */
.bk-t{ font-size:1.5rem; }        /* 도서 목록의 도서명 */
.cover-t{ font-size:1.4rem; }     /* 표지 아래 제목 */
.cover-a{ font-size:1.3rem; }     /* 표지 아래 지은이 */

@media (max-width:600px){
  .bk-t{ font-size:1.4rem; }
  .cover-t{ font-size:1.3rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   읽기 편하게 — 옅은 글자와 누르는 자리
   --------------------------------------------------------------------------
   ★ --darkgray-color (#999999) 는 오프화이트 바탕에서 대비가 2.7:1 입니다.
     읽을 수 있는 최소는 4.5:1 입니다. 밝은 화면이나 나이 든 눈에는 흐릿합니다.
     설명 글·날짜·조회수 같은 작은 글자 열 곳에 쓰이고 있었습니다.

     색을 바꾸지 않고 «글자에 쓸 때만» 한 단계 진하게 씁니다.
     선이나 아이콘에 쓰는 --darkgray-color 자체는 그대로 둡니다.

   ★ 「자세한 안내」 링크가 36px 이었습니다.
     손가락으로 누르는 자리는 44px 이 최소입니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-faint:#767066;      /* 작은 설명 글자 — 대비 5.0:1 */
}

.kk-doc .fine,
.mtext .fine,
.kk-doc .road-label,
.kk-doc .ask-more .ask-etc,
.works-hit,
.prg-date,
.prg-step-item.is-done .prg-state,
.prg-step-item.is-wait .prg-body b,
.prg-step-item.is-wait .prg-body span,
.kk-cover.is-empty em,
.kk-cover.is-noimg em{
  color:var(--kk-faint);
}

/* 「자세한 안내」 링크 — 좁은 화면에서는 44px 을 지킵니다 */
@media (max-width:1024px){
  .kk-doc .ask-more .btn-txt{ min-height:4.4rem; }
}


/* ── 출판 방향 머리글 — 다른 페이지와 같은 크기로 ────────────────────────
   .direction-lead 만 한 단계 작았습니다 (2.6rem vs 3.2rem).
   여섯 페이지가 쓰는 .opening 과 같게 맞춥니다.

   ★ 아래 여백은 지금 값을 지킵니다.
     출판 방향은 머리글 뒤에 바로 다섯 항목이 이어져,
     인사말처럼 넓게 띄우면 화면이 헐거워집니다. */
.kk-doc .direction-lead,
.mtext .direction-lead{
  font-size:clamp(2.2rem, 3.4vw, 3.2rem);
}


/* ══════════════════════════════════════════════════════════════════════════
   본문 시작점 — 머리말 높이를 따라가게
   --------------------------------------------------------------------------
   머리말은 position:fixed 라 «화면에 떠» 있습니다.
   본문이 그만큼 내려와 있지 않으면 위쪽이 가립니다.

   ★ 테마 원본은 머리말 80px · 본문 margin-top 8rem 으로 맞아 있었습니다.
     우리가 머리말을 100px 로 올리면서 20px 이 가리게 되었습니다.

   ★ 값을 따로 적지 않고 --kk-hd-h 를 그대로 씁니다.
     머리말 높이를 바꾸시면 본문도 저절로 따라옵니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ --kk-hd-h 는 좁은 화면에서 저절로 72px 로 바뀝니다.
     그러니 여기서 따로 나눌 필요가 없습니다.
   ★ --kk-hd-h-scr(78px)는 «스크롤해서 줄어든» 높이라 여기 쓰면 안 됩니다.
     화면 맨 위에서는 머리말이 100px 이기 때문입니다. */
.sub_content{ margin-top:var(--kk-hd-h); }


/* ══════════════════════════════════════════════════════════════════════════
   내용이 짧아도 꼬리말은 화면 아래에
   --------------------------------------------------------------------------
   글이 없는 게시판, 검색 결과 없음 같은 짧은 화면에서
   꼬리말이 중간에 떠서 아래가 하얗게 빕니다.

   ★ 첫 화면(fullpage)에는 걸지 않습니다. 거기는 이미 꽉 찹니다.
   ★ min-height 에서 머리말 높이를 빼야 화면이 넘치지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 첫 화면은 sub.head.php 를 쓰지 않아 .sub_content 가 없습니다.
     그래서 조건을 따로 둘 필요가 없습니다. */
.sub_content{
  min-height:calc(100vh - var(--kk-hd-h) - 32rem);
}

@media (max-width:1024px){
  .sub_content{
    min-height:calc(100vh - var(--kk-hd-h) - 40rem);   /* 꼬리말이 세로로 길어집니다 */
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   서브페이지 머리말 — 바탕 깔기
   --------------------------------------------------------------------------
   ★ 첫 화면은 fullpage 가 #header 에 .on 을 붙여 흰 반투명 바탕을 만듭니다.
     서브페이지에는 그 코드가 없어 «투명» 인 채로 고정됩니다.
     글이 머리말 뒤로 지나가며 겹쳐 보입니다.

   ★ body.sub 같은 표시가 없으므로 .sub_content 가 있는 화면을 짚습니다.
     :has() 로 «서브페이지일 때만» 걸리게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 화면 «맨 위» 에서는 바탕을 깔지 않습니다.
     머리말이 먹색 제목 띠(.sub_title) 위에 놓이기 때문입니다.
     흰 바탕을 깔면 띠가 잘려 보입니다.

   ★ 스크롤해서 본문이 올라오면(.scr) 그때 바탕을 깝니다.
     custom.js 가 40px 을 넘으면 .scr 를 붙입니다. */
body:has(.sub_content) #header.scr{
  background:rgba(251, 250, 247, .97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-color);
}

/* 바탕이 밝아졌으니 로고와 글자를 먹색으로 */
body:has(.sub_content) #header.scr h1 a{
  background-image:url(../images/logo.svg);
}
body:has(.sub_content) #header.scr .gnb > ul > li > a,
body:has(.sub_content) #header.scr .adm a{
  color:var(--body-color);
}
body:has(.sub_content) #header.scr .mbtn span{ background:var(--body-color); }


/* ══════════════════════════════════════════════════════════════════════════
   게시판 등록 화면 — 테마가 덧그리는 장식 걷어내기
   --------------------------------------------------------------------------
   ★ modify.css 가 #bo_w 안의 단추에 «아이콘 상자» 를 덧그립니다.
       .btn_submit::before  단추 뒤에 깔리는 색 상자 (100% × 48px)
       .btn_submit::after   왼쪽에 붙는 48px 짜리 연필 아이콘 칸
     우리 단추는 그런 장식을 쓰지 않습니다. 「등록」 왼쪽에 검은 네모가 붙어 보입니다.
   ══════════════════════════════════════════════════════════════════════════ */
#bo_w .btn_submit::before,
#bo_w .btn_submit::after,
#bo_w .btn_cancel::before,
#bo_w .btn_cancel::after,
.sub_content #bo_w .btn_submit::before,
.sub_content #bo_w .btn_submit::after,
.sub_content #bo_w .btn_cancel::before,
.sub_content #bo_w .btn_cancel::after,
#faq_sch .btn_submit::before,
#faq_sch .btn_submit::after,
.sub_content #faq_sch .btn_submit::before,
.sub_content #faq_sch .btn_submit::after{
  content:none;
  display:none;
}

/* 단추 자체도 우리 모양으로 되돌립니다 */
.sub_content #bo_w .btn_submit,
#bo_w .btn_submit{
  position:static;
  z-index:auto;
  padding:.8rem 2.4rem;
  font-size:1.4rem;
  min-width:14rem;
}

/* ── 파일 붙임 칸 ────────────────────────────────────────────────────────
   ★ 이름 칸이 6rem(60px) 이라 「표지 (첫 번째 칸)」이 두 줄로 접혔습니다.
     위아래로 쌓아 이름이 온전히 한 줄에 들어가게 합니다. */
.wrow-file{
  display:block;
}
.wrow-file label{
  display:block;
  flex:none;
  margin-bottom:.8rem;
}
.wrow-file .frm_file{
  display:block;
  width:100%;
  max-width:40rem;
}
.wrow-file .whelp{ margin-top:.8rem; }


/* ══════════════════════════════════════════════════════════════════════════
   등록 단추 — 테마가 주는 여백 걷어내기
   --------------------------------------------------------------------------
   ★ modify.css 가 이렇게 둡니다.
       .sub_content #bo_w .btn_submit { margin-top:4rem; height:4.8rem; }
     테마 원본은 단추가 «혼자» 놓이는 구조라 그 여백이 필요했습니다.
     우리는 .admin-bar 로 감싸 여백을 따로 주므로,
     「등록」만 40px 내려가고 「취소」는 제자리에 남아 어긋나 보입니다.

   ★ 선택자에 아이디(#)가 있어 우리 규칙보다 훨씬 셉니다.
     같은 힘(아이디 하나 + 클래스 둘)으로 맞섭니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content #bo_w .admin-bar .btn_submit,
.sub_content #bo_w .admin-bar .btn,
.sub_content #bo_w .admin-bar .btn-txt,
#bo_w .admin-bar .btn_submit,
#bo_w .admin-bar .btn,
#bo_w .admin-bar .btn-txt{
  margin-top:0;
  height:auto;
  min-height:4.4rem;
  position:static;
  z-index:auto;
}

/* 두 단추가 «같은 줄 가운데» 에 놓이게 */
#bo_w .admin-bar.is-center,
.sub_content #bo_w .admin-bar.is-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   테마가 «아이디» 로 덮는 것 되돌리기
   --------------------------------------------------------------------------
   ★ 왜 필요한가
     아이디(#)가 든 선택자는 클래스 여러 개보다 셉니다.
       .sub_content #bo_w .btn_submit   (1,0,2)   ← 테마
       .mtext .btn                      (0,0,2)   ← 우리 (집니다)
     우리 CSS 를 맨 나중에 실리게 해 두어도 «순서로는 못 이깁니다».
     같은 힘으로 맞서야 합니다.

     우리 스킨이 그누보드 기본 아이디를 물려받아 테마 장식이 함께 걸립니다.

   ★ 여기 없는 자리에서 어긋난 것을 보시면 알려 주십시오.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 표 ─────────────────────────────────────────────────────────────
   테마가 td 높이를 64px 로 강제하고 날짜·이름 칸 폭을 90px 로 묶습니다.
   우리 목록은 줄마다 내용이 달라 답답해집니다. */
.sub_content #bo_list td,
#bo_list td{
  height:auto;
  padding:1.4rem .8rem;
}
.sub_content #bo_list .td_datetime,
.sub_content #bo_list .td_name,
#bo_list .td_datetime,
#bo_list .td_name{
  width:auto;
  white-space:nowrap;
}

/* ── 댓글 단추 줄 ────────────────────────────────────────────────────────
   테마가 margin-top:4rem 을 줍니다. 우리는 .admin-bar 로 여백을 정합니다. */
#content #bo_w .btn_confirm,
#bo_w .btn_confirm,
#bo_vc_w .btn_confirm{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.8rem;
  margin-top:1.6rem;
}
#content #bo_w .btn_confirm > *,
#bo_w .btn_confirm > *,
#bo_vc_w .btn_confirm > *{ margin-top:0; }

/* ── 분류 탭 ─────────────────────────────────────────────────────────────
   테마의 #bo_cate 모양과 우리 .ftab 이 겹칩니다.
   우리 것을 쓰는 화면에서는 테마 여백을 줄입니다. */
.sub_content #bo_cate,
#bo_cate{ margin:0 0 2.4rem; }
.sub_content #bo_cate a,
#bo_cate a{ font-size:var(--kk-tab-fs); padding:1rem 1.6rem; }


/* ══════════════════════════════════════════════════════════════════════════
   경로 표시 (HOME > 출판사 소개 > 인사말)
   --------------------------------------------------------------------------
   ★ 테마 원본은 lucide 아이콘(chevron-right)을 썼습니다.
     12px 짜리 옅은 회색이라 흰 바탕에서 거의 안 보였고,
     자바스크립트가 늦게 돌면 잠깐 빈 자리로 남았습니다.
     «>» 글자로 바꾸면 언제나 보이고 자바스크립트도 필요 없습니다.

   ★ 자간이 0.1em 이라 한글이 헐거워 보였습니다.
     영문(HOME)만 넓히고 한글은 좁힙니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_nav .navigation{
  letter-spacing:-.02em;        /* 원본 0.1em → 한글이 헐거웠습니다 */
  font-size:1.3rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
}

/* HOME 만 영문 자간을 살립니다 */
.sub_nav .navigation > a:first-child{
  font-family:var(--eng-font);
  letter-spacing:.08em;
  color:var(--muted-color);
}
.sub_nav .navigation > a:first-child:hover{ color:var(--point-color); }

/* 구분 기호
   ★ 전에는 --line-color(#e7e5e1)를 썼습니다. 흰 바탕 대비가 1.3:1 이라
     사실상 «안 보였습니다». 선 색을 글자에 쓴 제 실수입니다.
     선은 옅어야 하지만 글자는 읽혀야 합니다. */
.sub_nav .navigation .sep-gt{
  color:var(--muted-color);     /* 대비 7.5:1 */
  font-weight:400;
  padding:0 .1rem;
  user-select:none;             /* 글을 복사하실 때 딸려가지 않게 */
}

/* 경로 글자도 조금 진하게 — 배너 아래 흰 띠에서 읽혀야 합니다 */
.sub_nav .navigation{ color:var(--text-color); }
.sub_nav .navigation > a:first-child{ color:var(--text-color); }

@media (max-width:600px){
  .sub_nav .navigation{ font-size:1.2rem; gap:.4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   첫 화면 슬라이드 안의 표지
   --------------------------------------------------------------------------
   ★ 테마는 «figure > img» 에만 크기를 줍니다.
       #main_collection … .itm figure img { width:100%; height:40rem; }
     우리 kk_cover() 는 <span class="kk-cover"> 나 <a class="kk-cover"> 로
     감싸므로 그 규칙이 «안 걸립니다».
     크기가 안 잡혀 슬라이드가 가로로 길게 늘어집니다.

   ★ .kk-cover 는 height:26rem · width:auto 로 «세로 기준» 입니다.
     도서 목록에서는 표지를 자르지 않으려고 그렇게 두었습니다.
     첫 화면 슬라이드는 «배경 그림처럼» 쓰는 자리라 채워야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 감싸개는 «크기를 정하지 않고» 부모에 맞춥니다.
     그래야 블록마다 다른 높이(40rem·32rem…)를 그대로 따라갑니다.
     테마의 figure img 규칙이 안쪽 img 에 그대로 걸리게 하는 방식입니다. */
#main_collection .itm figure > .kk-cover,
#main_display .itm figure > .kk-cover,
#main_lookbook figure > .kk-cover,
#main_showroom figure > .kk-cover{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;            /* 도서 목록용 비율을 풉니다 */
}

/* figure 가 높이를 갖도록 — 원래는 img 가 정해 주던 것입니다 */
#main_collection .itm figure{ height:40rem; }
#main_display .itm figure{ height:40rem; }
#main_collection .itm figure > .kk-cover img,
#main_display .itm figure > .kk-cover img,
#main_lookbook figure > .kk-cover img,
#main_showroom figure > .kk-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 표지가 아직 없을 때 — 회색 자리도 같은 크기로 */
#main_collection .itm figure > .kk-cover.is-empty,
#main_collection .itm figure > .kk-cover.is-noimg,
#main_display .itm figure > .kk-cover.is-empty,
#main_display .itm figure > .kk-cover.is-noimg{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--lightgray-color);
}

@media (max-width:768px){
  #main_collection .itm figure,
  #main_display .itm figure{ height:36rem; }
}


/* ── 문의 목록의 고르기 칸 ───────────────────────────────────────────────
   관리자가 여러 건을 골라 지울 때 씁니다. 손님에게는 안 보입니다. */
.news-item{ position:relative; }
.inq-chk{
  position:absolute; left:-2.4rem; top:2rem;
  display:flex; align-items:center; cursor:pointer;
}
.inq-chk input{ width:1.6rem; height:1.6rem; }
.inq-all{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1.3rem; color:var(--muted-color); cursor:pointer;
}
.inq-all input{ width:1.6rem; height:1.6rem; }

@media (max-width:900px){
  /* 화면이 좁으면 목록 안으로 들여놓습니다 */
  .inq-chk{ position:static; margin-right:.8rem; }
  .news-item{ display:flex; align-items:flex-start; }
  .news-item .news-link{ flex:1; }
}

/* 모두 건수 */
.total{ font-size:1.3rem; color:var(--muted-color); margin:0 0 1.2rem; }
.total b{ font-weight:500; color:var(--body-color); }

/* 댓글 수 */
.cnt_cmt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.8rem; height:1.8rem; padding:0 .4rem;
  font-size:1.1rem; font-family:var(--eng-font);
  color:var(--point-color); border:1px solid var(--point-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   댓글
   --------------------------------------------------------------------------
   이야기 마당이 주로 씁니다. 다섯 게시판이 같은 스킨을 나눠 씁니다.
   ══════════════════════════════════════════════════════════════════════════ */
.cmt-list{ list-style:none; margin:1.6rem 0 0; padding:0;
  border-top:1px solid var(--line-color); }
.cmt-item{ padding:1.8rem 0; border-bottom:1px solid var(--line-color); }
.cmt-item.is-reply{ padding-left:2.4rem; background:rgba(28,27,25,.02); }

.cmt-head{ display:flex; align-items:center; gap:.6rem;
  margin:0 0 .6rem; font-size:1.3rem; color:var(--muted-color); }
.cmt-head b{ font-weight:500; color:var(--body-color); }

.cmt-body{ font-size:1.45rem; line-height:1.7; color:var(--text-color); }
.cmt-body p{ margin:0 0 .4rem; }

.cmt-btn{ display:flex; gap:1.2rem; margin:.8rem 0 0; }
.cmt-btn .btn-txt{ min-height:auto; font-size:1.3rem; }

/* 댓글 쓰기 */
.cmt-write{ margin-top:2.4rem; padding-top:2.4rem;
  border-top:1px solid var(--line-color); }
.cmt-row{ margin-bottom:1.2rem; }
.cmt-row label{ display:block; font-size:1.3rem; font-weight:500;
  margin-bottom:.5rem; color:var(--body-color); }
.cmt-row .frm_input{ width:100%; max-width:24rem; height:4.4rem; }
.cmt-row .frm_textarea{ width:100%; padding:1.2rem;
  border:1px solid var(--line-color); font-family:var(--kk-sans);
  font-size:1.45rem; line-height:1.7; }
.cmt-opt{ margin:0 0 1.2rem; }

/* 답글 칸이 댓글 안으로 들어갔을 때 */
.cmt-item .cmt-write{ margin-top:1.2rem; padding-top:1.2rem; }


/* ══════════════════════════════════════════════════════════════════════════
   서브페이지 머리말 — 스크롤해도 높이는 그대로
   --------------------------------------------------------------------------
   ★ custom.js 가 40px 만 내려도 #header 에 .scr 를 붙입니다.
     그러면 높이가 100px → 78px 로 줄어듭니다.

   ★ 첫 화면은 fullpage 가 화면을 통째로 넘겨 scrollTop 이 늘 0 이라
     .scr 가 «안 붙습니다». 그래서 높이가 변하지 않습니다.
     서브페이지만 줄어들어 첫 화면과 달라 보였습니다.

   ★ 높이 변화만 없앱니다.
     바탕이 밝아지고 로고가 먹색으로 바뀌는 것은 그대로 둡니다.
     글 위로 지나갈 때 겹쳐 보이지 않게 하는 것이라 필요합니다.
   ══════════════════════════════════════════════════════════════════════════ */
body:has(.sub_content) #header.scr .hd_wrap{ height:var(--kk-hd-h); }
body:has(.sub_content) #header.scr h1{ height:var(--kk-hd-h); }
body:has(.sub_content) #header.scr h1 a{
  height:var(--kk-logo-h);
  width:var(--kk-logo-w);       /* 기본값과 같게 */
}
body:has(.sub_content) #header.scr .gnb > ul > li > a{ line-height:var(--kk-hd-h); }


/* ══════════════════════════════════════════════════════════════════════════
   도서 목록의 보조 필터 (발행처)
   --------------------------------------------------------------------------
   ★ 12px 로 두었는데 너무 작았습니다.
     주 분류(문학·종교…)보다 «덜 띄게» 두는 것이 뜻이었지만,
     읽기 어려울 만큼 작으면 뜻이 없습니다.
     주 분류 15px · 보조 필터 14px 로 한 단계만 차이를 둡니다.
   ══════════════════════════════════════════════════════════════════════════ */
.frow.minor{ font-size:1.4rem; margin-top:.4rem; }
.frow.minor .flabel{
  font-size:1.3rem;
  color:var(--muted-color);
  letter-spacing:-.02em;
  padding-right:1rem;
}
.frow.minor .ftab{
  font-size:1.4rem;
  padding:.8rem 1.2rem;
  min-height:4rem;
}

/* ── 목록 아래 단추 ──────────────────────────────────────────────────────
   「새 도서 등록」이 큰 글자로 나왔습니다.
   .btn_b01 은 테마 기본이라 우리 .btn 모양이 안 걸렸습니다. */
.admin-bar .btn_b01,
.admin-bar .btn_b02{
  font-size:1.4rem;
  min-height:4.4rem;
  padding:.8rem 2.4rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   안내 페이지의 큰 글자 — 테마에 밀리던 것 바로잡기
   --------------------------------------------------------------------------
   ★ 테마에 이런 규칙이 있습니다.
       .sub_content .content p { font-size: 1.6rem; }   힘 (0,2,1)
     우리 규칙은 «.kk-doc .opening» 으로 힘이 (0,2,0) 이라 밀립니다.
     클래스 수는 같은데 «태그(p)» 가 하나 더 있어 테마가 셉니다.
     머리글이 16px 로 나오고 명조체도 안 걸렸습니다.

   ★ 우리 선택자에도 태그를 넣어 «p.opening» 으로 씁니다.
     힘이 (0,2,1) 로 같아지고, 나중에 실린 우리가 이깁니다.

   ★ 여기 없는 것이 또 밀리면 «태그를 붙이는» 같은 방법으로 고치시면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 머리글 — 인사말·출판 방향·출판 안내 등 여덟 페이지 */
.kk-doc p.opening,
.mtext p.opening,
.kk-doc p.direction-lead,
.mtext p.direction-lead{
  font-family:var(--serif-font);
  font-size:clamp(2.2rem, 3.4vw, 3.2rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:var(--kk-serif-ls);
  color:var(--body-color);
}

/* 마무리 문장 — 「밀지 않고 끌어당기는 책」 */
.kk-doc p.closing,
.mtext p.closing{
  font-family:var(--serif-font);
  font-size:clamp(1.8rem, 2.4vw, 2.2rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:var(--kk-serif-ls);
  color:var(--body-color);
}

/* 첫 문단 — 머리글 아래 한 단락 */
.kk-doc p.lead,
.mtext p.lead{
  font-size:1.9rem;
  line-height:1.6;
}

/* 서명 — 「도서출판 끌림 대표 김한결」 */
.kk-doc p.sign,
.mtext p.sign{
  font-weight:500;
  color:var(--body-color);
}


/* ── 안내 페이지의 보통 문단 ────────────────────────────────────────────
   테마의 «.sub_content .content p» 가 이렇게 덮고 있었습니다.
     font-size:1.6rem · line-height:1.9 · opacity:0.9
   우리 기준은 1.5rem · 1.6 입니다. opacity 로 흐려지기까지 했습니다.

   ★ 태그를 넣어 힘을 (0,2,1) 로 맞춥니다. */
.kk-doc p,
.mtext p{
  font-size:var(--kk-fs);
  line-height:var(--kk-lh);
  opacity:1;
}

/* 크기를 따로 정한 것들은 그 값이 이겨야 하므로 아래에 다시 둡니다 */
.kk-doc p.opening, .mtext p.opening,
.kk-doc p.direction-lead, .mtext p.direction-lead{
  font-size:clamp(2.2rem, 3.4vw, 3.2rem); line-height:1.62;
}
.kk-doc p.closing, .mtext p.closing{
  font-size:clamp(1.8rem, 2.4vw, 2.2rem); line-height:1.62;
}
.kk-doc p.lead, .mtext p.lead{ font-size:1.9rem; line-height:1.6; }
/* ★ .lead-p 는 원래 본문과 같은 크기입니다. 굵기와 색으로만 구분합니다. */
.kk-doc p.lead-p, .mtext p.lead-p{ font-size:var(--kk-fs); line-height:var(--kk-lh); }
.kk-doc p.fine, .mtext p.fine{ font-size:1.3rem; }
.kk-doc p.whelp, .mtext p.whelp{ font-size:1.3rem; }


/* ══════════════════════════════════════════════════════════════════════════
   회원 화면 — 제목과 같은 자리에 맞추기
   --------------------------------------------------------------------------
   ★ 테마의 회원 스킨은 상자를 «가운데» 에 둡니다.
       .mbskin { max-width:56rem; margin:0 auto; text-align:center; }
     그런데 제목(.page_title)은 «왼쪽» 이라 둘이 어긋납니다.

   ★ 사이트의 다른 화면은 안내 페이지·게시판 모두 왼쪽 정렬입니다.
     상자를 왼쪽으로 옮겨 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 상자를 가운데에 둡니다. 제목도 함께 가운데로 옮깁니다(아래).
     로그인·회원가입은 «할 일이 하나뿐인» 화면이라
     가운데에 모아 두면 눈이 바로 갑니다. */
.mbskin,
.register{
  max-width:44rem;
  margin:0 auto;
  text-align:left;              /* 상자는 가운데, 안쪽 글자는 왼쪽 */
}
.mbskin_box{ text-align:left; }

/* 안쪽 글자는 왼쪽 — 입력칸 이름이 가운데면 읽기 어렵습니다 */
.mbskin h1,
.mbskin h2,
.mbskin p,
.register h1,
.register p{ text-align:left; }

/* ── 제목도 함께 가운데로 ────────────────────────────────────────────────
   sub.head.php 가 회원 화면에 is-member 를 붙입니다.
   제목만 왼쪽에 남으면 상자와 어긋나 보입니다. */
.sub_content.is-member .page_title{ text-align:center; }
.sub_content.is-member .page_title h3::before{ margin:0 auto; }

/* 단추는 폭을 꽉 채웁니다 — 상자 안이라 자연스럽습니다 */
.mbskin .btn_submit,
.register .btn_submit{ width:100%; }

@media (max-width:600px){
  .mbskin, .register{ max-width:100%; }
}


/* ── 회원가입·본인확인·결과 화면도 같은 자리로 ─────────────────────────
   테마의 회원 스킨은 여러 곳을 가운데로 둡니다.
   제목이 왼쪽인데 안쪽만 가운데면 어긋나 보입니다. */
#fregister,
#fregister p,
#fregisterform .btn_confirm,
.btn_confirm_reg,
#find_info h3,
#reg_result{
  text-align:left;
}
#fregister_chkall{ text-align:left; }
/* padding 은 아래에서 다시 정합니다 */

/* 「로그인 | 회원가입」 두 갈래 — 폭을 반씩 나누던 것 */
.mb_log_cate{ display:flex; }
.mb_log_cate h2,
.mb_log_cate .join{
  float:none;
  width:auto;
  flex:1;
  text-align:center;            /* 갈래 안은 가운데가 맞습니다 */
  padding:1.6rem 0;
}

/* 「아이디/비밀번호 찾기」 링크 */
#login_password_lost{ text-align:left; }


/* ── 비밀번호 찾기·본인 확인 — 폭 맞추기 ────────────────────────────────
   이 화면들은 «팝업 창» 용 클래스(.new_win)를 씁니다.
   원래 작은 창에 뜨는 것이라 폭 제한이 없어, 보통 화면에서는
   가로로 끝까지 늘어집니다. 로그인 상자와 같은 폭으로 맞춥니다. */
.sub_content .new_win,
.sub_content #find_info{
  max-width:44rem;
  margin:0 auto;
}
.sub_content .new_win_con,
.sub_content #find_info.cert .new_win_con{
  width:auto;
  max-width:100%;
  margin:0;
}

/* 안쪽 단추는 폭을 채웁니다 */
.sub_content #find_info .find_btn .btn_submit{ width:100%; }
.sub_content .new_win .win_btn{ text-align:left; }

@media (max-width:600px){
  .sub_content .new_win,
  .sub_content #find_info{ max-width:100%; }
}


/* ── 체크 그림 자리 바로잡기 ─────────────────────────────────────────────
   ★ 회원·게시판 스킨의 style.css 가 «./img/chk.png» 를 찾습니다.
     그 폴더에 img 가 없어 404 오류가 납니다.
     테마 뿌리의 img/chk.png 를 쓰게 합니다.
     (이 파일은 css/ 안에 있으므로 ../img/ 가 테마 뿌리입니다) */
.chk_box input[type="checkbox"]:checked + label span,
.fregister_agree input[type="checkbox"]:checked + label span,
.member_cert_refresh_agree input[type="checkbox"]:checked + label span{
  background-image:url(../img/chk.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
}


/* ══════════════════════════════════════════════════════════════════════════
   회원가입 완료 화면
   --------------------------------------------------------------------------
   ★ ① 「메인으로」 단추가 «상자 밖» 에 있습니다.
        <div id="reg_result" class="register"> … </div>
        <div class="btn_confirm_reg">메인으로</div>   ← 밖
      .register 가 가운데라 단추만 왼쪽 끝으로 밀려납니다.

   ★ ② 상자와 글씨가 붙어 있었습니다. 안쪽 여백을 되살립니다.

   ★ ③ 파랑(#3684fa)·빨강(#e8180c)이 남아 있었습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 단추를 상자와 같은 자리로 */
.btn_confirm_reg{
  max-width:44rem;
  margin:2.4rem auto 0;
  text-align:left;
}
/* ★ 우리 .btn 과 같은 방식입니다.
     테마 원본은 height:57px + line-height:57px 로 가운데를 맞춥니다.
     그 둘 중 하나만 덮으면 글자가 위아래로 어긋납니다.
     inline-flex 로 두면 높이가 얼마든 «언제나» 가운데에 옵니다. */
.reg_btn_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:auto;
  min-height:4.8rem;
  padding:.8rem 2.4rem;
  background:var(--point-color);
  color:#fff;
  border:0;
  border-radius:0;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.4;
  text-align:center;
}
.reg_btn_submit:hover{ background:var(--point-dark); }

/* 상자 — 안쪽 여백을 되살립니다 */
#reg_result{
  padding:2.8rem 2.4rem;
  background:var(--lightgray-color);
  border:0;
  text-align:left;
}

/* 축하 문구 — 파랑을 걷어냅니다 */
#reg_result .reg_result_p{
  font-size:1.7rem;
  font-weight:500;
  color:var(--body-color);
  margin:0 0 1.6rem;
}
#reg_result .reg_result_p strong{ color:var(--point-color); }

/* 선물 아이콘 — 파란 그림이라 뺍니다 */
#reg_result i.fa-gift{ display:none; }

/* 아이디·이메일 표 */
#reg_result #result_email{
  margin:1.6rem 0;
  padding:1.6rem 0;
  border-top:1px solid var(--line-color);
  border-bottom:1px solid var(--line-color);
  font-size:1.4rem;
}
#reg_result #result_email span{
  display:inline-block;
  width:9rem;
  color:var(--muted-color);
}
#reg_result #result_email strong{
  color:var(--body-color);
  font-size:1.4rem;
  font-weight:500;
}

/* 본문 */
#reg_result p{
  font-size:var(--kk-fs);
  line-height:var(--kk-lh);
  color:var(--text-color);
}
#reg_result .result_txt{ text-align:left; margin:0 0 1.2rem; }


/* ── 회원 화면에 남은 테마색 마무리 ─────────────────────────────────────
   쪽지·포인트·스크랩 화면입니다. 지금은 안 쓰시지만
   나중에 여시더라도 파랑이 안 나오게 미리 덮어 둡니다. */
#fregisterform .cert_desc,
.memo_list .no_read,
.point_list .point_num,
.reply_btn,
#scrap .scrap_del:hover{ color:var(--point-color); }
#point .point_all{ background:var(--lightgray-color); }


/* ══════════════════════════════════════════════════════════════════════════
   단추 안의 글자 — 언제나 가운데
   --------------------------------------------------------------------------
   ★ 테마와 그누보드는 «height + line-height» 로 글자를 가운데에 둡니다.
       .btn { height:35px; line-height:35px; }
     둘 중 하나만 우리가 덮으면 글자가 위나 아래로 어긋납니다.
     회원가입 완료 화면의 「메인으로」가 그랬습니다.

   ★ inline-flex + align-items:center 로 두면
     높이가 얼마든 글자가 «언제나» 가운데에 옵니다.
   ══════════════════════════════════════════════════════════════════════════ */
.btn, a.btn,
.btn_submit, button.btn_submit, input[type="submit"].btn_submit,
.btn_b01, .btn_b02, .btn_b03,
.btn_close, a.btn_close,
.reg_btn_submit,
.mbskin .btn_submit,
.register .btn_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  min-height:4.4rem;
  line-height:1.4;
  text-align:center;
}

/* 글자만인 단추는 높이를 강제하지 않습니다 */
.btn-txt{ min-height:auto; }
.cmt-btn .btn-txt{ min-height:auto; }


/* ══════════════════════════════════════════════════════════════════════════
   게시판 본문 — 제목과 같은 자리로
   --------------------------------------------------------------------------
   ★ 제목은 .page_title.inner 라 «.inner 폭(120rem)» 안에서 왼쪽입니다.
     본문은 .ms > .read 인데 .ms 에 폭이 없어
     .read(64rem)가 «화면 전체» 한가운데 놓였습니다.
     기준이 달라 본문만 오른쪽으로 치우쳐 보였습니다.

   ★ .ms 에 .inner 와 같은 폭을 주고, 그 안에서 .read 를 왼쪽에 둡니다.
     안내 페이지(.content > .kk-doc)와도 같은 자리가 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
.ms{
  max-width:var(--inner-size);
  margin:0 auto;
  padding-left:2.4rem;
  padding-right:2.4rem;
}
.ms .read{
  max-width:64rem;
  margin:0;                     /* 가운데(0 auto)를 풉니다 */
  padding-left:0;
  padding-right:0;
}

/* 도서 목록·작가의 방처럼 «넓게 쓰는» 화면은 폭 제한을 풉니다 */
.ms.wide .read{ max-width:100%; }

@media (max-width:768px){
  .ms{ padding-left:1.6rem; padding-right:1.6rem; }
}


/* ── 도서·작가의 방 감싸개도 제목과 같은 자리로 ─────────────────────────
   .wrap 은 112rem, 제목의 .inner 는 144rem 입니다.
   둘 다 가운데지만 폭이 달라 «왼쪽 시작점» 이 어긋납니다.
   .wrap 을 144rem 으로 맞춰 제목과 같은 선에서 시작하게 합니다. */
.sub_content .wrap{
  max-width:var(--inner-size);
  padding-left:2.4rem;
  padding-right:2.4rem;
}

@media (max-width:768px){
  .sub_content .wrap{ padding-left:1.6rem; padding-right:1.6rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   게시판 화면 — 가운데로
   --------------------------------------------------------------------------
   ★ sub.head.php 가 게시판 화면에 is-center 를 붙입니다.
     제목과 본문을 함께 옮겨야 어긋나지 않습니다.

   ★ 안내 페이지는 «읽는 글» 이라 왼쪽 그대로입니다.
     게시판은 «하나의 일» 을 하는 자리라 가운데가 어울립니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content.is-center .page_title{ text-align:center; }
.sub_content.is-center .page_title h3::before{ margin-left:auto; margin-right:auto; }
.sub_content.is-center .ms .read{ margin:0 auto; }

/* 도서·작가의 방은 표지를 넓게 늘어놓으므로 그대로 둡니다 */
.sub_content.is-center .wrap{ margin:0 auto; }


/* ══════════════════════════════════════════════════════════════════════════
   자주 묻는 질문 (FAQ)
   --------------------------------------------------------------------------
   그누보드 기본 스킨을 쓰되 모양만 우리 것으로 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 글꼴 — 본문이 명조로 나오던 것 ──────────────────────────────────── */
#faq_wrap, #faq_con, #faq_sch, #bo_cate,
#faq_wrap *, #faq_con *, #faq_sch *{
  font-family:var(--kk-sans);
}

/* ── 검색 상자 ──────────────────────────────────────────────────────────
   ★ 여닫기와 모양 모두 «원본» 이 갖추고 있습니다.
       스킨의 jQuery 가 $(".bo_sch_wrap").toggle() 로 엽니다.
     건드리지 않습니다. */

/* ── 쪽 넘기기 ─────────────────────────────────────────────────────────
   원본 모양을 그대로 씁니다. */

@media (max-width:768px){
  #bo_list, #bo_v, #bo_w{ max-width:100%; padding-left:1.6rem; padding-right:1.6rem; }
  .tbl_head01 .td_num, .tbl_head01 .td_num2,
  .tbl_head01 .td_datetime, .tbl_head01 th:first-child{ display:none; }
}


/* ── 「옵션」 펼침 메뉴 — 크기만 ──────────────────────────────────────────
   원본은 이미 modify.css 에서 svg 14px 로 정해 두었습니다.
   여기서는 «떠 있는 판» 임을 알리는 그림자만 우리 것으로 맞춥니다. */
.more_opt{ box-shadow:var(--kk-lift-2); }



@charset "utf-8";
/* ============================================================================
 *  도서출판 끌림 — 안내 페이지 공통 스타일
 *  파일 위치: /theme/kkeullim_theme/css/kkeullim.css
 * ----------------------------------------------------------------------------
 *  ■ 어느 페이지가 이 파일을 쓰나
 *    page_content/ 안의 모든 끌림 페이지입니다.
 *      이용약관 · 개인정보처리방침 · 인사말 · 출판 방향 · 오시는 길
 *      출판 안내 · 기획 출판 · 자비 출판 · 동인지 제작 · 집필 대행
 *
 *  ■ 왜 한 파일로 모았나
 *    페이지마다 스타일을 넣으면 열 군데를 고쳐야 합니다.
 *    여기 한 곳만 고치면 모든 페이지가 함께 바뀝니다.
 *
 *  ■ 어디서 불러오나
 *    head.sub.php 가 불러옵니다. (수정파일목록.md 에 적어 두었습니다)
 *
 *  ■ ★ 대표님이 고치실 값은 아래 「값 모음」 열 줄뿐입니다.
 * ========================================================================== */

/* ── 애플 산돌고딕 Neo ──────────────────────────────────────────────────────
   찾는 순서가 세 겹입니다.
     ① 기기에 깔린 글꼴  — 맥·아이폰은 아무것도 내려받지 않습니다
     ② CDN 조각 글꼴     — 윈도우·안드로이드는 본 글자만
     ③ Pretendard        — 둘 다 안 될 때 (테마가 이미 불러오고 있습니다)
   ※ @import 는 반드시 다른 규칙보다 먼저 와야 합니다. 순서를 바꾸지 마십시오. */
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/subsets/AppleSDGothicNeo-dynamic-subset.css");

@font-face{ font-family:'ASGN-System'; font-weight:200;
  src:local('Apple SD Gothic Neo UltraLight'), local('AppleSDGothicNeo-UltraLight'); }
@font-face{ font-family:'ASGN-System'; font-weight:300;
  src:local('Apple SD Gothic Neo Light'), local('AppleSDGothicNeo-Light'); }
@font-face{ font-family:'ASGN-System'; font-weight:400;
  src:local('Apple SD Gothic Neo Regular'), local('AppleSDGothicNeo-Regular'); }
@font-face{ font-family:'ASGN-System'; font-weight:500;
  src:local('Apple SD Gothic Neo Medium'), local('AppleSDGothicNeo-Medium'); }
@font-face{ font-family:'ASGN-System'; font-weight:600;
  src:local('Apple SD Gothic Neo SemiBold'), local('AppleSDGothicNeo-SemiBold'); }

/* ══════════════════════════════════════════════════════════════════════════
   값 모음  —  ★ 여기만 고치시면 됩니다
   (1rem = 10px 입니다. 1.5rem = 15px)
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 본문 글꼴 — 한글은 애플 산돌고딕, 영문과 숫자는 Jost.
     ★ Jost 를 «맨 앞» 에 둡니다.
       Jost 에는 한글 글자가 없어서, 앞에 두어도 한글은 저절로 다음 글꼴로 넘어갑니다.
       브라우저가 글자마다 알아서 갈라 줍니다.
         영문·숫자 → Jost
         한글      → 애플 산돌고딕 Neo
     ★ 영문도 애플고딕으로 쓰시려면 맨 앞의 'Jost', 만 지우십시오. */
  --kk-sans:'Jost','ASGN-System','Apple SD Gothic Neo','Pretendard Variable',Pretendard,
            system-ui,sans-serif;

  --kk-fs:1.5rem;       /* 본문 글자 크기   (테마 기본 1.6rem) */
  --kk-lh:1.6;         /* 본문 줄간격      (테마 기본 2.0) */
  --kk-w:300;           /* 본문 굵기 — 가는 고딕 */
  --kk-gap:3.2rem;      /* 조와 조 사이     (테마 기본 5.6rem) */
  --kk-td:1rem;         /* 표 칸 위아래 여백 (테마 기본 1.6rem) */
  --kk-td-lh:1.55;      /* 표 안 줄간격     (테마 기본 1.7) */

  --kk-par-fs:.9em;     /* 명조 괄호 크기 — 고딕과 높이 맞추기 */
  --kk-pin-w:300;       /* 괄호 안 글자 굵기 — '제1조' 는 600, '(목적)' 은 가늘게 */
  --kk-serif-ls:-.075em;/* 명조 글자의 자간 */

  --kk-bar:var(--point-color);      /* 조 제목 앞 세로바 */
  --kk-num:var(--primary-color);    /* 항 번호 */

  /* ── 도서 목록·상세에서 쓰는 값 ─────────────────────────────────────────
     ★ 한 줄에 몇 권을 놓을지는 --cols 세 줄로 정합니다. */
  --cols:5;             /* 데스크톱 — 한 줄에 몇 권 */
  --cols-md:4;          /* 태블릿 */
  --cols-sm:2;          /* 휴대폰 */

  --bk-cover-h:26rem;   /* 목록의 표지 높이 — 가로는 비율대로 따라옵니다 */
  --bk-fs:1.4rem;       /* 도서명 글자 크기 */
  --bk-pad:1.2rem;      /* 표지와 도서명 사이 */

  /* 서점 단추 — 서점 브랜드색을 쓰지 않고 사이트 톤으로 통일합니다 */
  --btn-bg:transparent;
  --btn-fg:var(--point-color);
  --btn-bd:var(--point-color);

  --rule:var(--body-color);         /* 굵은 구분선 */
  --bg-tint:var(--lightgray-color); /* 옅은 바탕 */
}

/* ══════════════════════════════════════════════════════════════════════════
   머리말 로고
   --------------------------------------------------------------------------
   테마 원본은 가로로 긴 글자 로고(210 x 40px)를 전제로 만들어져 있습니다.
   끌림 로고는 글자 없는 심볼이고 비율이 1.232 : 1 이라 자리를 다시 잡았습니다.

   ★ 크기를 바꾸시려면 아래 --kk-logo-h 한 줄만 고치십시오.
     가로폭은 비율대로 저절로 따라옵니다. 로고가 눌리거나 늘어나지 않습니다.

   ※ style.css 를 고치지 않고 여기서 덮어썼습니다.
     나중에 테마를 새로 받으셔도 이 파일만 다시 얹으면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 맨 위에서 — 로고를 크게 보여 줍니다 */
  --kk-logo-h:60px;                          /* 로고 높이 */
  --kk-logo-w:calc(var(--kk-logo-h) * 1.232);/* 가로폭 — 비율대로 자동 */
  --kk-hd-h:100px;                           /* 머리말 높이 (로고의 약 1.7배) */

  /* 스크롤한 뒤 — 읽는 동안은 얇게
     ★ 머리말이 화면에 붙어 다니므로(position:fixed) 100px 이 계속 자리를 먹습니다.
       노트북(세로 768px)에서는 화면의 13%입니다.
       그래서 맨 위에서만 크게 보여 주고, 내리면 줄입니다. */
  --kk-logo-h-scr:46px;
  --kk-hd-h-scr:78px;
}

/* 로고 자리 — 가로폭을 로고에 맞춰 좁힙니다.
   원본은 210px 이라 심볼 오른쪽에 160px 이 비어 보입니다. */
#header h1 a{
  width:var(--kk-logo-w);
  height:var(--kk-logo-h);
  background-size:contain;
  background-position:left center;
}
#header h1{
  min-width:var(--kk-logo-w);
  height:var(--kk-hd-h);
}

/* 머리말 높이 — 로고 높이에서 뽑아 씁니다 */
#header .hd_wrap,
#header.on .hd_wrap{ height:var(--kk-hd-h); transition:height .24s ease; }
#header h1 a{ transition:width .24s ease, height .24s ease; }

/* 스크롤하면 (custom.js 가 .scr 를 붙입니다)
   ※ 테마 원본은 이 효과를 좁은 화면에서만 켜 두었습니다.
     여기 규칙은 미디어쿼리 밖이라 데스크톱에서도 동작합니다. */
#header.scr .hd_wrap{ height:var(--kk-hd-h-scr); }
#header.scr h1{ height:var(--kk-hd-h-scr); }
#header.scr h1 a{
  height:var(--kk-logo-h-scr);
  width:calc(var(--kk-logo-h-scr) * 1.232);
}

/* 움직임을 꺼 두신 분에게는 전환 없이 */
@media (prefers-reduced-motion:reduce){
  #header .hd_wrap, #header h1 a{ transition:none; }
}

/* 꼬리말 로고
   ★ 우리 SVG 에는 width/height 가 없고 viewBox 만 있습니다.
     크기를 정해 주지 않으면 브라우저가 300 x 150px 로 늘려 버립니다. */
#footer .f_logo img{
  display:block;
  height:var(--kk-logo-h-ft);
  width:calc(var(--kk-logo-h-ft) * 1.232);
}

:root{ --kk-logo-h-ft:44px; }   /* 꼬리말 로고 높이 — 머리말(52px)보다 조금 작게 */

/* 좁은 화면 — 머리말이 화면을 많이 먹지 않게 한 단계 줄입니다.
   ★ 데스크톱과 같게 두시려면 아래 :root 줄을 지우십시오. */
@media (max-width:1024px){
  :root{ --kk-logo-h:44px; --kk-hd-h:72px; --kk-logo-h-scr:36px; --kk-hd-h-scr:62px; --kk-logo-h-ft:38px; }
  #header .hd_wrap, #header.on .hd_wrap{ height:var(--kk-hd-h); }
}

/* ══════════════════════════════════════════════════════════════════════════
   꼬리말 라벨
   --------------------------------------------------------------------------
   「Contact」「Quick Link」는 테마가 원래 쓰던 영문 라벨입니다.
   Jost 서체에 대문자로 나옵니다. 글자가 아니라 장식에 가까운 자리입니다.

   테마 원본에는 자간이 없는데, 대문자 영문은 조금 벌려야 답답해 보이지 않습니다.
   테마가 다른 곳(표 제목)에서 0.2em 을 쓰고 있어 그보다 조금 좁게 맞췄습니다.

   ★ 우리말로 바꾸시려면 tail.php 의 <h3> 글자를 바꾸시고,
     아래 규칙을 이렇게 고치십시오.
       font-family:var(--kk-sans); text-transform:none; letter-spacing:.06em;
     (Jost 에는 한글이 없어 그대로 두면 다른 글꼴로 떨어집니다)
   ══════════════════════════════════════════════════════════════════════════ */
#footer .col h3{
  letter-spacing:.16em;
}

/* ══════════════════════════════════════════════════════════════════════════
   장식 글꼴(Jost)이 걸린 자리 정리
   --------------------------------------------------------------------------
   테마는 「Contact」 「Quick Link」 같은 영문 라벨에 Jost 를 씁니다.
   그 값(--eng-font)은 그대로 두었습니다. 테마의 얼굴이라 건드리지 않습니다.

   ★ 다만 Jost 가 걸린 21곳 가운데 «한글이 들어가는 자리»가 있습니다.
     주메뉴 · 빵부스러기 · 단추 · 표 제목이 그렇습니다.
     Jost 에는 한글이 없어서 그 자리들이 Pretendard 로 떨어집니다.
     그러면 한 화면에 애플고딕·Jost·Pretendard 세 글꼴이 섞입니다.

     그래서 «한글이 들어가는 자리만» 본문 글꼴로 돌려놓습니다.
     영문만 들어가는 자리(Contact · 전화번호 · 쪽번호)는 Jost 그대로입니다.

   ※ 테마 원래 모습대로 두시려면 아래 규칙을 통째로 지우십시오.
   ══════════════════════════════════════════════════════════════════════════ */

/* 한글이 들어가는 자리 → 본문 글꼴 */
#header .gnb > ul > li > a,      /* 주메뉴 — 출판사 소개 · 도서 · 책 만들기 … */
.sub_nav .navigation,            /* 빵부스러기 */
.accent_btn, .default_btn,       /* 단추 — 자세히 보기 · 문의하기 … */
.line_btn, .icon_btn,
.sub_content .table th,          /* 테마 표의 제목칸 */
.fo_wrap .input .tit,            /* 폼 항목 이름 */
#header .tel{                    /* 「전화문의」 — 뒤의 번호는 아래에서 Jost 로 */
  font-family:var(--kk-sans);
}

/* 영문·숫자만 들어가는 자리 → Jost 그대로 (테마 원래 모습) */
#footer .col h3,                 /* Contact · Quick Link */
#footer .ft_cs .call,            /* 전화번호 */
#footer .ft_bar address,         /* Copyright */
#header .tel strong,             /* 전화번호 */
.pg_current,                     /* 쪽번호 */
.title em,                       /* 단락 위 영문 라벨 */
.design{
  font-family:var(--eng-font);
}

/* ══════════════════════════════════════════════════════════════════════════
   머리말의 로그인·회원가입
   --------------------------------------------------------------------------
   테마 원본은 아이콘만 두었습니다. 무엇을 누르는 것인지 알기 어렵고,
   화면 읽어 주는 프로그램에는 아무것도 들리지 않습니다. 글자로 바꿨습니다.

   회원가입은 한 단계 또렷하게 둡니다. 처음 오신 분에게 보이는 문입니다.
   ══════════════════════════════════════════════════════════════════════════ */
#header .adm{ gap:0; }
#header .adm a{ letter-spacing:-.02em; }

/* 두 링크 사이의 세로선.
   ★ 선 «왼쪽»은 앞 링크의 오른쪽 여백, «오른쪽»은 뒤 링크의 왼쪽 여백입니다.
     둘을 같게 두어야 선이 가운데에 놓입니다.
     전에는 오른쪽만 1rem 이라 선이 「로그인」에 붙어 보였습니다. */
#header .adm a + a{ position:relative; padding-left:1.2rem; margin-left:1.2rem; }
#header .adm a + a::before{
  content:""; position:absolute; top:50%;
  /* ★ left:0 이 «가운데» 입니다.
       로그인 글자 끝 → margin 12px → 여기(링크 왼쪽 끝) → padding 12px → 회원가입 글자
       좌우가 각 12px 이라 이 자리가 한가운데입니다.
       -1.2rem 으로 두면 margin 의 «시작» 이라 「로그인」에 붙습니다. */
  left:0;
  width:1px; height:1.1rem; margin-top:-.55rem;
  background:currentColor; opacity:.28;
}
#header .adm a.join{ font-weight:500; }

/* 좁은 화면 — 메뉴 안으로 들어가면 세로선을 지웁니다.
   위아래로 쌓이므로 선이 있으면 오히려 어수선합니다. */
@media (max-width:1024px){
  #header .adm{ gap:1.6rem; }
  #header .adm a + a{ padding-left:0; margin-left:0; }
  #header .adm a + a::before{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   사이트 전체 글꼴
   --------------------------------------------------------------------------
   테마 기본은 Pretendard 입니다 (lib/css/fonts.css).
   이 파일이 그 뒤에 실려 애플 산돌고딕 Neo 로 덮어씁니다.

   ★ 되돌리시려면 아래 body 규칙 세 줄을 지우십시오.
     그러면 약관·방침 본문만 애플고딕이 되고 나머지는 Pretendard 로 돌아갑니다.

   ※ 영문 라벨(--eng-font, Jost)과 명조 제목(--serif-font)은 그대로 둡니다.
     그 둘은 일부러 다른 글꼴을 쓰는 자리입니다.
   ══════════════════════════════════════════════════════════════════════════ */
body{
  font-family:var(--kk-sans);
}

/* ══════════════════════════════════════════════════════════════════════════
   본문
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc{
  font-family:var(--kk-sans);
  font-size:var(--kk-fs);
  font-weight:var(--kk-w);
  line-height:var(--kk-lh);
  color:var(--text-color);
}

/* 설명 글은 모두 가는 고딕입니다.
   제목(h3.chap · h4)과 표 제목만 굵기와 글꼴이 다릅니다. */
.kk-doc p,
.kk-doc li,
.kk-doc dd,
.kk-doc td{ font-family:var(--kk-sans); font-weight:var(--kk-w); }

.kk-doc .cont{ margin-bottom:var(--kk-gap); }
.kk-doc .cont:last-child{ margin-bottom:0; }

.kk-doc p{ margin-bottom:.8rem; }
.kk-doc p:last-child{ margin-bottom:0; }

/* 첫 문단 — 크기만 키우고 글꼴과 굵기는 본문과 같습니다 */
.kk-doc .lead{ font-size:1.9rem; line-height:1.6; letter-spacing:-.03em;
  color:var(--body-color); margin-bottom:2.8rem; }

/* 강조 — 본문보다 한 단계만 굵게. 검게 만들지 않습니다 */
.kk-doc strong{ font-weight:500; color:var(--body-color); }

/* ══════════════════════════════════════════════════════════════════════════
   제목
   ══════════════════════════════════════════════════════════════════════════ */

/* 장 제목 — 약관에만 있습니다. 명조를 남겨 큰 마디를 짚어 줍니다 */
.kk-doc h3.chap{ margin:4rem 0 2rem; padding-bottom:1.2rem;
  border-bottom:1px solid var(--primary-color);
  font-family:var(--serif-font); font-size:2rem; font-weight:400;
  letter-spacing:var(--kk-serif-ls); color:var(--body-color); }
/* ★ 장 제목도 같은 이유로 :first-child 로 둡니다.
     :first-of-type 은 앞에 무엇이 있든 첫 h3 에 걸립니다. */
.kk-doc h3.chap:first-child{ margin-top:0; }
.mtext h3.chap:first-child{ margin-top:0; }

/* 조 제목 — 고딕. 고딕은 명조보다 자간을 좁혀야 헐거워 보이지 않습니다 */
.kk-doc h4{ position:relative; margin-bottom:1.2rem; padding-left:1.6rem;
  font-family:var(--kk-sans); font-size:1.7rem; font-weight:600;
  letter-spacing:-.045em; line-height:1.45; color:var(--body-color); }
.kk-doc h4::before{ content:""; position:absolute; top:.5rem; bottom:.5rem; left:0;
  width:2px; background:var(--kk-bar); }

/* 조 제목의 괄호 — 고딕 괄호는 크고 벌어져 보여 명조로 바꿉니다.
   ★ 괄호 안의 글자까지 명조로 하시려면 아래 .pin 규칙의 주석을 푸십시오. */
.kk-doc h4 .par{ font-family:var(--serif-font); font-style:normal; font-weight:400;
  font-size:var(--kk-par-fs); letter-spacing:var(--kk-serif-ls); }
/* 괄호 안의 글자 — '제1조' 는 굵고 '(목적)' 은 가늡니다.
   번호는 표시이고 그 안은 이름이라, 굵기로 층을 나눕니다. */
.kk-doc h4 .pin{ font-style:normal; font-weight:var(--kk-pin-w); }
/* .kk-doc h4 .pin{ font-family:var(--serif-font); font-weight:var(--kk-pin-w);
     font-size:var(--kk-par-fs); letter-spacing:var(--kk-serif-ls); } */

/* 조 안의 작은 제목 */
.kk-doc h5{ margin:1.6rem 0 .5rem; font-family:var(--kk-sans);
  font-size:var(--kk-fs); font-weight:500; color:var(--body-color); }

/* ══════════════════════════════════════════════════════════════════════════
   항 번호
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc ol{ counter-reset:kk; margin:.5rem 0 .8rem; }
.kk-doc ol > li{ position:relative; counter-increment:kk; padding-left:2.4rem;
  margin-bottom:.5rem; color:var(--muted-color); }
.kk-doc ol > li::before{ content:counter(kk) "."; position:absolute; left:0; top:0;
  color:var(--kk-num); font-family:var(--eng-font); font-weight:400; }
.kk-doc ol ol{ margin:.5rem 0 0; counter-reset:kk2; }
.kk-doc ol ol > li{ counter-increment:kk2; margin-bottom:.3rem; }
.kk-doc ol ol > li::before{ content:counter(kk2, lower-roman) "."; }

/* 글머리표 목록 */
.kk-doc ul.dot{ margin:.5rem 0 .8rem; }
.kk-doc ul.dot > li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem;
  color:var(--muted-color); }
.kk-doc ul.dot > li::before{ content:""; position:absolute; left:0; top:1.1rem;
  width:.5rem; height:1px; background:var(--darkgray-color); }

/* ══════════════════════════════════════════════════════════════════════════
   표
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc table.tbl{ width:100%; border-collapse:collapse; margin:1.2rem 0 1.8rem;
  border-top:1px solid var(--primary-color); border-bottom:1px solid var(--line-color);
  font-size:1.4rem; font-variant-numeric:tabular-nums; }
.kk-doc table.tbl th, .kk-doc table.tbl td{
  padding:var(--kk-td) 1.2rem; border-bottom:1px solid var(--line-color);
  border-left:1px solid var(--line-color); text-align:left; vertical-align:top;
  line-height:var(--kk-td-lh); }
.kk-doc table.tbl td{ font-weight:var(--kk-w); }
.kk-doc table.tbl th:first-child, .kk-doc table.tbl td:first-child{ border-left:0; padding-left:0; }
.kk-doc table.tbl td:last-child{ padding-right:0; }

/* 표 머리줄과 왼쪽 항목 이름 — 둘 다 '제목' 이라 같은 글꼴을 씁니다 */
.kk-doc table.tbl thead th{ text-align:center; font-family:var(--kk-sans);
  font-weight:600; letter-spacing:-.03em; color:var(--body-color);
  background:var(--lightgray-color); border-bottom:1px solid var(--primary-color);
  padding-top:.8rem; padding-bottom:.8rem; }
.kk-doc table.tbl tbody th{ width:16rem; font-family:var(--kk-sans);
  font-weight:500; letter-spacing:-.03em; color:var(--body-color); word-break:keep-all; }
.kk-doc table.tbl tbody tr:last-child th,
.kk-doc table.tbl tbody tr:last-child td{ border-bottom:0; }

/* ══════════════════════════════════════════════════════════════════════════
   꼭 봐야 할 한 줄
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc .callout{ margin:1.4rem 0 1.8rem; padding:1.4rem 1.8rem;
  background:var(--lightgray-color); border-left:2px solid var(--kk-bar);
  color:var(--text-color); }

/* 아주 작은 덧말 */
.kk-doc .fine{ font-size:1.3rem; color:var(--darkgray-color); }

/* ══════════════════════════════════════════════════════════════════════════
   테마가 그리는 명조 요소
   화면 위쪽 페이지 제목 등은 테마가 그립니다. 기본 자간이 -0.025em 이라
   본문의 명조보다 헐거워 보여 같은 자간으로 맞춥니다.
   ※ 테마 원래 모습대로 두시려면 아래 세 줄을 지우십시오.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_title .title h2,
.sub_content .page_title h3 strong,
.sub_content .sub_title_tit{ letter-spacing:var(--kk-serif-ls); }

/* ══════════════════════════════════════════════════════════════════════════
   좁은 화면
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .kk-doc{ --kk-gap:2.6rem; --kk-td:.8rem; }

  /* 표를 세로로 풉니다. 칸 너비를 억지로 유지하면 글자가 한 자씩 끊깁니다 */
  .kk-doc table.tbl thead{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); }
  .kk-doc table.tbl tbody tr{ display:block; padding:1.2rem 0;
    border-bottom:1px solid var(--line-color); }
  .kk-doc table.tbl tbody th, .kk-doc table.tbl tbody td{
    display:block; width:auto; border:0; padding:0; }
  .kk-doc table.tbl tbody th{ margin-bottom:.4rem; }
  .kk-doc table.tbl tbody th br{ display:none; }
  .kk-doc table.tbl tbody td{ padding-left:1.2rem; position:relative; margin-top:.3rem; }
  .kk-doc table.tbl tbody td::before{ content:""; position:absolute; left:0; top:1rem;
    width:.6rem; height:1px; background:var(--darkgray-color); }
}

/* ══════════════════════════════════════════════════════════════════════════
   안내 페이지 (인사말 · 출판 방향 · 출판 안내 · 기획/자비/동인지/집필 · 오시는 길)
   --------------------------------------------------------------------------
   약관·방침과 같은 .kk-doc 안에서 씁니다. 아래는 그 페이지들에만 나오는 모양입니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 첫 문장 — 페이지의 시각적 중심 */
.kk-doc .opening{
  font-family:var(--serif-font);
  font-size:clamp(2.2rem,3.4vw,3.2rem);
  font-weight:400; line-height:1.62;
  letter-spacing:var(--kk-serif-ls);
  color:var(--body-color);
  margin:0 0 clamp(3.2rem,4vw,4.8rem);
}

/* 소제목 */
.kk-doc .sub-h{
  margin:3.6rem 0 1.2rem; padding-bottom:1rem;
  border-bottom:1px solid var(--line-color);
  font-family:var(--kk-sans); font-size:1.7rem; font-weight:600;
  letter-spacing:-.045em; color:var(--body-color);
}
/* ★ 소제목이 «맨 처음» 일 때만 위 여백을 없앱니다.
     전에는 :first-of-type 이었는데, 그것은 «앞에 무엇이 있든» 첫 h2 에 걸립니다.
     그래서 첫 문단 뒤에 오는 소제목까지 위 여백이 0 이 되어 윗글에 붙어 있었습니다. */
.kk-doc .sub-h:first-child{ margin-top:0; }

/* 소제목 아래 한 번 더 나눌 때 */
.kk-doc .mini-h{ margin:2rem 0 .6rem; font-weight:500; color:var(--body-color); }

/* 서명 */
.kk-doc .sign{ margin-top:clamp(3.2rem,4vw,4.8rem); font-weight:500;
  color:var(--body-color); }

/* --- 출판 방향의 다섯 항목 -------------------------------------------------
   ※ 요구사항: 카드나 아이콘 박스로 나누지 말고
     「가로 구분선 하나로만 나눈 세로 흐름」으로 둘 것. 선을 지우지 마십시오. */
.kk-doc .direction-lead{
  font-family:var(--serif-font); font-size:clamp(1.9rem,2.8vw,2.6rem);
  font-weight:400; line-height:1.62; letter-spacing:var(--kk-serif-ls);
  color:var(--body-color); margin:0 0 clamp(2.8rem,3.6vw,4rem);
}
.kk-doc .creed{ border-top:1px solid var(--line-color); }
.kk-doc .creed > div{ padding:clamp(2.4rem,3vw,3.2rem) 0;
  border-bottom:1px solid var(--line-color); }
.kk-doc .creed h2{ font-size:1.8rem; font-weight:600; letter-spacing:-.045em;
  margin:0 0 1rem; color:var(--body-color); }
.kk-doc .creed h2 em{ font-style:normal; color:var(--point-color); margin-right:1rem; }
.kk-doc .creed p{ margin:0; }
.kk-doc .closing{
  font-family:var(--serif-font); font-size:clamp(1.8rem,2.4vw,2.2rem);
  font-weight:400; line-height:1.62; letter-spacing:var(--kk-serif-ls);
  color:var(--body-color); padding:clamp(3.2rem,4vw,4.4rem) 0 0;
}

/* --- 출판 안내의 갈래 카드 ------------------------------------------------- */
.kk-doc .road-label{ margin:3.2rem 0 1rem; font-size:1.3rem; font-weight:500;
  letter-spacing:.04em; color:var(--darkgray-color); }
.kk-doc .road{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.kk-doc .road.one{ grid-template-columns:1fr; }
.kk-doc .road-card{ display:block; padding:2.4rem; border:1px solid var(--line-color);
  background:#fff; transition:border-color .18s ease, transform .18s ease; }
.kk-doc .road-card:hover{ border-color:var(--point-color); transform:translateY(-2px); }
.kk-doc .road-card b{ display:block; font-size:1.7rem; font-weight:600;
  letter-spacing:-.045em; color:var(--body-color); margin-bottom:.8rem; }
.kk-doc .road-card span{ display:block; color:var(--muted-color); }
.kk-doc .road-card em{ display:block; margin-top:1.4rem; font-style:normal;
  font-size:1.3rem; font-weight:500; color:var(--point-color); }

/* --- 목록 ------------------------------------------------------------------ */
.kk-doc .do-list{ margin:.6rem 0 1.2rem; padding:0; list-style:none; }
.kk-doc .do-list > li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem;
  color:var(--muted-color); }
.kk-doc .do-list > li::before{ content:""; position:absolute; left:0; top:1.2rem;
  width:.6rem; height:1px; background:var(--darkgray-color); }
.kk-doc .steps{ counter-reset:st; margin:.6rem 0 1.2rem; padding:0; list-style:none; }
.kk-doc .steps > li{ position:relative; counter-increment:st; padding-left:2.8rem;
  margin-bottom:.8rem; color:var(--muted-color); }
.kk-doc .steps > li::before{ content:counter(st); position:absolute; left:0; top:0;
  width:2rem; text-align:center; font-family:var(--eng-font); font-weight:500;
  color:var(--point-color); }

/* --- 단추 줄 --------------------------------------------------------------- */
.kk-doc .ask-row{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  margin:2.4rem 0 1rem; }

/* ── 단추 ────────────────────────────────────────────────────────────────
   ★ inline-flex 로 «가로·세로 모두» 가운데 놓습니다.

   전에는 inline-block 에 위아래 여백을 같게 주어 «우연히» 가운데로 보였습니다.
   그러면 줄간격 값(--kk-lh)을 바꾸시는 순간 글자가 위나 아래로 쏠립니다.
   테마의 자체 단추(.accent_btn)도 같은 방식을 씁니다.

   ★ 글자가 두 줄이 되어도 가운데에 머뭅니다.
   ★ min-height 4.4rem 은 손가락으로 누르기 좋은 최소 크기입니다. */
.kk-doc .btn,
.kk-doc .btn-txt,
.mtext .btn,
.mtext .btn-txt{
  display:inline-flex;
  align-items:center;        /* 세로 가운데 */
  justify-content:center;    /* 가로 가운데 */
  min-height:4.4rem;
  line-height:1.4;
  text-align:center;
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:-.02em;
  word-break:keep-all;
}

.kk-doc .btn,
.mtext .btn{
  padding:.8rem 2.4rem;
  background:var(--point-color);
  color:#fff;
  transition:background .18s ease;
}
.kk-doc .btn:hover,
.mtext .btn:hover{ background:var(--point-dark); }

/* 글자만 있는 단추 — 밑줄은 글자 아래에 붙어야 하므로 상자 테두리를 쓰지 않습니다 */
.kk-doc .btn-txt,
.mtext .btn-txt{
  padding:.8rem 0;
  color:var(--point-color);
  text-decoration:none;
  text-underline-offset:.4rem;
}
.kk-doc .btn-txt:hover,
.mtext .btn-txt:hover{ text-decoration:underline; text-decoration-thickness:1px; }

/* 키보드로 이동하셨을 때 */
.kk-doc .btn:focus-visible,
.kk-doc .btn-txt:focus-visible,
.mtext .btn:focus-visible,
.mtext .btn-txt:focus-visible{
  outline:2px solid var(--point-color); outline-offset:3px;
}
.kk-doc .ask-etc{ font-size:1.3rem; color:var(--muted-color); }
.kk-doc .ask-etc a{ color:var(--body-color); border-bottom:1px solid var(--line-color); }

/* --- 지도 자리 ------------------------------------------------------------- */
.kk-doc .map-box{ margin:1.6rem 0 2.4rem; border:1px solid var(--line-color); line-height:0; }
.kk-doc .map-box iframe{ width:100%; height:clamp(24rem,38vw,38rem); border:0; display:block; }

/* --- 3열 비교표 ------------------------------------------------------------ */
.kk-doc table.cmp3 tbody th{ width:14rem; }

@media (max-width:768px){
  .kk-doc .road{ grid-template-columns:1fr; }
  .kk-doc .ask-row{ gap:1.2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   표지 — 메인 화면의 사진 자리를 채웁니다
   --------------------------------------------------------------------------
   ★ 표지를 «자르지 않습니다».
     판형이 책마다 다릅니다. 시집은 홀쭉하고 단행본은 넓적합니다.
     높이만 맞추고 가로는 비율대로 두면, 실제 서가처럼 판형 차이가 그대로 드러납니다.
     잘라서 맞추면 그 차이가 사라지고 시집 표지는 위아래가 잘려 나갑니다.

   ★ 책이 없을 때
     깨진 그림 대신 회색 「표지 자리」가 나옵니다.
     책을 올리시면 그 자리가 저절로 채워집니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-cover-lg:32rem;   /* 크게 — 히어로·대표 도서 */
  --kk-cover-md:20rem;   /* 보통 — 나란히 놓기 */
  --kk-cover-sm:13rem;   /* 작게 — 여러 권 */
}

.kk-cover{ display:block; height:var(--kk-cover-md); width:auto;
  background:var(--lightgray-color); }
.kk-cover-lg{ height:var(--kk-cover-lg); }
.kk-cover-sm{ height:var(--kk-cover-sm); }

.kk-cover img{ display:block; height:100%; width:auto;   /* ← 자르지 않습니다 */
  box-shadow:0 1px 0 rgba(32,32,32,.10); transition:transform .18s ease; }
a.kk-cover:hover img{ transform:translateY(-3px); }

/* 책이 없을 때 / 표지를 안 올리셨을 때 */
.kk-cover.is-empty, .kk-cover.is-noimg{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/4; width:auto; padding:1.2rem;
  border:1px solid var(--line-color); background:var(--lightgray-color);
  text-align:center; }
.kk-cover.is-empty em, .kk-cover.is-noimg em{
  font-style:normal; font-size:1.2rem; font-weight:400; line-height:1.6;
  color:var(--darkgray-color); }
.kk-cover.is-noimg em{ color:var(--muted-color); }

/* 여러 권 나란히 — 바닥선을 맞춰 서가처럼 보이게 합니다 */
.kk-shelf{ display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(1.2rem,2vw,2.4rem); flex-wrap:wrap; }
.kk-shelf-item{ display:flex; flex-direction:column; align-items:center; }
.kk-shelf-meta{ margin:1rem 0 0; text-align:center; font-size:1.3rem; line-height:1.6; }
.kk-shelf-meta b{ display:block; font-weight:500; color:var(--body-color); }
.kk-shelf-meta span{ display:block; font-weight:300; color:var(--muted-color); }

@media (max-width:768px){
  :root{ --kk-cover-lg:22rem; --kk-cover-md:15rem; --kk-cover-sm:10rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   메인 — 가로로 긴 배경 자리
   --------------------------------------------------------------------------
   1920 x 970 처럼 가로로 긴 자리에는 책 표지를 넣을 수 없습니다.
   3:4 표지를 그 비율로 자르면 «세로의 38%» 만 남아 띠처럼 보입니다.

   그래서 데모 사진을 걷어내고 먹색 바탕에 글자만 두었습니다.
   ★ 사진을 마련하시면 main_html 안의 background-image 주석을 푸십시오.
     쌓아 놓은 책, 펼친 지면, 활자, 종이의 결 — 직접 찍으신 사진이 가장 좋습니다.
   ══════════════════════════════════════════════════════════════════════════ */
#main_intro .section,
#main_intro .bg,
#main_philosophy{
  background-color:var(--primary-color);
}
#main_intro .bg::after,
#main_philosophy::after{ display:none; }   /* 사진 위에 씌우던 어두운 막 — 필요 없어짐 */

/* ══════════════════════════════════════════════════════════════════════════
   게시판 스킨 — 도서 · 작가의 방 · 문의 접수
   --------------------------------------------------------------------------
   skin/board/kk_book · kk_works · kk_inquiry 가 쓰는 모양입니다.

   ★ 색과 글꼴은 테마 값(var)을 그대로 씁니다.
     테마의 포인트색을 바꾸시면 게시판도 함께 바뀝니다.

   ★ 표지는 자르지 않습니다.
     판형이 책마다 달라서, 높이만 맞추고 가로는 비율대로 둡니다.
   ══════════════════════════════════════════════════════════════════════════ */
small, .fs-small, .book-sub, .news-date, .hero-meta, .spec, .biz, .copy, .count, .detail-crumb, .buy-note, .filter, .lead { font-weight:400; }
.bk-s, .news-d, .biz, .copy, .count, .detail-crumb, .buy-note, .eyebrow, .tag, .field small, .cover-a, .d-series, .flabel { letter-spacing:calc(-.02em + .012em); }
.eyebrow, .d-series, .ms .label { letter-spacing:.14em; }
.cover { position:relative; height:var(--bk-cover-h); aspect-ratio:3/4; background:var(--lightgray-color); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:13% 11%; text-align:center; overflow:hidden; border:1px solid var(--line-color); transition:transform .25s ease; }
.cover-img ~ .cover, .cover-img + .cover { display:none; }
.cover-t { font-family:var(--kk-sans); font-weight:600; font-size:clamp(.75rem,1.05vw,.9375rem); line-height:1.45; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; }
.cover-a { font-size:12px; font-weight:400; color:var(--muted-color); margin-top:auto; padding-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
a:hover .cover { transform:translateY(-3px); }
.shelf { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:0; border-top:1px solid var(--line-color); }
/* 칸 안에서 표지를 아래에 붙이고 가운데로 모읍니다.
   높이는 같고 가로만 다르므로, 이렇게 해야 줄이 반듯해 보입니다. */
.shelf .bk { padding:var(--bk-pad); border-bottom:1px solid var(--line-color); min-width:0; }

/* 표지를 감싸는 칸 — 높이를 붙들어 바닥선을 맞춥니다 */
.bk-cover { display:flex; align-items:flex-end; justify-content:center;
  height:var(--bk-cover-h); }
.bk-cover .cover { display:flex; flex-direction:column; justify-content:center;
  height:100%; aspect-ratio:3/4; }
.bk-cover .cover-t, .bk-cover .cover-a { display:block; }
.shelf .bk:hover { background:var(--lightgray-color); }
.shelf.plain { border-top:0; }
.shelf.plain .bk { border-bottom:0; }
.shelf.plain .bk:hover { background:transparent; }
.bk-info { margin-top:13px; min-width:0; }
.bk-t { font-family:var(--kk-sans); font-weight:600; font-size:var(--bk-fs); line-height:1.45; }
.bk-s { font-size:1.3rem; font-weight:400; color:var(--muted-color); margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; }
.pg-hd { padding:clamp(28px,4vw,44px) 0 0; }
.pg-hd h1 { font-size:clamp(2.4rem,4vw,3.6rem); font-weight:200; font-family:var(--kk-sans); }
.filter { margin-top:22px; border-top:2px solid var(--rule); border-bottom:1px solid var(--line-color); }
.frow { display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:6px 0; }
.frow + .frow { border-top:1px solid var(--line-color); }
.ftab { padding:9px 13px; font-size:.9375rem; font-weight:400; min-height:42px; display:inline-flex; align-items:center; color:var(--muted-color); white-space:nowrap; }
.ftab[aria-current="true"] { color:var(--body-color); font-weight:600; box-shadow:inset 0 -2px 0 var(--body-color); }
.frow.minor { font-size:12px; }
.frow.minor .flabel { color:var(--muted-color); letter-spacing:.06em; padding-right:6px; font-size:12px; }
.frow.minor .ftab { font-size:12px; padding:7px 10px; min-height:36px; }
.fsort { margin-left:auto; display:flex; gap:2px; }
.detail-crumb { font-size:12px; color:var(--muted-color); padding-top:22px; }
.detail { display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr); gap:clamp(26px,3.5vw,52px); padding:26px 0 clamp(2.6rem,3vw,4rem); }
.d-series { display:block; font-size:12px; font-weight:500; letter-spacing:.12em; color:var(--point-color); padding:0; margin-bottom:8px; }
.d-title { font-family:var(--kk-sans); font-weight:200; font-size:clamp(1.5rem,3vw,2.125rem); line-height:1.35; }
.spec { width:100%; border-collapse:collapse; margin-top:22px; font-size:1.4rem; }
.spec th, .spec td { text-align:left; padding:9px 0; border-bottom:1px solid var(--line-color); vertical-align:top; }
.spec th { width:1%; white-space:nowrap; padding-right:20px; font-weight:400; color:var(--muted-color); }
.spec td { font-weight:400; }
.buy { margin-top:26px; padding-top:20px; border-top:2px solid var(--rule); }
.buy h2 { font-size:1rem; font-weight:600; letter-spacing:calc(-.03em + 0em); }
.buy-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.buy-btn { flex:1 1 132px; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:12px 14px; font-size:1.4rem; font-weight:500; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); transition:background .18s,color .18s; }
.buy-btn:hover { background:var(--point-dark); border-color:var(--point-dark); color:#fff; }
.buy-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto; }
.buy-note { font-size:12px; color:var(--muted-color); margin-top:12px; line-height:1.6; }
.d-body { padding-bottom:clamp(2.6rem,3vw,4rem); }
.d-body section { padding:22px 0 26px; }
.d-body h2 { font-size:1.125rem; font-weight:600; letter-spacing:calc(-.03em + 0em); margin-bottom:14px; }
.d-body p { margin:0 0 .9em; max-width:64rem; }
@media (max-width:1024px){
  .shelf { grid-template-columns:repeat(var(--cols-md),1fr); }
  .detail { grid-template-columns:1fr; }
  .d-cover { max-width:210px; }
}
@media (max-width:768px){
  .buy-btn { flex:1 1 100%; }
}
@media (max-width:480px){
  .shelf { grid-template-columns:repeat(var(--cols-sm),1fr); }
  .shelf .bk { padding:16px 7px 18px; }
  .bk-t { font-size:.875rem; }
}
/* ★ 표지를 자르지 않습니다. 높이만 맞추고 가로는 비율대로 둡니다.
   판형이 다른 책들이 «바닥선에 나란히» 서서 실제 서가처럼 보입니다. */
.cover-img { height:var(--bk-cover-h); width:auto; max-width:100%; object-fit:contain;
  background:transparent; border:0; box-shadow:0 1px 0 rgba(32,32,32,.12);
  transition:transform .25s ease; }
a:hover .cover-img { transform:translateY(-3px); }
.d-cover .cover-img { }
.d-cover a:hover .cover-img { transform:none; }
a.ftab { display:inline-flex; align-items:center; }
.ftab[aria-current="true"] { color:var(--body-color); font-weight:600; box-shadow:inset 0 -2px 0 var(--body-color); }
.frow.minor .ftab[aria-current="true"] { color:var(--body-color); box-shadow:inset 0 -1px 0 var(--body-color); }
.detail-crumb a:hover { color:var(--point-color); }
.admin-bar { display:flex; gap:10px; flex-wrap:wrap; padding:32px 0; }
.pg-title { font-family:var(--kk-sans); font-size:clamp(2.4rem,4vw,3.6rem); font-weight:200; padding:clamp(32px,4vw,48px) 0 24px; }
/* ★ 아래 여백을 44px 에서 16px 로 줄입니다.
     단추 줄에도 위 여백이 있어 «두 번 겹쳐» 88px 이 되고 있었습니다. */
/* ★ 선을 긋지 않습니다. 제목과 여백만으로 나뉩니다. */
.wform { border:0; margin:0 0 1.6rem; padding:0; }
/* ★ legend(「진행 정보」)는 «화면에서 숨겨진» 상태입니다.
     테마의 default.css 가 position:absolute · font-size:0 으로 감춰 두었습니다.
     화면 읽어 주는 프로그램에만 들리게 하는 방식입니다.

     그래서 legend 에 여백을 줘도 아무 일이 없었습니다.
     첫 항목이 선에 붙어 보인 까닭입니다.

     다시 보이게 하지 않습니다.
     화면에 이미 「새 진행 등록」 제목이 있어 같은 말이 두 번이 됩니다.
     대신 폼 자체에 위 여백을 줍니다. */
.wform { padding-top:2.8rem; }
.wnote { font-size:1.4rem; color:var(--muted-color); background:var(--bg-tint); padding:16px 18px; line-height:1.65; margin:0 0 24px; }
.wnote code { font-family:var(--kk-sans); font-size:1.3rem; background:var(--white-color); border:1px solid var(--line-color); padding:2px 7px; }
/* ★ 항목 사이에 줄을 긋지 않습니다.
     칸마다 선을 그으면 화면이 «표» 처럼 보여 시끄럽습니다.
     이름(굵은 글씨)과 여백만으로 충분히 나뉩니다. */
.wrow { padding:0 0 2.8rem; }
.wrow label { display:block; font-size:1.4rem; font-weight:600; margin-bottom:8px; }
.wrow .frm_input, .wrow .frm_textarea, .wrow select { width:100%; max-width:640px; }
.wrow .frm_file { font-size:1.4rem; }
.whelp { font-size:1.3rem; color:var(--muted-color); line-height:1.6; margin:8px 0 0; }
.req { font-size:11px; color:var(--point-color); border:1px solid currentColor; padding:1px 6px; margin-left:6px; vertical-align:2px; font-weight:400; }
.works-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--body-color); }
.works-list li { border-bottom:1px solid var(--line-color); }
.works-list a { display:grid; grid-template-columns:70px 1fr auto auto; gap:18px; align-items:baseline; padding:20px 4px; }
.works-list a:hover { background:rgba(244,242,236,.6); }
.works-cat { font-size:1.3rem; color:var(--point-color); letter-spacing:.04em; }
.works-title { font-family:var(--kk-sans); font-weight:600; font-size:1rem; line-height:1.5; }
.works-list a:hover .works-title { text-decoration:underline; text-underline-offset:5px; }
.works-cmt { font-style:normal; font-family:var(--kk-sans); font-size:1.3rem; color:var(--muted-color); margin-left:8px; }
.works-by { font-size:1.4rem; color:var(--muted-color); }
.works-date { font-size:1.3rem; color:var(--muted-color); }
.approve-note { font-size:1.4rem; color:var(--muted-color); line-height:1.65; margin:0; }
.approve-note a { color:var(--point-color); border-bottom:1px solid currentColor; }
.works-search { display:flex; gap:8px; justify-content:center; padding:0 0 clamp(2.6rem,3vw,4rem); }
.works-search input[type=text] { min-height:46px; padding:10px 14px; font:inherit; background:var(--white-color); border:1px solid var(--line-color); width:min(280px,60vw); }
.works-search button { min-height:46px; padding:10px 22px; border:1px solid var(--body-color); font-size:1.4rem; }
.works-search button:hover { background:var(--body-color); color:var(--white-color); }
@media (max-width:768px){
  .works-list a { grid-template-columns:1fr auto; gap:4px 12px; padding:18px 4px; }
  .works-cat { grid-column:1/-1; }
  .works-date { text-align:right; }
}
.works-view { max-width:112rem; }
.works-head { padding:clamp(48px,6vw,80px) 0 0; text-align:center; }
.works-cat-line { font-size:1.3rem; letter-spacing:.16em; color:var(--point-color); margin:0 0 18px; }
.works-view-title { font-family:var(--kk-sans); font-weight:200; font-size:clamp(1.5rem,3vw,2.125rem); line-height:1.4; letter-spacing:calc(-.02em + 0em); }
.works-meta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:1.3rem; color:var(--muted-color); margin:20px 0 0; padding-bottom:20px; }
.works-author { color:var(--body-color); }
.works-body { max-width:64rem; margin:0 auto; padding:clamp(48px,6vw,72px) clamp(1.8rem,2vw,2.4rem); font-weight:300; font-size:1.0625rem; line-height:1.8; word-break:keep-all; }
.works-body p { margin:0 0 1.6em; }
.works-body img { margin:2em auto; }
.works-files { max-width:64rem; margin:0 auto; padding:24px clamp(1.8rem,2vw,2.4rem); border-top:1px solid var(--line-color); font-size:1.4rem; }
.works-files h2 { font-size:1.4rem; color:var(--muted-color); margin-bottom:10px; }
.works-files ul { list-style:none; margin:0; padding:0; }
.works-files a { color:var(--point-color); border-bottom:1px solid var(--line-color); display:inline-block; padding:6px 0; }
.works-files em { font-style:normal; color:var(--muted-color); font-size:1.3rem; }
.works-copyright { max-width:64rem; margin:0 auto; padding:28px clamp(1.8rem,2vw,2.4rem) 0; font-size:1.3rem; color:var(--muted-color); text-align:center; }
.works-nav { display:flex; justify-content:space-between; gap:16px; max-width:64rem; margin:0 auto; padding:40px clamp(1.8rem,2vw,2.4rem) 0; font-size:1.4rem; }
.works-nav a { color:var(--muted-color); padding:10px 0; }
.works-nav a:hover { color:var(--point-color); }
.works-nav .next { margin-left:auto; }
.works-editor { font-family:var(--kk-sans); font-size:1.0625rem; line-height:1.7; }
.room-nav { display:flex; gap:18px; flex-wrap:wrap; margin-top:24px; font-size:1.4rem; }
.room-nav a { color:var(--muted-color); padding:8px 0; border-bottom:1px solid transparent; }
.room-nav a:hover { color:var(--body-color); }
.room-nav a[aria-current="page"] { color:var(--body-color); border-bottom-color:var(--point-color); }
.closed-note { margin-top:20px; padding:14px 18px; background:var(--bg-tint); font-size:1.3rem; color:var(--muted-color); }
.agree-box { background:var(--lightgray-color); padding:16px 18px 6px; margin:0 0 14px; }
.agree-box .cmp { margin:0 0 .6em; border-top:0; }
.agree-box .cmp th, .agree-box .cmp td { border-color:var(--line-color); }
.agree-box .cmp tbody tr:last-child th, .agree-box .cmp tbody tr:last-child td { border-bottom:0; }
.agree-box .fine { margin:0; }
.agree-box .fine a { color:var(--point-color); border-bottom:1px solid var(--line-color); }
.agree-check { display:flex; align-items:flex-start; gap:9px; padding:12px 0; font-size:1.4rem; font-weight:400; cursor:pointer; min-height:44px; }
.agree-check input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--point-color); }
.agree-check b { font-weight:600; }
.room-back { font-size:1.3rem; font-weight:400; color:var(--muted-color); margin:0 0 6px; }
.room-back a:hover { color:var(--point-color); }
.room-sum { font-size:1.4rem; font-weight:400; color:var(--muted-color); margin:8px 0 0; }
a.works-by, a.works-author { border-bottom:1px solid transparent; }
a.works-by:hover, a.works-author:hover { color:var(--point-color); border-bottom-color:var(--point-color); }

/* ══════════════════════════════════════════════════════════════════════════
   화면 옆에 붙는 바로가기 (전화 · 맨 위로)
   --------------------------------------------------------------------------
   _access.tail.side.php 가 그립니다.
   테마 원본 CSS 에서 네이버·카카오 관련 규칙만 빼고 그대로 가져왔습니다.
   (SNS 를 쓰지 않기로 하여 그 두 단추는 마크업에도 없습니다)
   ══════════════════════════════════════════════════════════════════════════ */
#side_lnk { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 100; transform: translate(0, 200%); opacity: 0; visibility: hidden; transition: 0.8s; }
#side_lnk.on { bottom: 1.6rem; transform: translate(0, 0); opacity: 1; visibility: visible; }
#side_lnk .lnk_wrap { display: flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-color); border-radius: 0; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1); padding: 0.8rem; margin-bottom: 0; }
#side_lnk .lnk_wrap > a { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.6rem; border-radius: 0; color: var(--body-color); white-space: nowrap; transition: 0.3s; }
#side_lnk .lnk_wrap > a:hover { background: var(--lightgray-color); color: var(--point-color); }
#side_lnk .lnk_wrap .icon { width: 1.8rem; height: 1.8rem; stroke: var(--body-color); stroke-width: 1.2; }
#side_lnk .lnk_wrap > a span { display: block; font-size: 1.3rem; }
#side_lnk .lnk_wrap > a.d_btn { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; margin-left: 0.4rem; background: var(--primary-color); border-radius: 0; transition: background 0.3s; }
#side_lnk .lnk_wrap > a.d_btn:hover { background: var(--point-color); }
#side_lnk .lnk_wrap > a.d_btn .icon { stroke: var(--white-color); stroke-width: 1.5; }
#side_lnk .lnk_wrap > a.d_tel { display: none; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; background: var(--point-color); border-radius: 0; }
#side_lnk .lnk_wrap > a.d_tel .icon { stroke: var(--white-color); stroke-width: 1.5; }
#side_lnk .lnk_wrap > a:not(.d_tel):not(.d_btn) { display: none; }
#side_lnk .lnk_wrap > a.d_tel { display: flex; }
#side_lnk { left: auto; right: 4rem; bottom: 4rem; transform: translate(0, 200%); }
#side_lnk.on { bottom: 4rem; transform: translate(0, 0); }
#side_lnk .lnk_wrap { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
#side_lnk .lnk_wrap > a:not(.d_btn) { display: none; }
#side_lnk .lnk_wrap > a.d_btn { margin-left: 0; width: 4.8rem; height: 4.8rem; }
#side_lnk .lnk_wrap > a.d_btn .icon { width: 2rem; height: 2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   맨 위로 — 조용하게
   --------------------------------------------------------------------------
   테마 원본은 먹색으로 채운 동그라미였습니다. 화면에 떠 있는 것이라 무겁습니다.
   흰 바탕에 가는 테두리로 바꾸고, 마우스를 올렸을 때만 포인트색이 됩니다.

   ★ 크기를 바꾸시려면 --kk-top-size 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --kk-top-size:4.4rem; }   /* 손가락으로 누르기 좋은 최소 크기입니다 */

#side_lnk{ right:clamp(1.6rem, 2vw, 3.2rem); bottom:clamp(1.6rem, 2vw, 3.2rem); }

#side_lnk .lnk_wrap{ background:none; border:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap:0; }

#side_lnk .lnk_wrap > a.d_btn{
  width:var(--kk-top-size); height:var(--kk-top-size);
  background:rgba(255,255,255,.92);
  border:1px solid var(--line-color);
  border-radius:50%;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
#side_lnk .lnk_wrap > a.d_btn .icon{
  width:1.8rem; height:1.8rem;
  stroke:var(--body-color); stroke-width:1.4;
  transition:stroke .18s ease;
}
#side_lnk .lnk_wrap > a.d_btn:hover{
  background:#fff; border-color:var(--point-color); transform:translateY(-2px);
}
#side_lnk .lnk_wrap > a.d_btn:hover .icon{ stroke:var(--point-color); }

/* 키보드로 이동하셨을 때도 또렷하게 */
#side_lnk .lnk_wrap > a.d_btn:focus-visible{
  outline:2px solid var(--point-color); outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  #side_lnk, #side_lnk .lnk_wrap > a.d_btn{ transition:none; }
  #side_lnk .lnk_wrap > a.d_btn:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   지금 보고 있는 메뉴
   --------------------------------------------------------------------------
   _access.navigation.php 가 aria-current="page" 를 붙입니다.
   방문자가 「내가 지금 어디에 있는지」 알 수 있어야 합니다.

   ★ 색으로만 알리지 않습니다.
     큰 메뉴는 아래 선, 작은 메뉴는 굵기로도 구분합니다.
     색을 못 가리는 분도 알 수 있어야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 큰 메뉴 — 아래에 선이 그어집니다.
   ★ 테마는 이 선을 «width» 로 늘립니다 (transform 이 아닙니다).
     같은 값을 써야 마우스를 올렸을 때와 어긋나지 않습니다. */
#header .gnb > ul > li > a[aria-current="page"]::after{
  width:calc(100% - 4.8rem);
}
#header .gnb > ul > li > a[aria-current="page"]{ font-weight:500; }

/* 작은 메뉴 — 굵기와 색 */
#header .gnb > ul > li ul li a[aria-current="page"]{
  font-weight:500; color:var(--point-color);
}

/* 좁은 화면(펼친 메뉴) 에서도 같게 */
@media (max-width:1024px){
  #header .gnb a[aria-current="page"]{ font-weight:500; color:var(--point-color); }
}



/* ══════════════════════════════════════════════════════════════════════════
   「자세한 안내」 줄 — 여러 갈래를 나란히 놓을 때
   --------------------------------------------------------------------------
   ★ 넷을 «같은 모양» 으로 둡니다.
     하나만 채워진 단추로 두면 「이걸 권합니다」로 읽힙니다.
     끌림은 어느 방식도 권하지 않는다고 글에 써 두었으니 화면도 그래야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc .ask-more{ gap:0 1.6rem; padding-top:1.2rem; border-top:1px solid var(--line-color); }
.kk-doc .ask-more .ask-etc{ font-size:1.3rem; color:var(--darkgray-color); }
.kk-doc .ask-more .btn-txt{ min-height:3.6rem; }

@media (max-width:600px){
  .kk-doc .ask-more{ gap:0 1.2rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   제작 진행 — 저자가 자기 책이 어디까지 왔는지 보는 화면
   --------------------------------------------------------------------------
   ★ 색으로만 알리지 않습니다.
     진행 막대 옆에 「5 / 9 · 편집·교정」 이라는 «글자» 를 함께 둡니다.
     단계 목록에도 「마침」 「진행 중」 이라는 글자를 붙입니다.
     색을 못 가리는 분도 알 수 있어야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 ─────────────────────────────────────────────────────────────── */
.prg-list{ list-style:none; margin:2.4rem 0 0; padding:0;
  border-top:1px solid var(--body-color); }
.prg-item{ border-bottom:1px solid var(--line-color); }
.prg-link{ display:block; padding:2rem 0; transition:background .18s ease; }
.prg-link:hover{ background:var(--lightgray-color); }

.prg-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.prg-title{ font-size:1.7rem; font-weight:600; letter-spacing:-.04em;
  color:var(--body-color); }
.prg-head .tag{ font-size:1.2rem; font-weight:400; color:var(--muted-color);
  border:1px solid var(--line-color); padding:.2rem .8rem; }

/* 진행 막대 */
.prg-bar{ position:relative; height:4px; margin:1.4rem 0 .8rem;
  background:var(--line-color); overflow:hidden; }
.prg-fill{ display:block; height:100%; background:var(--point-color);
  transition:width .4s ease; }

.prg-meta{ display:flex; gap:1.6rem; flex-wrap:wrap;
  font-size:1.3rem; color:var(--muted-color); }
.prg-step{ font-weight:500; color:var(--body-color); }

/* 저자가 하셔야 할 일 — 눈에 띄게 */
.prg-todo{ margin:1.2rem 0 0; padding:1rem 1.4rem;
  background:var(--lightgray-color); border-left:2px solid var(--point-color);
  font-size:1.3rem; color:var(--text-color); }
.prg-todo b{ color:var(--point-color); margin-right:.6rem; }

/* ── 상세: 아홉 단계 ──────────────────────────────────────────────────── */
.prg-spec tbody th{ width:12rem; }

.prg-steps{ list-style:none; margin:1.6rem 0 0; padding:0; }
.prg-step-item{ position:relative; display:flex; gap:1.6rem;
  padding:1.6rem 0; border-bottom:1px solid var(--line-color); }

.prg-num{ flex:0 0 auto; width:3.2rem; height:3.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--eng-font); font-size:1.3rem; font-weight:500;
  border:1px solid var(--line-color); color:var(--darkgray-color);
  background:#fff; }

.prg-body{ min-width:0; }
.prg-body b{ display:block; font-size:1.5rem; font-weight:500;
  color:var(--body-color); margin-bottom:.3rem; }
.prg-body span{ display:block; font-size:1.3rem; color:var(--muted-color);
  line-height:1.6; }

/* 지난 단계 */
.prg-step-item.is-done .prg-num{ background:var(--lightgray-color);
  border-color:var(--line-color); color:var(--muted-color); }
.prg-step-item.is-done .prg-body b{ color:var(--muted-color); }

/* 지금 단계 */
.prg-step-item.is-now{ background:var(--lightgray-color); }
.prg-step-item.is-now .prg-num{ background:var(--point-color);
  border-color:var(--point-color); color:#fff; }
.prg-step-item.is-now .prg-body b{ color:var(--body-color); font-weight:600; }

/* 「마침」 「진행 중」 글자 — 색만으로 알리지 않기 위한 것입니다 */
.prg-state{ margin-left:.8rem; font-size:1.2rem; font-weight:400;
  color:var(--point-color); }
.prg-step-item.is-done .prg-state{ color:var(--darkgray-color); }

/* 아직 오지 않은 단계 */
.prg-step-item.is-wait .prg-body b,
.prg-step-item.is-wait .prg-body span{ color:var(--darkgray-color); }

/* 그동안의 기록 */
/* ★ 기록은 「표지 시안 3종 전달」 같은 «짧은 한 줄» 이 여럿입니다.
     본문 줄간격(1.75)은 긴 글에 맞춘 값이라 여기서는 헐겁습니다.
     줄간격을 1.5 로 줄이고 문단 사이도 좁힙니다. */
.prg-log{ margin-top:1.2rem; font-size:1.4rem; line-height:1.5;
  color:var(--muted-color); }
.prg-log p{ margin:0 0 .4rem; }
.prg-log p:last-child{ margin-bottom:0; }

@media (max-width:600px){
  .prg-step-item{ gap:1.2rem; }
  .prg-num{ width:2.8rem; height:2.8rem; font-size:1.2rem; }
  .prg-spec tbody th{ width:auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   구분 표시 — 세로바
   --------------------------------------------------------------------------
   ★ 가운뎃점(·) 과 세로바(|) 는 하는 일이 다릅니다.
       가운뎃점  대등한 «낱말» 을 잇습니다        편집·교정 · 언론보도·서평
       세로바    다른 «종류» 를 가릅니다          5 / 9 | 편집·교정
     한 줄에 둘이 섞이면 어느 쪽이 무엇인지 알 수 없습니다.

   ★ <i> 태그라 그냥 두면 «기울어져» 나옵니다. 그것부터 풉니다.
   ★ 본문보다 옅게 두어 글자를 방해하지 않게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sep{
  font-style:normal;              /* <i> 의 기울임을 풉니다 */
  /* ★ --line-color(대비 1.3:1)는 «선» 색입니다. 글자에 쓰면 안 보입니다.
       세로바도 «글자» 이므로 읽히는 색을 씁니다. */
  color:var(--darkgray-color);
  margin:0 .25em;
  font-weight:300;
  user-select:none;               /* 글을 복사하실 때 딸려가지 않게 */
}


/* ══════════════════════════════════════════════════════════════════════════
   게시판 스킨의 감싸개
   --------------------------------------------------------------------------
   ★ .ms > .read.mtext 가 게시판 네 개(도서·작가의 방·문의·제작 진행)의
     공통 감싸개입니다. 안내 페이지의 .kk-doc 과 같은 자리를 맡습니다.

   이것이 없으면 글이 «화면 끝까지» 퍼져 한 줄이 너무 길어집니다.
   한 줄이 45자를 넘으면 눈이 다음 줄을 못 찾습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.ms{ padding:clamp(2.8rem,3.6vw,4.8rem) 0 clamp(2.6rem,3vw,4rem); }
.read{ max-width:64rem; margin:0 auto; padding:0 clamp(1.8rem,2vw,2.4rem); }
.mtext{ font-size:var(--kk-fs); line-height:var(--kk-lh); font-weight:var(--kk-w);
  letter-spacing:-.02em; color:var(--text-color); }
.mtext p{ margin:0 0 1.6em; }
.mtext .sub-h:first-child{ margin-top:0; }

/* 목록·상세에서 쓰는 넓은 폭 — 표지가 여럿 늘어서야 하는 화면 */
.ms.wide .read{ max-width:112rem; }

/* 첫 문단 — 안내 한 줄 */
.lead-p{ font-size:var(--kk-fs); color:var(--body-color); margin:0 0 2em; }
.lead-p .fine{ display:block; margin-top:.4rem; }

/* 아무것도 없을 때 */
.empty{ padding:5.6rem 0; text-align:center; color:var(--muted-color);
  border-top:1px solid var(--line-color); }

/* 몇 건인지 */
.total{ font-size:1.3rem; color:var(--muted-color); }

/* 제작 진행의 예정 시기 */
.prg-due{ color:var(--muted-color); }


/* ── 게시판에서 쓰는 나머지 자잘한 것들 ─────────────────────────────────── */

/* 도서·작가의 방의 표시 딱지 */
.tag-new{ color:var(--point-color); border-color:var(--point-color); }
.tag-imp{ color:var(--body-color); border-color:var(--body-color); font-weight:500; }

/* 넓은 감싸개 (목록 화면) */
.wrap{ max-width:112rem; margin:0 auto; padding:0 clamp(1.8rem,2vw,2.4rem); }

/* 글쓰기 폼의 파일 칸 */
.wrow-file{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.wrow-file .frm_file{ flex:1 1 24rem; min-width:0; }

/* 작가의 방 */
.works{ margin-top:2.4rem; }
.works-hit{ font-size:1.2rem; color:var(--darkgray-color); }

/* 앞뒤 글 이동 */
.prev, .next{ color:var(--muted-color); }
.prev:hover, .next:hover{ color:var(--point-color); }

/* 댓글 수 */
.cnt_cmt{ font-size:1.2rem; color:var(--point-color); margin-left:.4rem; }

/* 두 칸 표 */
.two th{ width:32%; }

@media (max-width:600px){
  .two th{ width:auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   제작 진행 — 월별 띠 (누구나 보는 목록)
   --------------------------------------------------------------------------
   달을 왼쪽에 두고, 그 달에 나올 책을 오른쪽에 나열합니다.

   ★ 달력을 쓰지 않는 이유
     한 권에 날짜가 둘뿐이라 달력에 찍으면 칸의 95%가 빕니다.
     띠는 «책이 있는 달만» 나오므로 빈 칸이 없습니다.

   ★ 좁은 화면에서는 달이 위로 올라가고 책이 아래로 쌓입니다.
   ══════════════════════════════════════════════════════════════════════════ */
.band{ border-top:1px solid var(--body-color); margin-top:2.4rem; }

.band-row{ display:flex; gap:2.4rem;
  padding:2rem 0; border-bottom:1px solid var(--line-color); }

/* 달 — 왼쪽에 붙박이로 */
.band-when{ flex:0 0 11rem; padding-top:.2rem;
  font-size:1.4rem; font-weight:500; color:var(--body-color); }

/* 그 달에 나올 책들 */
.band-books{ flex:1; min-width:0;
  display:flex; flex-direction:column; gap:1.6rem; }

.band-item{ display:block; }
.band-item b{ display:block; margin-bottom:.6rem;
  font-size:1.6rem; font-weight:500; letter-spacing:-.03em;
  color:var(--body-color); }
.band-item:hover b{ color:var(--point-color); }

/* 진행 막대 */
.band-bar{ display:block; height:3px; margin-bottom:.5rem;
  background:var(--line-color); overflow:hidden; }
.band-bar i{ display:block; height:100%; background:var(--point-color);
  transition:width .4s ease; }

/* 「5/9 | 편집·교정」 — 색으로만 알리지 않기 위한 글자 */
.band-item em{ font-style:normal; font-size:1.3rem; color:var(--muted-color); }

@media (max-width:640px){
  .band-row{ flex-direction:column; gap:1rem; }
  .band-when{ flex:none; }
}
@media (prefers-reduced-motion:reduce){
  .band-bar i{ transition:none; }
}


/* ── 제작 진행 등록 화면 ─────────────────────────────────────────────────
   ★ 달력 칸(type="date")은 브라우저마다 폭이 제각각입니다.
     그냥 두면 다른 칸과 어긋나 보입니다. */
.wform input[type="date"]{
  width:auto; min-width:18rem; max-width:100%;
  font-family:var(--kk-sans); font-size:1.5rem;
}
/* 달력 아이콘을 누르기 좋게 */
.wform input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; padding:.4rem;
}
.wform input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* 목록에서 고르는 칸 — 고를 수 있다는 것이 보이게 */
.wform input[list]{ background-image:none; }
.wform input[list]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }


/* ── 맨 아래 단추 줄 ─────────────────────────────────────────────────────
   ★ .admin-bar 는 세 곳에서 쓰입니다.
       목록  「새 진행 등록」 + 설명 글   → 왼쪽 그대로
       상세  「고치기·지우기」 + 저자 아이디 → 왼쪽 그대로
       등록  「저장·목록으로」            → 가운데  ← is-center
     설명 글이 붙은 줄까지 가운데로 모으면 글이 붕 떠 보입니다. */
.admin-bar.is-center{
  justify-content:center;
  align-items:center;
  gap:1.6rem;
  /* ★ 선을 긋지 않습니다.
       마지막 입력칸의 아래선과 겹쳐 두 줄로 보였고,
       한 줄만 남겨도 단추가 상자에 갇힌 듯 답답했습니다.
       선 대신 «여백» 으로 나눕니다. 화면이 조용해집니다. */
  padding-top:3.2rem;
}
/* 저장 단추가 조금 더 크게 — 누르실 것이 무엇인지 분명하게 */
.admin-bar.is-center .btn{ min-width:14rem; }

@media (max-width:480px){
  .admin-bar.is-center{ flex-direction:column; gap:.8rem; }
  .admin-bar.is-center .btn{ width:100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   고르는 칸 (select) — 사이트 모양에 맞추기
   --------------------------------------------------------------------------
   ★ 브라우저가 기본으로 그리는 모양은 운영체제마다 다릅니다.
     맥은 둥근 회색 상자, 윈도우는 각진 파란 테두리로 나옵니다.
     사이트와 따로 놉니다.

   ★ appearance:none 으로 그 기본 모양을 지우고 «우리가 직접» 그립니다.
     아래 방향 삼각형도 우리 것으로 바꿉니다. (SVG 를 배경 그림으로)

   ★ 다만 «펼쳐진 목록» 은 브라우저가 그립니다.
     맥과 아이폰에서는 CSS 가 거의 닿지 않습니다. 운영체제가 직접 그리기 때문입니다.
     윈도우·안드로이드에서는 아래 option 규칙이 어느 정도 먹습니다.
     완전히 맞추려면 자바스크립트로 «가짜 목록» 을 만들어야 하는데,
     그러면 키보드와 화면 읽어 주는 프로그램에서 탈이 나기 쉽습니다.
     닫힌 모양을 맞추는 데까지만 하는 편이 낫습니다.

   ★ 색을 바꾸시려면 아래 --kk-sel-arrow 의 stroke 값을 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 아래 방향 삼각형 — 색을 바꾸시려면 stroke='%231c1b19' 부분을 고치십시오 */
  --kk-sel-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231c1b19' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.kk-doc select,
.mtext select,
.wform select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;

  height:4.4rem;                 /* 손가락으로 누르기 좋은 크기 */
  padding:0 4rem 0 1.4rem;       /* 오른쪽은 삼각형 자리 */
  border:1px solid var(--line-color);
  border-radius:0;
  background-color:#fff;
  background-image:var(--kk-sel-arrow);
  background-repeat:no-repeat;
  background-position:right 1.4rem center;
  background-size:12px 8px;

  font-family:var(--kk-sans);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--body-color);
  line-height:1.4;
  cursor:pointer;

  transition:border-color .18s ease, background-color .18s ease;
}

/* 마우스를 올렸을 때 */
.kk-doc select:hover,
.mtext select:hover,
.wform select:hover{ border-color:var(--darkgray-color); }

/* 눌러서 펼쳤을 때 · 키보드로 옮겨 왔을 때 */
.kk-doc select:focus,
.mtext select:focus,
.wform select:focus{
  outline:none;
  border-color:var(--point-color);
  box-shadow:0 0 0 1px var(--point-color);
}
.kk-doc select:focus-visible,
.mtext select:focus-visible,
.wform select:focus-visible{
  outline:2px solid var(--point-color); outline-offset:2px; box-shadow:none;
}

/* 아직 고르지 않았을 때 — 옅게 두어 「비어 있다」가 보이게 */
.wform select:invalid,
.wform select option[value=""]{ color:var(--muted-color); }

/* 펼쳐진 목록 — 윈도우·안드로이드에서만 어느 정도 먹습니다 */
.kk-doc select option,
.mtext select option,
.wform select option{
  background:#fff;
  color:var(--body-color);
  padding:.8rem 1.2rem;
}
.wform select option:checked{ background:var(--lightgray-color); font-weight:500; }

/* 좁은 화면 */
@media (max-width:600px){
  .kk-doc select, .mtext select, .wform select{
    width:100%; max-width:100%; font-size:1.6rem;   /* 아이폰이 확대하지 않는 최소 크기 */
  }
}
@media (prefers-reduced-motion:reduce){
  .kk-doc select, .mtext select, .wform select{ transition:none; }
}


/* ── 선이 두 번 그어지지 않게 ─────────────────────────────────────────────
   .wrow 는 칸마다 아래에 선을 긋고, .admin-bar 는 위에 선을 긋습니다.
   마지막 칸 바로 아래가 단추 줄이라 선이 겹쳐 «두 줄» 로 보였습니다.
   칸 목록이 거기서 끝나므로 마지막 칸의 선을 지웁니다. */
.wform .wrow:last-child{ padding-bottom:0; }

/* 목록에서도 같은 일이 생기지 않게 */
.prg-list .prg-item:last-child{ border-bottom:0; }
.band .band-row:last-child{ border-bottom:0; }

.prg-steps .prg-step-item:last-child{ border-bottom:0; }
.works-list li:last-child{ border-bottom:0; }


/* 단계별 날짜 — 저절로 쌓인 기록 */
.prg-date{ display:block; margin-top:.4rem;
  font-family:var(--eng-font); font-size:1.2rem; letter-spacing:.02em;
  color:var(--darkgray-color); }
.prg-step-item.is-now .prg-date{ color:var(--point-color); font-weight:500; }

/* ══════════════════════════════════════════════════════════════════════════
   게시판 스킨에도 같은 모양을
   --------------------------------------------------------------------------
   안내 페이지는 .kk-doc, 게시판 스킨은 .mtext 를 감싸개로 씁니다.
   아래 것들이 .kk-doc 안에서만 정의되어 있어 게시판에서는 «모양이 없었습니다».
     ask-row   단추 줄        · ask-etc  단추 옆 작은 글
     callout   강조 상자      · do-list  붙임 목록
     tbl       표 (서지정보·진행 정보)

   ★ 원본 규칙은 건드리지 않고 «.mtext 용 복사본» 을 뒤에 붙였습니다.
     원본을 고치려면 규칙 수십 개를 손대야 하고, 하나라도 틀리면
     안내 페이지가 깨집니다.
   ══════════════════════════════════════════════════════════════════════════ */
.mtext table.tbl{width:100%; border-collapse:collapse; margin:1.2rem 0 1.8rem; border-top:1px solid var(--primary-color); border-bottom:1px solid var(--line-color); font-size:1.4rem; font-variant-numeric:tabular-nums;}
.mtext table.tbl th,
.mtext table.tbl td{padding:var(--kk-td) 1.2rem; border-bottom:1px solid var(--line-color); border-left:1px solid var(--line-color); text-align:left; vertical-align:top; line-height:var(--kk-td-lh);}
.mtext table.tbl td{font-weight:var(--kk-w);}
.mtext table.tbl th:first-child,
.mtext table.tbl td:first-child{border-left:0; padding-left:0;}
.mtext table.tbl td:last-child{padding-right:0;}
.mtext table.tbl thead th{text-align:center; font-family:var(--kk-sans); font-weight:600; letter-spacing:-.03em; color:var(--body-color); background:var(--lightgray-color); border-bottom:1px solid var(--primary-color); padding-top:.8rem; padding-bottom:.8rem;}
.mtext table.tbl tbody th{width:16rem; font-family:var(--kk-sans); font-weight:500; letter-spacing:-.03em; color:var(--body-color); word-break:keep-all;}
.mtext table.tbl tbody tr:last-child th,
.mtext table.tbl tbody tr:last-child td{border-bottom:0;}
.mtext .callout{margin:1.4rem 0 1.8rem; padding:1.4rem 1.8rem; background:var(--lightgray-color); border-left:2px solid var(--kk-bar); color:var(--text-color);}
.mtext table.tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.mtext table.tbl tbody tr{display:block; padding:1.2rem 0; border-bottom:1px solid var(--line-color);}
.mtext table.tbl tbody th,
.mtext table.tbl tbody td{display:block; width:auto; border:0; padding:0;}
.mtext table.tbl tbody th{margin-bottom:.4rem;}
.mtext table.tbl tbody th br{display:none;}
.mtext table.tbl tbody td{padding-left:1.2rem; position:relative; margin-top:.3rem;}
.mtext table.tbl tbody td::before{content:""; position:absolute; left:0; top:1rem; width:.6rem; height:1px; background:var(--darkgray-color);}
.mtext .do-list{margin:.6rem 0 1.2rem; padding:0; list-style:none;}
.mtext .do-list > li{position:relative; padding-left:1.4rem; margin-bottom:.6rem; color:var(--muted-color);}
.mtext .do-list > li::before{content:""; position:absolute; left:0; top:1.2rem; width:.6rem; height:1px; background:var(--darkgray-color);}
.mtext .ask-row{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin:2.4rem 0 1rem;}
.mtext .ask-etc{font-size:1.3rem; color:var(--muted-color);}
.mtext .ask-etc a{color:var(--body-color); border-bottom:1px solid var(--line-color);}
.mtext .ask-row{gap:1.2rem;}


/* ── 글자 링크가 나란할 때 ────────────────────────────────────────────────
   .btn-txt 는 좌우 여백이 없습니다. 글자에서 바로 끝납니다.
   그래서 둘이 나란히 놓이면 16px 밖에 안 떨어져 「목록으로문의하기」처럼 읽힙니다.

   ★ 채워진 단추(.btn) 옆에 올 때는 지금 간격이 알맞으므로,
     «글자 링크끼리 이어질 때만» 더 벌립니다. */
.kk-doc .ask-row .btn-txt + .btn-txt,
.mtext .ask-row .btn-txt + .btn-txt{ margin-left:1.6rem; }

/* 사이에 옅은 세로선 — 두 링크가 «따로» 라는 것이 분명해집니다 */
.kk-doc .ask-row .btn-txt + .btn-txt::before,
.mtext .ask-row .btn-txt + .btn-txt::before{
  content:""; position:absolute; left:-1.6rem; top:50%;
  width:1px; height:1.2rem; margin-top:-.6rem;
  background:var(--line-color);
}
.kk-doc .ask-row .btn-txt,
.mtext .ask-row .btn-txt{ position:relative; }

/* ── 게시판의 소제목도 같은 모양으로 ─────────────────────────────────────
   .sub-h(소제목)와 .lead(첫 문단)도 .kk-doc 안에만 있었습니다.
   게시판에서는 「진행 순서」 「그 밖의 기록」 같은 제목이
   «꾸밈 없는 맨 제목» 으로 나오고 있었습니다. */
.mtext .lead{font-size:1.9rem; line-height:1.6; letter-spacing:-.03em; color:var(--body-color); margin-bottom:2.8rem;}
.mtext .sub-h{margin:3.6rem 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line-color); font-family:var(--kk-sans); font-size:1.7rem; font-weight:600; letter-spacing:-.045em; color:var(--body-color);}
.mtext .sub-h:first-child{margin-top:0;}


/* ══════════════════════════════════════════════════════════════════════════
   소제목 바로 아래가 표일 때 — 선을 한 번만
   --------------------------------------------------------------------------
   소제목은 아래에 선을 긋고, 표는 위에 선을 긋습니다.
   둘이 붙어 있으면 «선이 두 줄» 로 보입니다.

   ★ 표가 이미 자기 윗선으로 시작을 알리므로 소제목의 선은 필요 없습니다.

   ★ :has() 는 「바로 다음이 표인 소제목」을 골라내는 요즘 방식입니다.
     대표님이 나중에 표를 더 넣으셔도 «저절로» 걸립니다.
     따로 표시를 붙이실 필요가 없습니다.
     아주 오래된 브라우저에서는 안 걸리는데, 그때는 선이 그대로 남을 뿐
     화면이 깨지지는 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 표 말고도 «윗선으로 시작하는» 것들이 있어 함께 다룹니다.
   table    서지정보·비교표          .prg-list  제작 진행 목록
   .shelf   도서 목록               .works-list 작가의 방 목록 */
.kk-doc .sub-h:has(+ table),
.kk-doc .sub-h:has(+ .prg-list),
.kk-doc .sub-h:has(+ .works-list),
.kk-doc .sub-h:has(+ .shelf),
.mtext  .sub-h:has(+ table),
.mtext  .sub-h:has(+ .prg-list),
.mtext  .sub-h:has(+ .works-list),
.mtext  .sub-h:has(+ .shelf){
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:1.2rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   굵은 글자 (<b> · <strong>)
   --------------------------------------------------------------------------
   ★ 브라우저 기본값 bolder 는 «부모보다 한 단계» 라는 뜻입니다.
     본문이 300 이면 bolder 는 400 밖에 안 됩니다. 눈에 거의 안 띕니다.
     그래서 굵기를 직접 정해 줍니다.

   ★ 색도 함께 진하게 합니다.
     「진행 순서」처럼 설명 글이 옅은 자리에서는 굵기만으로는 부족합니다.

   ※ .prg-body b · .band-item b 처럼 «따로 정한 자리» 는 그 값이 이깁니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-doc b, .kk-doc strong,
.mtext  b, .mtext  strong{
  font-weight:600;
  color:var(--body-color);
}

/* 「진행 순서」 같은 목록 — 이름과 설명이 한 줄에 있어 더 벌려 줍니다 */
.kk-doc .steps > li b,
.mtext  .steps > li b,
.kk-doc .do-list > li b,
.mtext  .do-list > li b{
  margin-right:.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   견적에 필요한 것 — 문의 폼 안의 묶음
   --------------------------------------------------------------------------
   자비 출판·동인지 제작을 고르셨을 때만 나타납니다.
   갑자기 칸이 늘어나므로 «한 덩어리» 로 묶어 놀라지 않게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.quote-box{
  margin:0 0 2.8rem;
  padding:2rem 2rem .4rem;
  background:var(--lightgray-color);
  border-left:2px solid var(--point-color);
}
.quote-box[hidden]{ display:none; }

.quote-head{ margin:0 0 1.6rem; }
.quote-head b{ display:block; font-size:1.5rem; font-weight:600;
  color:var(--body-color); margin-bottom:.3rem; }
.quote-head span{ display:block; font-size:1.3rem; color:var(--muted-color); }

/* 상자 안에서는 칸 사이를 조금 좁힙니다 */
.quote-box .wrow{ padding-bottom:1.8rem; }
.quote-box .wrow:last-child{ padding-bottom:1.8rem; }
.quote-box .whelp{ margin-top:.5rem; }

@media (max-width:600px){
  .quote-box{ padding:1.6rem 1.4rem .4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   폼의 마디 제목
   --------------------------------------------------------------------------
   ★ <legend> 는 테마가 화면에서 숨깁니다 (position:absolute · font-size:0).
     화면 읽어 주는 프로그램에만 들리게 하는 방식입니다.
     그래서 「파일 첨부」 「개인정보 수집·이용 동의」 같은 마디 제목이
     «눈에는 하나도 안 보이고» 있었습니다. 칸들이 줄줄이 이어져 보입니다.

   ★ legend 는 그대로 두고 «보이는 제목» 을 따로 둡니다.
     화면 읽어 주는 프로그램에 두 번 들리지 않게 aria-hidden 은 쓰지 않습니다.
     legend 와 같은 말이라 두 번 들려도 뜻이 흐트러지지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.wsec{
  margin:0 0 2rem;
  font-size:1.6rem; font-weight:600; letter-spacing:-.03em;
  color:var(--body-color);
}
.wform + .wform .wsec{ margin-top:1.2rem; }

/* ── 개인정보 동의 ──────────────────────────────────────────────────────── */
.agree-box{ margin:0 0 1.6rem; }
.agree-box .tbl{ margin:0 0 1rem; }
.agree-box p{ font-size:1.3rem; color:var(--muted-color); margin:0; }

.agree-check{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:1.4rem 1.6rem;
  background:var(--lightgray-color);
  border-left:2px solid var(--point-color);
  cursor:pointer;
}
.agree-check input{ margin-top:.3rem; width:1.8rem; height:1.8rem; flex:0 0 auto; }
.agree-check b{ font-size:1.4rem; font-weight:500; color:var(--body-color); }

/* ── 파일 첨부 ──────────────────────────────────────────────────────────── */
.wnote{
  margin:0 0 1.8rem; padding:1.2rem 1.4rem;
  background:var(--lightgray-color);
  font-size:1.3rem; color:var(--text-color);
}
.wrow-file label{ flex:0 0 6rem; }


/* ══════════════════════════════════════════════════════════════════════════
   개인정보 동의 표 · 단추 모양 마무리
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 동의 표 ────────────────────────────────────────────────────────────
   항목(왼쪽)과 내용(오른쪽)이 한눈에 갈리도록 합니다.
   ★ 브라우저는 <th> 를 «가운데» 로 놓습니다. 왼쪽으로 되돌립니다.
   ★ 항목 칸에 옅은 바탕을 깔아 «표의 왼쪽 기둥» 이 보이게 합니다. */
.agree-box .tbl th,
.agree-box .tbl td{ text-align:left; vertical-align:top; }
.agree-box .tbl tbody th{
  width:10rem;
  background:transparent;        /* 옅은 바탕 없이 — 선만으로 갈립니다 */
  font-size:1.3rem;              /* 항목 이름은 작게 */
  font-weight:500;
  color:var(--muted-color);
  white-space:nowrap;
}
.agree-box .tbl tbody td{
  font-size:1.3rem;
  font-weight:300;               /* 내용은 얇게 */
  color:var(--text-color);
}

@media (max-width:600px){
  /* 좁은 화면에서는 위아래로 쌓습니다 */
  .agree-box .tbl,
  .agree-box .tbl tbody,
  .agree-box .tbl tr,
  .agree-box .tbl th,
  .agree-box .tbl td{ display:block; width:auto; }
  .agree-box .tbl tbody th{ border-bottom:0; padding-bottom:.2rem; }
  .agree-box .tbl tbody td{ padding-top:0; }
}

/* ── 단추 ────────────────────────────────────────────────────────────────
   ★ <button> 은 브라우저가 «테두리와 바탕» 을 스스로 붙입니다.
     <a> 로 만든 단추와 모양이 달라 보입니다. 그것을 지웁니다.
   ★ 자비 출판 페이지의 「자비 출판 문의하기」 단추와 같은 모양이 됩니다. */
.kk-doc button.btn, .mtext button.btn,
.kk-doc .btn_submit, .mtext .btn_submit{
  border:0;
  border-radius:0;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  font-family:var(--kk-sans);
}
.mtext .btn_submit:hover{ background:var(--point-dark); }


/* ── 단추 색 마지막 잠금 ─────────────────────────────────────────────────
   ★ 그누보드 default.css 에 «.btn_submit { background:#3a8afd }» 가 있습니다.
     파란색입니다. 우리 규칙이 더 세지만, 감싸개가 어긋나면 저 파랑이 나옵니다.
     실제로 문의 폼이 .mtext 밖에 있어 파랗게 나오고 있었습니다.
     감싸개를 고쳤고, 여기서 한 번 더 못을 박아 둡니다. */
.mtext .btn_submit,
.kk-doc .btn_submit,
.mtext button.btn,
.kk-doc button.btn{ background:var(--point-color); color:#fff; }
.mtext .btn_submit:hover,
.kk-doc .btn_submit:hover,
.mtext button.btn:hover,
.kk-doc button.btn:hover{ background:var(--point-dark); }


/* ── 메뉴 글자를 머리말 가운데에 ────────────────────────────────────────
   테마 원본은 line-height:8rem 로 «80px» 에 맞춰 두었습니다.
   우리는 머리말을 100px 로 올렸으므로 메뉴가 위로 치우쳐 보입니다.
   높이 값을 따라가게 고칩니다. 스크롤해서 얇아질 때도 함께 따라갑니다. */
#header .gnb > ul > li > a{ line-height:var(--kk-hd-h); }
#header.scr .gnb > ul > li > a{ line-height:var(--kk-hd-h-scr); }
#header h1{ height:auto; min-width:0; }


/* ══════════════════════════════════════════════════════════════════════════
   메뉴 글자와 펼침 메뉴 높이
   --------------------------------------------------------------------------
   ★ 값을 바꾸시려면 아래 두 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-gnb-weight:500;      /* 큰 메뉴 굵기 — 400 얇게 / 500 / 600 굵게 */
  --kk-sub-line:3.6rem;     /* 펼침 메뉴 한 줄 높이 (원본 4.4rem) */
}

/* 큰 메뉴 — 굵게 */
#header .gnb > ul > li > a{ font-weight:var(--kk-gnb-weight); }

/* 펼침 메뉴 — 한 줄 높이를 줄여 전체가 낮아집니다.
   ★ 손가락으로 누르는 자리라 너무 줄이면 안 됩니다.
     좁은 화면(휴대폰)에서는 44px 로 되돌립니다. */
#header .gnb > ul > li ul li a{
  line-height:var(--kk-sub-line);
  padding:0 3.2rem 0 2rem;
  font-size:1.35rem;
}

/* 위아래 여백도 함께 */
#header .gnb > ul > li ul{ padding-top:.8rem; padding-bottom:.8rem; }

@media (max-width:1024px){
  /* 휴대폰에서는 손가락 크기를 지킵니다 */
  :root{ --kk-sub-line:4.4rem; }
  #header .gnb > ul > li ul li a{ font-size:1.5rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   로그인 화면의 「자동로그인」 체크박스
   --------------------------------------------------------------------------
   ★ 테마 원본은 네모(span)를 float:left 로 띄웁니다.
     float 는 글줄에서 «빠져나오므로» 글자의 세로 가운데와 맞출 수 없습니다.
     네모는 줄 맨 위, 글자는 줄 가운데에 놓여 어긋나 보입니다.

   ★ float 를 풀고 inline-flex 로 «가운데 정렬» 합니다.
     회원 스킨의 style.css 는 손대지 않습니다.
     테마를 새로 받으시면 덮어씌워지기 때문입니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 사이트 «전체» 의 체크박스·라디오에 걸립니다.
     그누보드·테마 스킨 서른 곳이 같은 구조를 씁니다.
     파일을 고치지 않고 여기서 한 번에 덮습니다.

   ── 두 가지 구조 ──
     ㉮ <label><span></span> 자동로그인</label>            글이 label «안»
     ㉯ <label><span></span></label><span class="chk_li">글</span>   글이 label «밖»
     둘 다 다룹니다. */

/* ㉮ 글이 label 안에 있을 때 */
.chk_box input[type="checkbox"] + label,
.chk_box input[type="radio"] + label{
  display:inline-flex;
  align-items:center;          /* 네모와 글자를 세로 가운데로 */
  gap:.7rem;
  padding-left:0;
  line-height:1.5;
  cursor:pointer;
  vertical-align:middle;
}
.chk_box input[type="checkbox"] + label span,
.chk_box input[type="radio"] + label span{
  float:none;                  /* ★ 이 한 줄이 핵심입니다 */
  position:static;
  flex:0 0 auto;
  margin:0;
}

/* ㉯ 글이 label 밖에 있을 때 — 「기타 개인설정」의 메일링·SMS 같은 것 */
li.chk_box{
  display:flex;
  align-items:center;
  gap:.7rem;
}
li.chk_box .chk_li{
  padding-left:0;              /* 원본의 20px 를 풉니다. gap 이 대신합니다 */
  line-height:1.5;
  cursor:pointer;              /* label 로 바꿨으므로 눌러도 체크됩니다 */
}
li.chk_box .chk_li:hover{ color:var(--point-color); }
/* label 안이 네모뿐일 때는 gap 이 필요 없습니다 */
li.chk_box label{ gap:0; }


/* ══════════════════════════════════════════════════════════════════════════
   회원 화면 — 강조 글자와 색을 사이트에 맞추기
   --------------------------------------------------------------------------
   테마의 회원 스킨은 자기 색을 씁니다.
     파랑 #3a8afd #2172f8 #3ca1ff  (18곳)
     빨강 #e8180c · 분홍 #ed6478
   우리 사이트는 테라코타(#ce6455) 하나만 씁니다.
   회원 화면만 파랗게 나오면 다른 사이트처럼 보입니다.

   ★ 회원 스킨의 style.css 는 손대지 않습니다.
     테마 원본이라 테마를 새로 받으시면 덮어씌워집니다. 여기서 덮어씁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 강조 글자 ─────────────────────────────────────────────────────────── */
#reg_result strong,
#reg_result h2 strong,
#reg_result #result_email strong,
#mb_confirm p strong,
#pw_confirm p strong{
  color:var(--point-color);
  font-weight:600;
}

/* ── 단추 ──────────────────────────────────────────────────────────────── */
.mbskin .btn_submit,
.register .btn_submit,
#register_form .btn_submit,
.mbskin .btn_confirm .btn_submit{
  background:var(--point-color);
  border:0; border-radius:0;
  font-family:var(--kk-sans);
  cursor:pointer;
}
.mbskin .btn_submit:hover,
.register .btn_submit:hover,
#register_form .btn_submit:hover{ background:var(--point-dark); }

/* ── 링크 ──────────────────────────────────────────────────────────────── */
.mbskin a:hover,
.register a:hover{ color:var(--point-color); }

/* ── 체크박스·라디오 ────────────────────────────────────────────────────── */
.chk_box input[type="checkbox"]:checked + label{ color:var(--body-color); }
.chk_box input[type="checkbox"]:checked + label span{
  background-color:var(--point-color);
  border-color:var(--point-color);
}
.chk_box input[type="checkbox"] + label:hover{ color:var(--point-color); }
.chk_box input[type="radio"]:checked + label{ color:var(--point-color); }
.chk_box input[type="radio"]:checked + label span{ border-color:var(--point-color); }
.chk_box input[type="radio"]:checked + label span:before{ background:var(--point-color); }

/* ── 입력칸이 눌렸을 때 ─────────────────────────────────────────────────── */
.mbskin .frm_input:focus,
.register .frm_input:focus,
#register_form .frm_input:focus{
  border-color:var(--point-color);
  outline:none;
}

/* ── 필수 표시 ───────────────────────────────────────────────────────────
   ★ .required 에는 색을 주지 않습니다.
     그누보드는 이 이름을 «입력칸» 에만 붙입니다.
     화면에 「필수」라고 적힌 글자와는 무관합니다.
     색을 주면 아이디·비밀번호를 칠 때 «친 글자» 가 빨갛게 나옵니다.
     (2026-08, 실제로 그렇게 나와 걷어냈습니다)

   ★ 화면에 「(필수)」 라고 적히는 글자는 .cert_req 입니다. 거기에만 색을 줍니다. */
.mbskin .cert_req,
.register .cert_req,
#register_form .cert_req{ color:var(--point-color); font-weight:500; }

/* 입력칸의 글자는 언제나 먹색입니다 */
.mbskin .frm_input,
.register .frm_input,
#register_form .frm_input,
.mtext .frm_input,
.kk-doc .frm_input,
.frm_input, .frm_textarea{
  color:var(--body-color);
}
.mbskin .frm_input::placeholder,
.register .frm_input::placeholder,
.frm_input::placeholder{ color:var(--darkgray-color); }


/* ══════════════════════════════════════════════════════════════════════════
   그누보드 기본 파랑을 사이트 색으로
   --------------------------------------------------------------------------
   그누보드와 테마의 기본 스킨은 파랑(#3a8afd)을 씁니다.
   회원·검색·FAQ·비밀번호 확인 같은 «우리가 안 만든 화면» 에 그 색이 나옵니다.
   사이트 안에서 색이 둘이면 다른 사이트에 온 것처럼 보입니다.

   ★ 파일을 고치지 않고 여기서 덮어씁니다.
     테마나 그누보드를 새로 받으셔도 우리 규칙이 살아 있습니다.

   ★ 여기 없는 화면에서 파란 것을 보시면 알려 주십시오. 한 줄 더하면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 단추 — 그누보드 기본 클래스 전부 */
.btn_submit, .btn_confirm .btn_submit,
input[type="submit"].btn_submit, button.btn_submit{
  background:var(--point-color);
  border:0; border-radius:0;
  font-family:var(--kk-sans);
  cursor:pointer;
}
.btn_submit:hover, button.btn_submit:hover{ background:var(--point-dark); }

.btn_b01, .btn_b02, .btn_b03, a.btn_b01, a.btn_b02{
  border-radius:0; font-family:var(--kk-sans);
}
.btn_b01:hover, .btn_b02:hover, a.btn_b01:hover, a.btn_b02:hover{
  border-color:var(--point-color); color:var(--point-color);
}

/* 쪽번호 — 지금 쪽 */
.pg_current{
  background:var(--point-color);
  border-color:var(--point-color);
  color:#fff;
}
.pg_page:hover{ color:var(--point-color); }

/* 링크 · 강조 */
#validation_check strong,
.reg_result strong,
.new_win strong{ color:var(--point-color); }

/* 검색·FAQ 에서 찾은 낱말 */
.sch_word, .search_result strong, .faq_con .tit em{
  color:var(--point-color); font-style:normal;
}

/* 입력칸이 눌렸을 때 */
.frm_input:focus, .frm_textarea:focus{
  border-color:var(--point-color); outline:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   체크박스·라디오 — 눌렀을 때의 색
   --------------------------------------------------------------------------
   그누보드와 테마는 «체크 표시» 를 이렇게 그립니다.
     background: url(chk.png) no-repeat 50% 50% #3a8afd;   ← 파란 바탕 + 흰 체크 그림
   사이트 전체에서 파랑이 나오는 자리가 열한 군데입니다.

   ★ 그림(chk.png)은 그대로 쓰고 «바탕색만» 바꿉니다.
     그림은 흰 체크 표시라 어느 바탕색에도 어울립니다.

   ★ 여기 없는 자리에서 파란 것을 보시면 알려 주십시오.
     선택자 한 줄만 더하면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 체크 표시가 켜졌을 때 ─────────────────────────────────────────────── */
.chk_box input[type="checkbox"]:checked + label span,
.fregister_agree input[type="checkbox"]:checked + label span,
.member_cert_refresh_agree input[type="checkbox"]:checked + label span,
.switch_field input:checked + label{
  background-color:var(--point-color) !important;
  border-color:var(--point-color) !important;
}

/* ── 켜진 글자 ─────────────────────────────────────────────────────────── */
.chk_box input[type="radio"]:checked + label,
.fregister_agree input[type="checkbox"]:checked + label,
.member_cert_refresh_agree input[type="checkbox"]:checked + label{
  color:var(--body-color);
}
.chk_box input[type="radio"]:checked + label span{ border-color:var(--point-color); }
.chk_box input[type="radio"]:checked + label span:before{ background:var(--point-color); }

/* ── 마우스를 올렸을 때 ────────────────────────────────────────────────── */
.chk_box input[type="checkbox"] + label:hover,
.fregister_agree input[type="checkbox"] + label:hover,
.member_cert_refresh_agree input[type="checkbox"] + label:hover{
  color:var(--point-color);
}

/* ── 새 창(파일 고르기 등)의 «고른 줄» ─────────────────────────────────── */
.new_win .win_ul .selected{
  background:var(--point-color);
  border-color:var(--point-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   남은 파랑 마무리
   --------------------------------------------------------------------------
   게시판 상세·댓글·FAQ·검색 같은 «우리가 안 만든 화면» 에 남아 있던 파랑입니다.
   자주 보는 자리는 아니지만, 사이트 안에서 색이 둘이면 안 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 게시판 상세 — 분류 탭 · 붙임 파일 · 링크 */
#bo_cate a:hover, #bo_cate a:focus, #bo_cate .bo_cate_on,
#bo_v_file a:hover, #bo_v_file a:focus,
#bo_v_link a:hover, #bo_v_link a:focus,
#bo_v_top a:hover, #bo_v_bot a:hover{
  color:var(--point-color);
  border-color:var(--point-color);
}

/* 댓글 수 */
.cmt_btn span.total, .cmt_btn span.total:after{
  color:var(--point-color); background:transparent;
}

/* FAQ */
#faq_con .con_inner .closer_btn,
#faq_con .tit:hover, #faq_con li.active .tit{ color:var(--point-color); }

/* 회원가입 단추 */
.reg_btn_submit{ background:var(--point-color); border-color:var(--point-color); }
.reg_btn_submit:hover{ background:var(--point-dark); }

/* 새 창 — 몇 건 */
.new_win .win_total strong{ color:var(--point-color); }

/* 그누보드 기본 메뉴 (지금은 안 쓰지만 대비) */
#gnb .gnb_1dli:hover > a, a.gnb_2da:hover,
.gnb_wrap .gnb_empty a, #gnb_all .gnb_al_li .gnb_al_a:hover{ color:var(--point-color); }

/* 안내 글자 — 빨강 대신 포인트색 */
.txt_done, .txt_expired{ color:var(--point-color); }


/* ══════════════════════════════════════════════════════════════════════════
   글꼴과 모서리 마무리
   --------------------------------------------------------------------------
   ★ 사이트 방침
       글꼴   애플 산돌고딕 Neo + Jost. 맑은고딕·굴림은 쓰지 않습니다.
       모서리 각지게. 둥근 모서리는 쓰지 않습니다.
     그누보드·테마 기본 스킨이 이 둘을 어깁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 글꼴 — 게시판·회원 화면의 입력칸과 단추까지 */
.mbskin, .register, #bo_v, #bo_w, #bo_list, #bo_gall,
.tbl_frm01, .tbl_head01, .tbl_head02,
input, select, textarea, button{
  font-family:var(--kk-sans);
}

/* 모서리 — 각지게 */
.mbskin *, .register *, #bo_v *, #bo_w *, #bo_list *,
.tbl_frm01 *, .btn_submit, .btn_b01, .btn_b02, .btn_confirm,
.frm_input, .frm_textarea, .pg_page, .pg_current{
  border-radius:0;
}
/* 동그라미여야 하는 것은 되돌립니다 */
.chk_box input[type="radio"] + label span,
.mbskin .profile_img img, .member_img img{ border-radius:50%; }


/* ══════════════════════════════════════════════════════════════════════════
   소식·이야기 마당 목록
   --------------------------------------------------------------------------
   공지사항 · 언론보도·서평 · 낭독회·행사 · 이야기 마당이 함께 씁니다.
   줄 하나에 «제목 + 날짜» 만 두는 단순한 목록입니다.
   표(table)로 만들면 좁은 화면에서 칸이 뭉개집니다.
   ══════════════════════════════════════════════════════════════════════════ */
.news-list{ list-style:none; margin:2.4rem 0 0; padding:0;
  border-top:1px solid var(--body-color); }
.news-item{ border-bottom:1px solid var(--line-color); }

.news-link{ display:flex; align-items:baseline; gap:1.6rem;
  padding:1.6rem 0; transition:background .18s ease; }
.news-link:hover{ background:var(--lightgray-color); }

.news-head{ flex:1; min-width:0; display:flex; align-items:baseline;
  gap:.8rem; flex-wrap:wrap; }
.news-title{ font-size:1.55rem; font-weight:400; letter-spacing:-.03em;
  color:var(--body-color); }
.news-link:hover .news-title{ color:var(--point-color); }

.news-meta{ flex:0 0 auto; font-size:1.3rem; color:var(--muted-color);
  font-family:var(--eng-font); }

/* 공지로 올린 글 */
.news-item.is-notice{ background:rgba(28,27,25,.02); }
.news-item.is-notice .news-title{ font-weight:500; }

/* 글이 없을 때 */
.news-list + .empty{ border-top:0; }

/* 검색 */
.news-search{ display:flex; gap:.8rem; margin-top:2.8rem;
  padding-top:2.4rem; border-top:1px solid var(--line-color); }
.news-search .frm_input{ flex:1; max-width:32rem; height:4.4rem; }
.news-search .btn{ flex:0 0 auto; }

/* 본문 — 소식은 사진이 들어가는 일이 많습니다 */
.news-body img{ max-width:100%; height:auto; }
.news-body{ font-size:var(--kk-fs); line-height:var(--kk-lh); color:var(--text-color); }

@media (max-width:600px){
  .news-link{ flex-direction:column; gap:.6rem; }
  .news-meta{ font-size:1.2rem; }
  .news-search{ flex-direction:column; }
  .news-search .frm_input{ max-width:100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   목록의 분류 탭 — 글자 크기 바로잡기
   --------------------------------------------------------------------------
   ★ 원래 값이 .9375rem 이었습니다.
     이건 «html 글자가 16px» 일 때 15px 이 되도록 쓴 값입니다.
       .9375 × 16 = 15px
     그런데 우리 사이트는 html 을 10px 로 둡니다 (font-size:62.5%).
       .9375 × 10 = 9.4px      ← 절반이 되어 버립니다

   ★ 분류 탭은 «눌러서 화면을 바꾸는» 것입니다.
     딱지(1.2rem)나 날짜(1.3rem)보다 커야 무엇을 누르는지 알아봅니다.

   ★ 크기를 바꾸시려면 아래 --kk-tab-fs 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-tab-fs:1.5rem;      /* 분류 탭 글자 — 본문과 같은 크기 */
}

.ftab{
  font-size:var(--kk-tab-fs);
  font-weight:400;
  letter-spacing:-.03em;
  padding:1rem 1.6rem;
  min-height:4.4rem;          /* 손가락으로 누르기 좋은 크기 */
  display:inline-flex;
  align-items:center;
}
/* 지금 보고 있는 분류 */
.ftab[aria-current]{ font-weight:600; }

.frow{ gap:.4rem; }

@media (max-width:600px){
  :root{ --kk-tab-fs:1.4rem; }
  .ftab{ padding:.9rem 1.2rem; }
}


/* ── 도서 목록·표지의 글자 크기 바로잡기 ─────────────────────────────────
   .ftab 과 같은 이유입니다. «html 16px» 기준으로 쓴 값이라 절반이 되었습니다.
     .875rem   × 10 = 8.8px   (16px 기준이면 14px)
     .9375rem  × 10 = 9.4px   (16px 기준이면 15px)
   도서명이 8.8px 이면 읽기 어렵습니다. */
.bk-t{ font-size:1.5rem; }        /* 도서 목록의 도서명 */
.cover-t{ font-size:1.4rem; }     /* 표지 아래 제목 */
.cover-a{ font-size:1.3rem; }     /* 표지 아래 지은이 */

@media (max-width:600px){
  .bk-t{ font-size:1.4rem; }
  .cover-t{ font-size:1.3rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   읽기 편하게 — 옅은 글자와 누르는 자리
   --------------------------------------------------------------------------
   ★ --darkgray-color (#999999) 는 오프화이트 바탕에서 대비가 2.7:1 입니다.
     읽을 수 있는 최소는 4.5:1 입니다. 밝은 화면이나 나이 든 눈에는 흐릿합니다.
     설명 글·날짜·조회수 같은 작은 글자 열 곳에 쓰이고 있었습니다.

     색을 바꾸지 않고 «글자에 쓸 때만» 한 단계 진하게 씁니다.
     선이나 아이콘에 쓰는 --darkgray-color 자체는 그대로 둡니다.

   ★ 「자세한 안내」 링크가 36px 이었습니다.
     손가락으로 누르는 자리는 44px 이 최소입니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-faint:#767066;      /* 작은 설명 글자 — 대비 5.0:1 */
}

.kk-doc .fine,
.mtext .fine,
.kk-doc .road-label,
.kk-doc .ask-more .ask-etc,
.works-hit,
.prg-date,
.prg-step-item.is-done .prg-state,
.prg-step-item.is-wait .prg-body b,
.prg-step-item.is-wait .prg-body span,
.kk-cover.is-empty em,
.kk-cover.is-noimg em{
  color:var(--kk-faint);
}

/* 「자세한 안내」 링크 — 좁은 화면에서는 44px 을 지킵니다 */
@media (max-width:1024px){
  .kk-doc .ask-more .btn-txt{ min-height:4.4rem; }
}


/* ── 출판 방향 머리글 — 다른 페이지와 같은 크기로 ────────────────────────
   .direction-lead 만 한 단계 작았습니다 (2.6rem vs 3.2rem).
   여섯 페이지가 쓰는 .opening 과 같게 맞춥니다.

   ★ 아래 여백은 지금 값을 지킵니다.
     출판 방향은 머리글 뒤에 바로 다섯 항목이 이어져,
     인사말처럼 넓게 띄우면 화면이 헐거워집니다. */
.kk-doc .direction-lead,
.mtext .direction-lead{
  font-size:clamp(2.2rem, 3.4vw, 3.2rem);
}


/* ══════════════════════════════════════════════════════════════════════════
   본문 시작점 — 머리말 높이를 따라가게
   --------------------------------------------------------------------------
   머리말은 position:fixed 라 «화면에 떠» 있습니다.
   본문이 그만큼 내려와 있지 않으면 위쪽이 가립니다.

   ★ 테마 원본은 머리말 80px · 본문 margin-top 8rem 으로 맞아 있었습니다.
     우리가 머리말을 100px 로 올리면서 20px 이 가리게 되었습니다.

   ★ 값을 따로 적지 않고 --kk-hd-h 를 그대로 씁니다.
     머리말 높이를 바꾸시면 본문도 저절로 따라옵니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ --kk-hd-h 는 좁은 화면에서 저절로 72px 로 바뀝니다.
     그러니 여기서 따로 나눌 필요가 없습니다.
   ★ --kk-hd-h-scr(78px)는 «스크롤해서 줄어든» 높이라 여기 쓰면 안 됩니다.
     화면 맨 위에서는 머리말이 100px 이기 때문입니다. */
.sub_content{ margin-top:var(--kk-hd-h); }


/* ══════════════════════════════════════════════════════════════════════════
   내용이 짧아도 꼬리말은 화면 아래에
   --------------------------------------------------------------------------
   글이 없는 게시판, 검색 결과 없음 같은 짧은 화면에서
   꼬리말이 중간에 떠서 아래가 하얗게 빕니다.

   ★ 첫 화면(fullpage)에는 걸지 않습니다. 거기는 이미 꽉 찹니다.
   ★ min-height 에서 머리말 높이를 빼야 화면이 넘치지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 첫 화면은 sub.head.php 를 쓰지 않아 .sub_content 가 없습니다.
     그래서 조건을 따로 둘 필요가 없습니다. */
.sub_content{
  min-height:calc(100vh - var(--kk-hd-h) - 32rem);
}

@media (max-width:1024px){
  .sub_content{
    min-height:calc(100vh - var(--kk-hd-h) - 40rem);   /* 꼬리말이 세로로 길어집니다 */
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   서브페이지 머리말 — 바탕 깔기
   --------------------------------------------------------------------------
   ★ 첫 화면은 fullpage 가 #header 에 .on 을 붙여 흰 반투명 바탕을 만듭니다.
     서브페이지에는 그 코드가 없어 «투명» 인 채로 고정됩니다.
     글이 머리말 뒤로 지나가며 겹쳐 보입니다.

   ★ body.sub 같은 표시가 없으므로 .sub_content 가 있는 화면을 짚습니다.
     :has() 로 «서브페이지일 때만» 걸리게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 화면 «맨 위» 에서는 바탕을 깔지 않습니다.
     머리말이 먹색 제목 띠(.sub_title) 위에 놓이기 때문입니다.
     흰 바탕을 깔면 띠가 잘려 보입니다.

   ★ 스크롤해서 본문이 올라오면(.scr) 그때 바탕을 깝니다.
     custom.js 가 40px 을 넘으면 .scr 를 붙입니다. */
body:has(.sub_content) #header.scr{
  background:rgba(251, 250, 247, .97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-color);
}

/* 바탕이 밝아졌으니 로고와 글자를 먹색으로 */
body:has(.sub_content) #header.scr h1 a{
  background-image:url(../images/logo.svg);
}
body:has(.sub_content) #header.scr .gnb > ul > li > a,
body:has(.sub_content) #header.scr .adm a{
  color:var(--body-color);
}
body:has(.sub_content) #header.scr .mbtn span{ background:var(--body-color); }


/* ══════════════════════════════════════════════════════════════════════════
   게시판 등록 화면 — 테마가 덧그리는 장식 걷어내기
   --------------------------------------------------------------------------
   ★ modify.css 가 #bo_w 안의 단추에 «아이콘 상자» 를 덧그립니다.
       .btn_submit::before  단추 뒤에 깔리는 색 상자 (100% × 48px)
       .btn_submit::after   왼쪽에 붙는 48px 짜리 연필 아이콘 칸
     우리 단추는 그런 장식을 쓰지 않습니다. 「등록」 왼쪽에 검은 네모가 붙어 보입니다.
   ══════════════════════════════════════════════════════════════════════════ */
#bo_w .btn_submit::before,
#bo_w .btn_submit::after,
#bo_w .btn_cancel::before,
#bo_w .btn_cancel::after,
.sub_content #bo_w .btn_submit::before,
.sub_content #bo_w .btn_submit::after,
.sub_content #bo_w .btn_cancel::before,
.sub_content #bo_w .btn_cancel::after,
#faq_sch .btn_submit::before,
#faq_sch .btn_submit::after,
.sub_content #faq_sch .btn_submit::before,
.sub_content #faq_sch .btn_submit::after{
  content:none;
  display:none;
}

/* 단추 자체도 우리 모양으로 되돌립니다 */
.sub_content #bo_w .btn_submit,
#bo_w .btn_submit{
  position:static;
  z-index:auto;
  padding:.8rem 2.4rem;
  font-size:1.4rem;
  min-width:14rem;
}

/* ── 파일 붙임 칸 ────────────────────────────────────────────────────────
   ★ 이름 칸이 6rem(60px) 이라 「표지 (첫 번째 칸)」이 두 줄로 접혔습니다.
     위아래로 쌓아 이름이 온전히 한 줄에 들어가게 합니다. */
.wrow-file{
  display:block;
}
.wrow-file label{
  display:block;
  flex:none;
  margin-bottom:.8rem;
}
.wrow-file .frm_file{
  display:block;
  width:100%;
  max-width:40rem;
}
.wrow-file .whelp{ margin-top:.8rem; }


/* ══════════════════════════════════════════════════════════════════════════
   등록 단추 — 테마가 주는 여백 걷어내기
   --------------------------------------------------------------------------
   ★ modify.css 가 이렇게 둡니다.
       .sub_content #bo_w .btn_submit { margin-top:4rem; height:4.8rem; }
     테마 원본은 단추가 «혼자» 놓이는 구조라 그 여백이 필요했습니다.
     우리는 .admin-bar 로 감싸 여백을 따로 주므로,
     「등록」만 40px 내려가고 「취소」는 제자리에 남아 어긋나 보입니다.

   ★ 선택자에 아이디(#)가 있어 우리 규칙보다 훨씬 셉니다.
     같은 힘(아이디 하나 + 클래스 둘)으로 맞섭니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content #bo_w .admin-bar .btn_submit,
.sub_content #bo_w .admin-bar .btn,
.sub_content #bo_w .admin-bar .btn-txt,
#bo_w .admin-bar .btn_submit,
#bo_w .admin-bar .btn,
#bo_w .admin-bar .btn-txt{
  margin-top:0;
  height:auto;
  min-height:4.4rem;
  position:static;
  z-index:auto;
}

/* 두 단추가 «같은 줄 가운데» 에 놓이게 */
#bo_w .admin-bar.is-center,
.sub_content #bo_w .admin-bar.is-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   테마가 «아이디» 로 덮는 것 되돌리기
   --------------------------------------------------------------------------
   ★ 왜 필요한가
     아이디(#)가 든 선택자는 클래스 여러 개보다 셉니다.
       .sub_content #bo_w .btn_submit   (1,0,2)   ← 테마
       .mtext .btn                      (0,0,2)   ← 우리 (집니다)
     우리 CSS 를 맨 나중에 실리게 해 두어도 «순서로는 못 이깁니다».
     같은 힘으로 맞서야 합니다.

     우리 스킨이 그누보드 기본 아이디를 물려받아 테마 장식이 함께 걸립니다.

   ★ 여기 없는 자리에서 어긋난 것을 보시면 알려 주십시오.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 표 ─────────────────────────────────────────────────────────────
   테마가 td 높이를 64px 로 강제하고 날짜·이름 칸 폭을 90px 로 묶습니다.
   우리 목록은 줄마다 내용이 달라 답답해집니다. */
.sub_content #bo_list td,
#bo_list td{
  height:auto;
  padding:1.4rem .8rem;
}
.sub_content #bo_list .td_datetime,
.sub_content #bo_list .td_name,
#bo_list .td_datetime,
#bo_list .td_name{
  width:auto;
  white-space:nowrap;
}

/* ── 댓글 단추 줄 ────────────────────────────────────────────────────────
   테마가 margin-top:4rem 을 줍니다. 우리는 .admin-bar 로 여백을 정합니다. */
#content #bo_w .btn_confirm,
#bo_w .btn_confirm,
#bo_vc_w .btn_confirm{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.8rem;
  margin-top:1.6rem;
}
#content #bo_w .btn_confirm > *,
#bo_w .btn_confirm > *,
#bo_vc_w .btn_confirm > *{ margin-top:0; }

/* ── 분류 탭 ─────────────────────────────────────────────────────────────
   테마의 #bo_cate 모양과 우리 .ftab 이 겹칩니다.
   우리 것을 쓰는 화면에서는 테마 여백을 줄입니다. */
.sub_content #bo_cate,
#bo_cate{ margin:0 0 2.4rem; }
.sub_content #bo_cate a,
#bo_cate a{ font-size:var(--kk-tab-fs); padding:1rem 1.6rem; }


/* ══════════════════════════════════════════════════════════════════════════
   경로 표시 (HOME > 출판사 소개 > 인사말)
   --------------------------------------------------------------------------
   ★ 테마 원본은 lucide 아이콘(chevron-right)을 썼습니다.
     12px 짜리 옅은 회색이라 흰 바탕에서 거의 안 보였고,
     자바스크립트가 늦게 돌면 잠깐 빈 자리로 남았습니다.
     «>» 글자로 바꾸면 언제나 보이고 자바스크립트도 필요 없습니다.

   ★ 자간이 0.1em 이라 한글이 헐거워 보였습니다.
     영문(HOME)만 넓히고 한글은 좁힙니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_nav .navigation{
  letter-spacing:-.02em;        /* 원본 0.1em → 한글이 헐거웠습니다 */
  font-size:1.3rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
}

/* HOME 만 영문 자간을 살립니다 */
.sub_nav .navigation > a:first-child{
  font-family:var(--eng-font);
  letter-spacing:.08em;
  color:var(--muted-color);
}
.sub_nav .navigation > a:first-child:hover{ color:var(--point-color); }

/* 구분 기호
   ★ 전에는 --line-color(#e7e5e1)를 썼습니다. 흰 바탕 대비가 1.3:1 이라
     사실상 «안 보였습니다». 선 색을 글자에 쓴 제 실수입니다.
     선은 옅어야 하지만 글자는 읽혀야 합니다. */
.sub_nav .navigation .sep-gt{
  color:var(--muted-color);     /* 대비 7.5:1 */
  font-weight:400;
  padding:0 .1rem;
  user-select:none;             /* 글을 복사하실 때 딸려가지 않게 */
}

/* 경로 글자도 조금 진하게 — 배너 아래 흰 띠에서 읽혀야 합니다 */
.sub_nav .navigation{ color:var(--text-color); }
.sub_nav .navigation > a:first-child{ color:var(--text-color); }

@media (max-width:600px){
  .sub_nav .navigation{ font-size:1.2rem; gap:.4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   첫 화면 슬라이드 안의 표지
   --------------------------------------------------------------------------
   ★ 테마는 «figure > img» 에만 크기를 줍니다.
       #main_collection … .itm figure img { width:100%; height:40rem; }
     우리 kk_cover() 는 <span class="kk-cover"> 나 <a class="kk-cover"> 로
     감싸므로 그 규칙이 «안 걸립니다».
     크기가 안 잡혀 슬라이드가 가로로 길게 늘어집니다.

   ★ .kk-cover 는 height:26rem · width:auto 로 «세로 기준» 입니다.
     도서 목록에서는 표지를 자르지 않으려고 그렇게 두었습니다.
     첫 화면 슬라이드는 «배경 그림처럼» 쓰는 자리라 채워야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 감싸개는 «크기를 정하지 않고» 부모에 맞춥니다.
     그래야 블록마다 다른 높이(40rem·32rem…)를 그대로 따라갑니다.
     테마의 figure img 규칙이 안쪽 img 에 그대로 걸리게 하는 방식입니다. */
#main_collection .itm figure > .kk-cover,
#main_display .itm figure > .kk-cover,
#main_lookbook figure > .kk-cover,
#main_showroom figure > .kk-cover{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;            /* 도서 목록용 비율을 풉니다 */
}

/* figure 가 높이를 갖도록 — 원래는 img 가 정해 주던 것입니다 */
#main_collection .itm figure{ height:40rem; }
#main_display .itm figure{ height:40rem; }
#main_collection .itm figure > .kk-cover img,
#main_display .itm figure > .kk-cover img,
#main_lookbook figure > .kk-cover img,
#main_showroom figure > .kk-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 표지가 아직 없을 때 — 회색 자리도 같은 크기로 */
#main_collection .itm figure > .kk-cover.is-empty,
#main_collection .itm figure > .kk-cover.is-noimg,
#main_display .itm figure > .kk-cover.is-empty,
#main_display .itm figure > .kk-cover.is-noimg{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--lightgray-color);
}

@media (max-width:768px){
  #main_collection .itm figure,
  #main_display .itm figure{ height:36rem; }
}


/* ── 문의 목록의 고르기 칸 ───────────────────────────────────────────────
   관리자가 여러 건을 골라 지울 때 씁니다. 손님에게는 안 보입니다. */
.news-item{ position:relative; }
.inq-chk{
  position:absolute; left:-2.4rem; top:2rem;
  display:flex; align-items:center; cursor:pointer;
}
.inq-chk input{ width:1.6rem; height:1.6rem; }
.inq-all{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1.3rem; color:var(--muted-color); cursor:pointer;
}
.inq-all input{ width:1.6rem; height:1.6rem; }

@media (max-width:900px){
  /* 화면이 좁으면 목록 안으로 들여놓습니다 */
  .inq-chk{ position:static; margin-right:.8rem; }
  .news-item{ display:flex; align-items:flex-start; }
  .news-item .news-link{ flex:1; }
}

/* 모두 건수 */
.total{ font-size:1.3rem; color:var(--muted-color); margin:0 0 1.2rem; }
.total b{ font-weight:500; color:var(--body-color); }

/* 댓글 수 */
.cnt_cmt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.8rem; height:1.8rem; padding:0 .4rem;
  font-size:1.1rem; font-family:var(--eng-font);
  color:var(--point-color); border:1px solid var(--point-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   댓글
   --------------------------------------------------------------------------
   이야기 마당이 주로 씁니다. 다섯 게시판이 같은 스킨을 나눠 씁니다.
   ══════════════════════════════════════════════════════════════════════════ */
.cmt-list{ list-style:none; margin:1.6rem 0 0; padding:0;
  border-top:1px solid var(--line-color); }
.cmt-item{ padding:1.8rem 0; border-bottom:1px solid var(--line-color); }
.cmt-item.is-reply{ padding-left:2.4rem; background:rgba(28,27,25,.02); }

.cmt-head{ display:flex; align-items:center; gap:.6rem;
  margin:0 0 .6rem; font-size:1.3rem; color:var(--muted-color); }
.cmt-head b{ font-weight:500; color:var(--body-color); }

.cmt-body{ font-size:1.45rem; line-height:1.7; color:var(--text-color); }
.cmt-body p{ margin:0 0 .4rem; }

.cmt-btn{ display:flex; gap:1.2rem; margin:.8rem 0 0; }
.cmt-btn .btn-txt{ min-height:auto; font-size:1.3rem; }

/* 댓글 쓰기 */
.cmt-write{ margin-top:2.4rem; padding-top:2.4rem;
  border-top:1px solid var(--line-color); }
.cmt-row{ margin-bottom:1.2rem; }
.cmt-row label{ display:block; font-size:1.3rem; font-weight:500;
  margin-bottom:.5rem; color:var(--body-color); }
.cmt-row .frm_input{ width:100%; max-width:24rem; height:4.4rem; }
.cmt-row .frm_textarea{ width:100%; padding:1.2rem;
  border:1px solid var(--line-color); font-family:var(--kk-sans);
  font-size:1.45rem; line-height:1.7; }
.cmt-opt{ margin:0 0 1.2rem; }

/* 답글 칸이 댓글 안으로 들어갔을 때 */
.cmt-item .cmt-write{ margin-top:1.2rem; padding-top:1.2rem; }


/* ══════════════════════════════════════════════════════════════════════════
   서브페이지 머리말 — 스크롤해도 높이는 그대로
   --------------------------------------------------------------------------
   ★ custom.js 가 40px 만 내려도 #header 에 .scr 를 붙입니다.
     그러면 높이가 100px → 78px 로 줄어듭니다.

   ★ 첫 화면은 fullpage 가 화면을 통째로 넘겨 scrollTop 이 늘 0 이라
     .scr 가 «안 붙습니다». 그래서 높이가 변하지 않습니다.
     서브페이지만 줄어들어 첫 화면과 달라 보였습니다.

   ★ 높이 변화만 없앱니다.
     바탕이 밝아지고 로고가 먹색으로 바뀌는 것은 그대로 둡니다.
     글 위로 지나갈 때 겹쳐 보이지 않게 하는 것이라 필요합니다.
   ══════════════════════════════════════════════════════════════════════════ */
body:has(.sub_content) #header.scr .hd_wrap{ height:var(--kk-hd-h); }
body:has(.sub_content) #header.scr h1{ height:var(--kk-hd-h); }
body:has(.sub_content) #header.scr h1 a{
  height:var(--kk-logo-h);
  width:var(--kk-logo-w);       /* 기본값과 같게 */
}
body:has(.sub_content) #header.scr .gnb > ul > li > a{ line-height:var(--kk-hd-h); }


/* ══════════════════════════════════════════════════════════════════════════
   도서 목록의 보조 필터 (발행처)
   --------------------------------------------------------------------------
   ★ 12px 로 두었는데 너무 작았습니다.
     주 분류(문학·종교…)보다 «덜 띄게» 두는 것이 뜻이었지만,
     읽기 어려울 만큼 작으면 뜻이 없습니다.
     주 분류 15px · 보조 필터 14px 로 한 단계만 차이를 둡니다.
   ══════════════════════════════════════════════════════════════════════════ */
.frow.minor{ font-size:1.4rem; margin-top:.4rem; }
.frow.minor .flabel{
  font-size:1.3rem;
  color:var(--muted-color);
  letter-spacing:-.02em;
  padding-right:1rem;
}
.frow.minor .ftab{
  font-size:1.4rem;
  padding:.8rem 1.2rem;
  min-height:4rem;
}

/* ── 목록 아래 단추 ──────────────────────────────────────────────────────
   「새 도서 등록」이 큰 글자로 나왔습니다.
   .btn_b01 은 테마 기본이라 우리 .btn 모양이 안 걸렸습니다. */
.admin-bar .btn_b01,
.admin-bar .btn_b02{
  font-size:1.4rem;
  min-height:4.4rem;
  padding:.8rem 2.4rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   안내 페이지의 큰 글자 — 테마에 밀리던 것 바로잡기
   --------------------------------------------------------------------------
   ★ 테마에 이런 규칙이 있습니다.
       .sub_content .content p { font-size: 1.6rem; }   힘 (0,2,1)
     우리 규칙은 «.kk-doc .opening» 으로 힘이 (0,2,0) 이라 밀립니다.
     클래스 수는 같은데 «태그(p)» 가 하나 더 있어 테마가 셉니다.
     머리글이 16px 로 나오고 명조체도 안 걸렸습니다.

   ★ 우리 선택자에도 태그를 넣어 «p.opening» 으로 씁니다.
     힘이 (0,2,1) 로 같아지고, 나중에 실린 우리가 이깁니다.

   ★ 여기 없는 것이 또 밀리면 «태그를 붙이는» 같은 방법으로 고치시면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 머리글 — 인사말·출판 방향·출판 안내 등 여덟 페이지 */
.kk-doc p.opening,
.mtext p.opening,
.kk-doc p.direction-lead,
.mtext p.direction-lead{
  font-family:var(--serif-font);
  font-size:clamp(2.2rem, 3.4vw, 3.2rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:var(--kk-serif-ls);
  color:var(--body-color);
}

/* 마무리 문장 — 「밀지 않고 끌어당기는 책」 */
.kk-doc p.closing,
.mtext p.closing{
  font-family:var(--serif-font);
  font-size:clamp(1.8rem, 2.4vw, 2.2rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:var(--kk-serif-ls);
  color:var(--body-color);
}

/* 첫 문단 — 머리글 아래 한 단락 */
.kk-doc p.lead,
.mtext p.lead{
  font-size:1.9rem;
  line-height:1.6;
}

/* 서명 — 「도서출판 끌림 대표 김한결」 */
.kk-doc p.sign,
.mtext p.sign{
  font-weight:500;
  color:var(--body-color);
}


/* ── 안내 페이지의 보통 문단 ────────────────────────────────────────────
   테마의 «.sub_content .content p» 가 이렇게 덮고 있었습니다.
     font-size:1.6rem · line-height:1.9 · opacity:0.9
   우리 기준은 1.5rem · 1.6 입니다. opacity 로 흐려지기까지 했습니다.

   ★ 태그를 넣어 힘을 (0,2,1) 로 맞춥니다. */
.kk-doc p,
.mtext p{
  font-size:var(--kk-fs);
  line-height:var(--kk-lh);
  opacity:1;
}

/* 크기를 따로 정한 것들은 그 값이 이겨야 하므로 아래에 다시 둡니다 */
.kk-doc p.opening, .mtext p.opening,
.kk-doc p.direction-lead, .mtext p.direction-lead{
  font-size:clamp(2.2rem, 3.4vw, 3.2rem); line-height:1.62;
}
.kk-doc p.closing, .mtext p.closing{
  font-size:clamp(1.8rem, 2.4vw, 2.2rem); line-height:1.62;
}
.kk-doc p.lead, .mtext p.lead{ font-size:1.9rem; line-height:1.6; }
/* ★ .lead-p 는 원래 본문과 같은 크기입니다. 굵기와 색으로만 구분합니다. */
.kk-doc p.lead-p, .mtext p.lead-p{ font-size:var(--kk-fs); line-height:var(--kk-lh); }
.kk-doc p.fine, .mtext p.fine{ font-size:1.3rem; }
.kk-doc p.whelp, .mtext p.whelp{ font-size:1.3rem; }


/* ══════════════════════════════════════════════════════════════════════════
   회원 화면 — 제목과 같은 자리에 맞추기
   --------------------------------------------------------------------------
   ★ 테마의 회원 스킨은 상자를 «가운데» 에 둡니다.
       .mbskin { max-width:56rem; margin:0 auto; text-align:center; }
     그런데 제목(.page_title)은 «왼쪽» 이라 둘이 어긋납니다.

   ★ 사이트의 다른 화면은 안내 페이지·게시판 모두 왼쪽 정렬입니다.
     상자를 왼쪽으로 옮겨 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 상자를 가운데에 둡니다. 제목도 함께 가운데로 옮깁니다(아래).
     로그인·회원가입은 «할 일이 하나뿐인» 화면이라
     가운데에 모아 두면 눈이 바로 갑니다. */
.mbskin,
.register{
  max-width:44rem;
  margin:0 auto;
  text-align:left;              /* 상자는 가운데, 안쪽 글자는 왼쪽 */
}
.mbskin_box{ text-align:left; }

/* 안쪽 글자는 왼쪽 — 입력칸 이름이 가운데면 읽기 어렵습니다 */
.mbskin h1,
.mbskin h2,
.mbskin p,
.register h1,
.register p{ text-align:left; }

/* ── 제목도 함께 가운데로 ────────────────────────────────────────────────
   sub.head.php 가 회원 화면에 is-member 를 붙입니다.
   제목만 왼쪽에 남으면 상자와 어긋나 보입니다. */
.sub_content.is-member .page_title{ text-align:center; }
.sub_content.is-member .page_title h3::before{ margin:0 auto; }

/* 단추는 폭을 꽉 채웁니다 — 상자 안이라 자연스럽습니다 */
.mbskin .btn_submit,
.register .btn_submit{ width:100%; }

@media (max-width:600px){
  .mbskin, .register{ max-width:100%; }
}


/* ── 회원가입·본인확인·결과 화면도 같은 자리로 ─────────────────────────
   테마의 회원 스킨은 여러 곳을 가운데로 둡니다.
   제목이 왼쪽인데 안쪽만 가운데면 어긋나 보입니다. */
#fregister,
#fregister p,
#fregisterform .btn_confirm,
.btn_confirm_reg,
#find_info h3,
#reg_result{
  text-align:left;
}
#fregister_chkall{ text-align:left; }
/* padding 은 아래에서 다시 정합니다 */

/* 「로그인 | 회원가입」 두 갈래 — 폭을 반씩 나누던 것 */
.mb_log_cate{ display:flex; }
.mb_log_cate h2,
.mb_log_cate .join{
  float:none;
  width:auto;
  flex:1;
  text-align:center;            /* 갈래 안은 가운데가 맞습니다 */
  padding:1.6rem 0;
}

/* 「아이디/비밀번호 찾기」 링크 */
#login_password_lost{ text-align:left; }


/* ── 비밀번호 찾기·본인 확인 — 폭 맞추기 ────────────────────────────────
   이 화면들은 «팝업 창» 용 클래스(.new_win)를 씁니다.
   원래 작은 창에 뜨는 것이라 폭 제한이 없어, 보통 화면에서는
   가로로 끝까지 늘어집니다. 로그인 상자와 같은 폭으로 맞춥니다. */
.sub_content .new_win,
.sub_content #find_info{
  max-width:44rem;
  margin:0 auto;
}
.sub_content .new_win_con,
.sub_content #find_info.cert .new_win_con{
  width:auto;
  max-width:100%;
  margin:0;
}

/* 안쪽 단추는 폭을 채웁니다 */
.sub_content #find_info .find_btn .btn_submit{ width:100%; }
.sub_content .new_win .win_btn{ text-align:left; }

@media (max-width:600px){
  .sub_content .new_win,
  .sub_content #find_info{ max-width:100%; }
}


/* ── 체크 그림 자리 바로잡기 ─────────────────────────────────────────────
   ★ 회원·게시판 스킨의 style.css 가 «./img/chk.png» 를 찾습니다.
     그 폴더에 img 가 없어 404 오류가 납니다.
     테마 뿌리의 img/chk.png 를 쓰게 합니다.
     (이 파일은 css/ 안에 있으므로 ../img/ 가 테마 뿌리입니다) */
.chk_box input[type="checkbox"]:checked + label span,
.fregister_agree input[type="checkbox"]:checked + label span,
.member_cert_refresh_agree input[type="checkbox"]:checked + label span{
  background-image:url(../img/chk.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
}


/* ══════════════════════════════════════════════════════════════════════════
   회원가입 완료 화면
   --------------------------------------------------------------------------
   ★ ① 「메인으로」 단추가 «상자 밖» 에 있습니다.
        <div id="reg_result" class="register"> … </div>
        <div class="btn_confirm_reg">메인으로</div>   ← 밖
      .register 가 가운데라 단추만 왼쪽 끝으로 밀려납니다.

   ★ ② 상자와 글씨가 붙어 있었습니다. 안쪽 여백을 되살립니다.

   ★ ③ 파랑(#3684fa)·빨강(#e8180c)이 남아 있었습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 단추를 상자와 같은 자리로 */
.btn_confirm_reg{
  max-width:44rem;
  margin:2.4rem auto 0;
  text-align:left;
}
/* ★ 우리 .btn 과 같은 방식입니다.
     테마 원본은 height:57px + line-height:57px 로 가운데를 맞춥니다.
     그 둘 중 하나만 덮으면 글자가 위아래로 어긋납니다.
     inline-flex 로 두면 높이가 얼마든 «언제나» 가운데에 옵니다. */
.reg_btn_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:auto;
  min-height:4.8rem;
  padding:.8rem 2.4rem;
  background:var(--point-color);
  color:#fff;
  border:0;
  border-radius:0;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.4;
  text-align:center;
}
.reg_btn_submit:hover{ background:var(--point-dark); }

/* 상자 — 안쪽 여백을 되살립니다 */
#reg_result{
  padding:2.8rem 2.4rem;
  background:var(--lightgray-color);
  border:0;
  text-align:left;
}

/* 축하 문구 — 파랑을 걷어냅니다 */
#reg_result .reg_result_p{
  font-size:1.7rem;
  font-weight:500;
  color:var(--body-color);
  margin:0 0 1.6rem;
}
#reg_result .reg_result_p strong{ color:var(--point-color); }

/* 선물 아이콘 — 파란 그림이라 뺍니다 */
#reg_result i.fa-gift{ display:none; }

/* 아이디·이메일 표 */
#reg_result #result_email{
  margin:1.6rem 0;
  padding:1.6rem 0;
  border-top:1px solid var(--line-color);
  border-bottom:1px solid var(--line-color);
  font-size:1.4rem;
}
#reg_result #result_email span{
  display:inline-block;
  width:9rem;
  color:var(--muted-color);
}
#reg_result #result_email strong{
  color:var(--body-color);
  font-size:1.4rem;
  font-weight:500;
}

/* 본문 */
#reg_result p{
  font-size:var(--kk-fs);
  line-height:var(--kk-lh);
  color:var(--text-color);
}
#reg_result .result_txt{ text-align:left; margin:0 0 1.2rem; }


/* ── 회원 화면에 남은 테마색 마무리 ─────────────────────────────────────
   쪽지·포인트·스크랩 화면입니다. 지금은 안 쓰시지만
   나중에 여시더라도 파랑이 안 나오게 미리 덮어 둡니다. */
#fregisterform .cert_desc,
.memo_list .no_read,
.point_list .point_num,
.reply_btn,
#scrap .scrap_del:hover{ color:var(--point-color); }
#point .point_all{ background:var(--lightgray-color); }


/* ══════════════════════════════════════════════════════════════════════════
   단추 안의 글자 — 언제나 가운데
   --------------------------------------------------------------------------
   ★ 테마와 그누보드는 «height + line-height» 로 글자를 가운데에 둡니다.
       .btn { height:35px; line-height:35px; }
     둘 중 하나만 우리가 덮으면 글자가 위나 아래로 어긋납니다.
     회원가입 완료 화면의 「메인으로」가 그랬습니다.

   ★ inline-flex + align-items:center 로 두면
     높이가 얼마든 글자가 «언제나» 가운데에 옵니다.
   ══════════════════════════════════════════════════════════════════════════ */
.btn, a.btn,
.btn_submit, button.btn_submit, input[type="submit"].btn_submit,
.btn_b01, .btn_b02, .btn_b03,
.btn_close, a.btn_close,
.reg_btn_submit,
.mbskin .btn_submit,
.register .btn_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  min-height:4.4rem;
  line-height:1.4;
  text-align:center;
}

/* 글자만인 단추는 높이를 강제하지 않습니다 */
.btn-txt{ min-height:auto; }
.cmt-btn .btn-txt{ min-height:auto; }


/* ══════════════════════════════════════════════════════════════════════════
   게시판 본문 — 제목과 같은 자리로
   --------------------------------------------------------------------------
   ★ 제목은 .page_title.inner 라 «.inner 폭(120rem)» 안에서 왼쪽입니다.
     본문은 .ms > .read 인데 .ms 에 폭이 없어
     .read(64rem)가 «화면 전체» 한가운데 놓였습니다.
     기준이 달라 본문만 오른쪽으로 치우쳐 보였습니다.

   ★ .ms 에 .inner 와 같은 폭을 주고, 그 안에서 .read 를 왼쪽에 둡니다.
     안내 페이지(.content > .kk-doc)와도 같은 자리가 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
.ms{
  max-width:var(--inner-size);
  margin:0 auto;
  padding-left:2.4rem;
  padding-right:2.4rem;
}
.ms .read{
  max-width:64rem;
  margin:0;                     /* 가운데(0 auto)를 풉니다 */
  padding-left:0;
  padding-right:0;
}

/* 도서 목록·작가의 방처럼 «넓게 쓰는» 화면은 폭 제한을 풉니다 */
.ms.wide .read{ max-width:100%; }

@media (max-width:768px){
  .ms{ padding-left:1.6rem; padding-right:1.6rem; }
}


/* ── 도서·작가의 방 감싸개도 제목과 같은 자리로 ─────────────────────────
   .wrap 은 112rem, 제목의 .inner 는 144rem 입니다.
   둘 다 가운데지만 폭이 달라 «왼쪽 시작점» 이 어긋납니다.
   .wrap 을 144rem 으로 맞춰 제목과 같은 선에서 시작하게 합니다. */
.sub_content .wrap{
  max-width:var(--inner-size);
  padding-left:2.4rem;
  padding-right:2.4rem;
}

@media (max-width:768px){
  .sub_content .wrap{ padding-left:1.6rem; padding-right:1.6rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   게시판 화면 — 가운데로
   --------------------------------------------------------------------------
   ★ sub.head.php 가 게시판 화면에 is-center 를 붙입니다.
     제목과 본문을 함께 옮겨야 어긋나지 않습니다.

   ★ 안내 페이지는 «읽는 글» 이라 왼쪽 그대로입니다.
     게시판은 «하나의 일» 을 하는 자리라 가운데가 어울립니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content.is-center .page_title{ text-align:center; }
.sub_content.is-center .page_title h3::before{ margin-left:auto; margin-right:auto; }
.sub_content.is-center .ms .read{ margin:0 auto; }

/* 도서·작가의 방은 표지를 넓게 늘어놓으므로 그대로 둡니다 */
.sub_content.is-center .wrap{ margin:0 auto; }


/* ══════════════════════════════════════════════════════════════════════════
   자주 묻는 질문 (FAQ)
   --------------------------------------------------------------------------
   그누보드 기본 스킨을 쓰되 모양만 우리 것으로 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 글꼴 — 본문이 명조로 나오던 것 ──────────────────────────────────── */
#faq_wrap, #faq_con, #faq_sch, #bo_cate,
#faq_wrap *, #faq_con *, #faq_sch *{
  font-family:var(--kk-sans);
}

/* ── 검색 상자 ──────────────────────────────────────────────────────────
   ★ 여닫기와 모양 모두 «원본» 이 갖추고 있습니다.
       스킨의 jQuery 가 $(".bo_sch_wrap").toggle() 로 엽니다.
     건드리지 않습니다. */

/* ── 쪽 넘기기 ─────────────────────────────────────────────────────────
   원본 모양을 그대로 씁니다. */

@media (max-width:768px){
  #bo_list, #bo_v, #bo_w{ max-width:100%; padding-left:1.6rem; padding-right:1.6rem; }
  .tbl_head01 .td_num, .tbl_head01 .td_num2,
  .tbl_head01 .td_datetime, .tbl_head01 th:first-child{ display:none; }
}


/* ── 「옵션」 펼침 메뉴 — 크기만 ──────────────────────────────────────────
   원본은 이미 modify.css 에서 svg 14px 로 정해 두었습니다.
   여기서는 «떠 있는 판» 임을 알리는 그림자만 우리 것으로 맞춥니다. */
.more_opt{ box-shadow:var(--kk-lift-2); }



/* ══════════════════════════════════════════════════════════════════════════
   ★★ dd__basic (테마 기본 게시판) — 폭과 글자만 ★★
   --------------------------------------------------------------------------
   작가의 방(창작 마당·이야기 마당)이 이 스킨을 씁니다.

   ★ 아이콘 · 검색 상자 · 쪽 넘기기는 «원본 그대로» 둡니다.
     폭을 고정하고 글자 크기만 우리 것에 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 폭 고정 — 다른 화면과 같게 ─────────────────────────────────────────── */
#bo_list,
#bo_v,
#bo_w,
.sub_content #bo_list,
.sub_content #bo_v,
.sub_content #bo_w{
  max-width:var(--kk-read-w);
  margin-left:auto;
  margin-right:auto;
  padding-left:2.4rem;
  padding-right:2.4rem;
}

/* ── 「Total 0건」 줄 ───────────────────────────────────────────────────── */
#bo_list_total{
  font-size:var(--fs-caption);
  color:var(--muted-color);
  letter-spacing:-.02em;
}

/* ── 표 — 글자 크기와 줄 배경만 ─────────────────────────────────────────── */
.tbl_head01 table{ border-top:1px solid var(--body-color); }
.tbl_head01 thead th{
  font-size:var(--fs-caption);
  font-weight:400;
  color:var(--muted-color);
  background:transparent;
  border-bottom:1px solid var(--line-color);
  letter-spacing:-.02em;
}
.tbl_head01 thead a{ color:var(--muted-color); }
.tbl_head01 thead a:hover{ color:var(--body-color); }
.tbl_head01 tbody td{
  font-size:var(--fs-body-sm);
  color:var(--text-color);
  border-bottom:1px solid var(--line-color);
  line-height:var(--kk-lh-list);
}

/* 줄마다 옅은 배경 — 우리 목록과 같게 */
.tbl_head01 tbody tr:nth-child(even) td{ background:rgba(28,27,25,.018); }
.tbl_head01 tbody tr:hover td{ background:rgba(206,100,85,.045); }

/* 제목 */
.bo_tit{
  font-size:var(--fs-body);
  color:var(--body-color);
  letter-spacing:-.03em;
}
.tbl_head01 tbody tr:hover .bo_tit{ color:var(--point-color); }

/* 번호·글쓴이·조회·날짜 */
.td_num, .td_num2, .td_name, .td_numsmall, .td_datetime, .td_date{
  font-size:var(--fs-caption);
  color:var(--muted-color);
}

/* 글이 없을 때 */
.tbl_head01 .empty_table{
  padding:6rem 0;
  color:var(--muted-color);
  font-size:var(--fs-body-sm);
  background:transparent;
}

@media (max-width:768px){
  #bo_list, #bo_v, #bo_w{ max-width:100%; padding-left:1.6rem; padding-right:1.6rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ dd__basic (테마 기본 게시판) — 원본 데모 모양 ★★
   --------------------------------------------------------------------------
   작가의 방(창작 마당·이야기 마당)이 이 스킨을 씁니다.

   ★ 원본 CSS 를 뜯어보니 이 모양을 만드는 값이 세 파일에 흩어져 있습니다.
       default.css   표의 기본 — 머리 padding 20px · 가운데 정렬
       style.css     칸 너비 — 번호 50px · 글쓴이 90px · 날짜 90px
       modify.css    글 제목 · 줄 높이 6.4rem

   ★ 그 모양을 살리고 «글자 크기와 폭» 만 우리 것에 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 폭 ─────────────────────────────────────────────────────────────────── */
#bo_list, #bo_v, #bo_w,
.sub_content #bo_list,
.sub_content #bo_v,
.sub_content #bo_w{
  max-width:112rem;             /* 표라서 조금 넓게 — 다섯 칸이 들어갑니다 */
  margin-left:auto;
  margin-right:auto;
  padding-left:2.4rem;
  padding-right:2.4rem;
}

/* ── 「Total 9건 1 페이지」 줄 ──────────────────────────────────────────── */
#bo_btn_top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 1.2rem;
}
#bo_btn_top::after{ display:none; }
#bo_list_total{
  float:none;
  line-height:1.4;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  letter-spacing:-.02em;
}

/* ── 오른쪽 위 아이콘 — 테두리 없이 ─────────────────────────────────────── */
.btn_bo_user{
  float:none;
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:0;
  padding:0;
}
.btn_bo_user li{
  float:none;
  width:auto;
  margin:0;
}
.btn_bo_user .btn,
.btn_bo_user .btn_b01{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.8rem;
  min-width:2.8rem;
  height:2.8rem;
  min-height:2.8rem;
  padding:0;
  background:none;
  border:0;
  color:var(--muted-color);
}
.btn_bo_user .btn:hover,
.btn_bo_user .btn_b01:hover{
  background:none;
  border:0;
  color:var(--body-color);
}
.btn_bo_user svg,
.btn_bo_user .feather{
  width:2rem;
  height:2rem;
  stroke-width:1.4;
}

/* ── 표 ────────────────────────────────────────────────────────────────── */
.tbl_head01{ margin:0; }
.tbl_head01 table{ width:100%; border-collapse:collapse; }
.tbl_head01 caption{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
}

/* 표 머리 — 얇은 회색, 위아래 선 */
.tbl_head01 thead th{
  padding:1.4rem .8rem;
  font-size:var(--fs-body-sm);
  font-weight:400;
  color:var(--muted-color);
  background:transparent;
  border-top:1px solid var(--line-color);
  border-bottom:1px solid var(--line-color);
  letter-spacing:-.02em;
  white-space:nowrap;
}
.tbl_head01 thead a{ color:var(--muted-color); }
.tbl_head01 thead a:hover{ color:var(--body-color); }

/* 줄 */
.tbl_head01 tbody td{
  height:auto;
  padding:1.6rem .8rem;
  font-size:var(--fs-body-sm);
  color:var(--text-color);
  border-top:0;
  border-bottom:1px solid var(--line-color);
  line-height:var(--kk-lh-list);
  text-align:center;
}
.tbl_head01 tbody tr:nth-child(even) td{ background:rgba(28,27,25,.022); }
.tbl_head01 tbody tr:hover td{ background:rgba(206,100,85,.045); }

/* 제목 칸만 왼쪽 */
.tbl_head01 .td_subject,
.tbl_head01 td.td_subject{ text-align:left; padding-left:1.6rem; }
.bo_tit{
  display:block;
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
}
.tbl_head01 tbody tr:hover .bo_tit{ color:var(--point-color); }
.bo_tit svg{ width:1.4rem; height:1.4rem; margin-left:.8rem; }

/* 칸 너비 — 원본 값에 맞춤 */
#bo_list .td_num, #bo_list .td_num2{ width:6rem; display:table-cell; }
#bo_list .td_name{ width:10rem; text-align:center; padding:1.6rem .8rem; display:table-cell; }
#bo_list .td_datetime, #bo_list .td_date{ width:9rem; display:table-cell; }
.td_num, .td_num2, .td_name, .td_datetime, .td_date{
  font-size:var(--fs-caption);
  color:var(--muted-color);
  white-space:nowrap;
}
.td_num strong{ color:var(--body-color); font-weight:400; }

/* 글이 없을 때 */
.tbl_head01 .empty_table{
  padding:6rem 0;
  text-align:center;
  color:var(--muted-color);
  font-size:var(--fs-body-sm);
  background:transparent;
}

/* ── 쪽 넘기기 — 왼쪽 아래 ─────────────────────────────────────────────── */
.pg_wrap{ margin:2.4rem 0 0; text-align:left; }
.pg{ display:inline-flex; align-items:center; gap:.4rem; }
.pg_page, .pg_current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3rem;
  height:3rem;
  font-size:var(--fs-body-sm);
  border:0;
  border-radius:0;
}
.pg_page{ background:var(--lightgray-color); color:var(--muted-color); }
.pg_page:hover{ background:var(--line-color); color:var(--body-color); }
.pg_current{
  background:transparent;
  color:var(--body-color);
  font-weight:600;
  box-shadow:inset 0 -1px 0 var(--body-color);
}

/* ── 「글쓰기」 — 오른쪽 아래 ───────────────────────────────────────────── */
.bo_fx{
  float:none;
  display:flex;
  justify-content:flex-end;
  margin:3.2rem 0 0;
}
.bo_fx::after{ display:none; }

@media (max-width:768px){
  #bo_list, #bo_v, #bo_w{ max-width:100%; padding-left:1.6rem; padding-right:1.6rem; }
  #bo_list .td_num, #bo_list .td_num2,
  #bo_list .td_datetime, .tbl_head01 th:first-child,
  .tbl_head01 th:nth-child(4), .tbl_head01 th:nth-child(5){ display:none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 머리말 · 배너 · 본문 여백 — 되살림 ★★
   --------------------------------------------------------------------------
   앞서 dd__basic 블록을 정리할 때 :root 값이 함께 지워졌습니다.
   이 블록이 파일 끝이라 여기 값이 최종입니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-hd-h:8rem;               /* 머리말 80px */
  --kk-hd-h-scr:6.4rem;         /* 스크롤 뒤 64px */
  --kk-logo-h:4.4rem;           /* 로고 44px */
  --kk-logo-h-scr:3.6rem;
  --kk-logo-h-ft:4rem;
  --kk-banner-h:18rem;          /* 배너 180px */
  --kk-banner-bottom:0rem;      /* 글자는 가운데 */
  --kk-body-top:4rem;           /* 배너 아래 본문까지 40px */
}

/* 배너 — 글자를 가운데에 */
.sub_title{
  height:calc(var(--kk-banner-h) + var(--kk-hd-h));
  min-height:calc(var(--kk-banner-h) + var(--kk-hd-h));
  padding-top:var(--kk-hd-h);
  padding-bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.sub_title .title{
  position:static;
  transform:none;
  width:100%;
  text-align:center;
}
.sub_title .ghost{
  top:auto;
  right:-.05em;
  bottom:-.14em;
  left:auto;
  transform:none;
  font-size:clamp(4.4rem, 7vw, 7.2rem);
  line-height:1;
}

/* 본문 위 여백 — 한 곳에서만 */
.sub_content{ padding-top:var(--kk-body-top); }
.sub_content .ms,
.sub_content .wrap,
.sub_content .content,
.sub_content .minor-wrap,
.sub_content #faq_sch,
.sub_content #bo_cate,
.sub_content > *:first-child,
.sub_content.is-center > *:first-child,
.ms{
  padding-top:0;
  margin-top:0;
}

/* 배너 뒤 본문은 두 번 밀리지 않게 */
.sub_title + .sub_content,
.sub_title ~ .sub_content{ margin-top:0; }
#sub_nav, .sub_nav{ display:none; }

@media (max-width:1024px){
  :root{ --kk-hd-h:6.4rem; --kk-hd-h-scr:5.6rem;
         --kk-logo-h:3.8rem; --kk-logo-h-scr:3.2rem;
         --kk-banner-h:15rem; --kk-body-top:3.2rem; }
}
@media (max-width:768px){
  :root{ --kk-banner-h:13rem; --kk-body-top:2.8rem; }
  .sub_title .ghost{ font-size:clamp(3.6rem, 11vw, 5.2rem); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ dd__basic 의 분류 줄 — 세로바로
   --------------------------------------------------------------------------
   <nav id="bo_cate"> 가 «#bo_list 안» 에 있습니다.
   앞서 정한 세로바 모양을 그대로 씁니다.
   ══════════════════════════════════════════════════════════════════════════ */
#bo_list #bo_cate,
.sub_content #bo_list #bo_cate{
  display:flex;
  justify-content:center;
  margin:0 0 2rem;
  padding:0;
  border:0;
}
#bo_list #bo_cate h2{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
#bo_list #bo_cate ul{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border:0;
}
#bo_list #bo_cate li{ margin:0; padding:0; }
#bo_list #bo_cate a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:auto;
  padding:.4rem 1.2rem;
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--muted-color);
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  line-height:1.5;
}
#bo_list #bo_cate a:hover{ color:var(--body-color); background:none; }
#bo_list #bo_cate #bo_cate_on{
  color:var(--body-color);
  font-weight:600;
  background:none;
  border:0;
  box-shadow:none;
}
/* 세로바 — 사이사이에만 */
#bo_list #bo_cate li + li a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:1.2rem;
  background:var(--line-color);
}

@media (max-width:600px){
  #bo_list #bo_cate a{ padding:.4rem .9rem; font-size:var(--fs-body-sm); }
}


/* ── 읽는 글 폭 ─────────────────────────────────────────────────────────
   앞서 정리할 때 함께 지워졌습니다. 되살립니다. */
:root{
  --kk-read-w:72rem;            /* 720px — 한 줄 약 45자 */
}
.kk-doc, .mtext,
.ms, .ms .read,
.wrap.works,
#bo_v.wrap{
  max-width:var(--kk-read-w);
  margin-left:auto;
  margin-right:auto;
}
/* 표가 있는 화면은 넓게 */
#bo_list, #bo_v, #bo_w,
.sub_content #bo_list,
.sub_content #bo_v,
.sub_content #bo_w{
  max-width:112rem;
  padding-left:2.4rem;
  padding-right:2.4rem;
}
#bo_gall.wrap,
.sub_content #bo_gall.wrap{ max-width:var(--inner-size); }
.kk-doc table.tbl, .mtext table.tbl{ max-width:none; width:100%; }

@media (max-width:768px){
  .kk-doc, .mtext, .ms, .ms .read, .wrap.works,
  #bo_list, #bo_v, #bo_w{ max-width:100%; padding-left:1.6rem; padding-right:1.6rem; }
}





/* ── 글 보기 화면 — 제목·글쓴이·본문 ────────────────────────────────────── */
#bo_v_title{
  margin:0 0 1.2rem;
  padding:0;
}
#bo_v_title .bo_v_tit{
  font-size:clamp(2rem, 2.6vw, 2.4rem);
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
  line-height:1.5;
}

/* 글쓴이 줄 */
#bo_v_info{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.2rem;
  margin:0 0 1.6rem;
  padding:0 0 1.6rem;
  font-size:var(--fs-caption);
  color:var(--muted-color);
  border-bottom:1px solid var(--line-color);
}
#bo_v_info strong{ font-weight:500; color:var(--body-color); }
#bo_v_info .profile_info{ display:flex; align-items:center; gap:.8rem; }
#bo_v_info .pf_img{ display:none; }

/* 본문 */
#bo_v_atc{ padding:2.4rem 0 3.2rem; }
#bo_v_con{
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  color:var(--text-color);
  word-break:break-all;
}
#bo_v_con p{ margin:0 0 1.2rem; }

/* 첨부 파일 · 링크 */
#bo_v_file, #bo_v_link{
  margin:0 0 2rem;
  padding:1.6rem 0;
  border-top:1px solid var(--line-color);
  border-bottom:1px solid var(--line-color);
}
#bo_v_file li, #bo_v_link li{ padding:.4rem 0; }
#bo_v_file a, #bo_v_link a{
  font-size:var(--fs-body-sm);
  color:var(--text-color);
}
#bo_v_file a:hover, #bo_v_link a:hover{ color:var(--point-color); }

/* 좋아요·공유 줄 — 안 쓰므로 숨깁니다 */
.bo_v_share{ display:none; }
#bo_v_act{ display:flex; justify-content:center; gap:1.2rem; margin:2.4rem 0; }

/* 댓글 */
#bo_vc h2{
  margin:3.2rem 0 1.6rem;
  padding-bottom:1rem;
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--body-color);
  border-bottom:1px solid var(--body-color);
  display:inline-block;
}
#bo_vc article{
  padding:1.6rem 0;
  border-bottom:1px solid var(--line-color);
}
#bo_vc header{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.8rem;
  font-size:var(--fs-caption);
  color:var(--muted-color);
}
#bo_vc p{ font-size:var(--fs-body-sm); line-height:var(--kk-lh); }
#bo_vc .cmt_contents{ font-size:var(--fs-body-sm); line-height:var(--kk-lh); }

/* 「등록된 댓글이 없습니다」 */
#bo_vc .empty_list{
  padding:4rem 0;
  text-align:center;
  color:var(--muted-color);
  font-size:var(--fs-body-sm);
}





/* ── 본문 자리의 큰 빈칸 ────────────────────────────────────────────────
   ★ 원본이 이렇게 정합니다.
       #bo_v_atc { min-height:200px; height:auto !important; height:200px }
       #bo_v_con { margin:4rem 0 }

     본문이 짧아도 «200px 자리» 를 잡고 위아래 40px 씩 더해
     280px 이 빈칸으로 남습니다.

   ★ height 에 !important 가 있어 보통 규칙으로는 못 이깁니다.
     같은 !important 로 맞섭니다. */
#bo_v_atc{
  min-height:0 !important;
  height:auto !important;
  padding:2rem 0 2.4rem;
}
#bo_v_con{
  margin:0;
  min-height:0;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 게시판 스킨보다 세게 — .sub_content 를 붙입니다 ★★
   --------------------------------------------------------------------------
   ★ 게시판 스킨은 «페이지를 그릴 때» 자기 style.css 를 부릅니다.
       add_stylesheet('… /skin/board/dd__basic/style.css', 0)

     head.sub.php 의 kkeullim.css 는 «머리말을 그릴 때» 들어가므로
     스킨이 «나중에» 읽힙니다. 같은 힘이면 스킨이 이깁니다.

   ★ 우리 규칙에 .sub_content 를 붙여 힘을 한 단 올립니다.
     스킨의 .bo_v_com (0,1,0) 을 .sub_content .bo_v_com (1,1,0) 이 이깁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 아이콘 줄 — 오른쪽 ─────────────────────────────────────────────────── */
.sub_content #bo_v_top{
  display:block;
  margin:0 0 1.2rem;
}
.sub_content #bo_v_top::after{ display:none; }
.sub_content .bo_v_com,
.sub_content #bo_v_top .bo_v_com,
.sub_content #bo_v_bot .bo_v_com{
  float:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1.2rem;
  margin:0;
  padding:0;
  background:none;
}
.sub_content .bo_v_com > li{
  position:relative;
  float:none;
  margin:0;
}

/* ── 본문 — 큰 빈칸 없애기 ──────────────────────────────────────────────── */
.sub_content #bo_v_atc{
  min-height:0 !important;
  height:auto !important;
  padding:2rem 0 2.4rem;
}
.sub_content #bo_v_con{
  margin:0;
  min-height:0;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
}
.sub_content #bo_v_info .profile_info{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.sub_content #bo_v_info{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.2rem;
  margin:0 0 1.2rem;
  padding:0 0 1.2rem;
  border-bottom:1px solid var(--line-color);
}
.sub_content #bo_v_title{ margin:0 0 1rem; }

/* ── 「수정·삭제」 메뉴 ──────────────────────────────────────────────────── */
.sub_content .more_opt{
  position:absolute;
  top:3.6rem;
  right:0;
  z-index:20;
  min-width:11rem;
  width:auto;
  background:#fff;
  border:1px solid var(--line-color);
  box-shadow:var(--kk-lift-2);
  white-space:nowrap;
}
.sub_content .more_opt li{
  float:none;
  width:100%;
  padding:0;
  white-space:nowrap;
}
.sub_content .more_opt li a,
.sub_content .more_opt li button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  padding:1rem 1.4rem;
  font-size:var(--fs-body-sm);
  white-space:nowrap;
}

/* ── 목록 화면도 같은 방식으로 ──────────────────────────────────────────── */
.sub_content #bo_btn_top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 1.2rem;
}
.sub_content #bo_btn_top::after{ display:none; }
.sub_content #bo_list_total{ float:none; line-height:1.4; }
.sub_content .btn_bo_user{
  float:none;
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:0;
  padding:0;
}
.sub_content .btn_bo_user li{ float:none; width:auto; margin:0; }
.sub_content .btn_bo_user .btn,
.sub_content .btn_bo_user .btn_b01{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.8rem;
  min-width:2.8rem;
  height:2.8rem;
  min-height:2.8rem;
  padding:0;
  background:none;
  border:0;
  color:var(--muted-color);
}
.sub_content .btn_bo_user svg{ width:2rem; height:2rem; stroke-width:1.4; }
.sub_content .bo_fx{
  float:none;
  display:flex;
  justify-content:flex-end;
  margin:3.2rem 0 0;
}
.sub_content .bo_fx::after{ display:none; }


/* ── 선 아래 빈칸 — 「스크랩」 자리 ─────────────────────────────────────
   ★ <div id="bo_v_share" class="blind"> 가 padding:20px 0 을 차지합니다.
     .blind 는 화면에서 안 보이게 하는 클래스인데 «자리는 남습니다».

   ★ 제가 .bo_v_share(점)로 짚었는데 실제로는 #bo_v_share(우물)입니다.

   ★ 스크랩·좋아요는 우리 사이트에 쓰지 않으므로 통째로 없앱니다. */
.sub_content #bo_v_share,
.sub_content #bo_v_act,
.sub_content #bo_v_atc_title{
  display:none !important;
  padding:0;
  margin:0;
  height:0;
}

/* 본문 위 여백을 다시 잡습니다 */
.sub_content #bo_v_atc{
  min-height:0 !important;
  height:auto !important;
  padding:2rem 0 2.4rem;
}
.sub_content #bo_v_con{ margin:0; }


/* ── 글을 마우스로 골랐을 때 ────────────────────────────────────────────
   브라우저 기본은 파랑 또는 검정입니다.
   사이트 톤에 맞춰 옅은 테라코타로 둡니다. */
::selection{
  background:rgba(206, 100, 85, .18);
  color:var(--body-color);
}
::-moz-selection{
  background:rgba(206, 100, 85, .18);
  color:var(--body-color);
}




/* ══════════════════════════════════════════════════════════════════════════
   ★★ 글 보기 — 원본에 맡기고 크기·색만 ★★
   --------------------------------------------------------------------------
   ★ 원본이 이미 갖추고 있습니다.
       #bo_vc h2    화면 밖으로 (숨김)
       .cmt_btn     「댓글 0」 · 아래 선
       .bo_v_com    float:right — 글쓴이 줄과 같은 줄

     제가 display:flex 로 바꾸고 h2 를 살리면서 깨뜨렸습니다.
     원본에 맡기고 «크기·색·여백» 만 맞춥니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 제목 ──────────────────────────────────────────────────────────────── */
.sub_content #bo_v_title .bo_v_tit{
  font-size:clamp(2rem, 2.6vw, 2.4rem);
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
}

/* ── 글쓴이 줄 ─────────────────────────────────────────────────────────── */
.sub_content #bo_v_info{ font-size:var(--fs-caption); color:var(--muted-color); }
.sub_content #bo_v_info strong{ font-weight:500; color:var(--body-color); }
.sub_content #bo_v_info .profile_info{ margin:0 0 1.2rem; }

/* ── 아이콘 — 크기만 ────────────────────────────────────────────────────── */
.sub_content .bo_v_com svg,
.sub_content .btn_bo_user svg{ width:2rem; height:2rem; stroke-width:1.4; }
.sub_content .bo_v_com .btn,
.sub_content .bo_v_com .btn_b01{
  width:2.8rem; height:2.8rem;
  padding:0;
  background:none;
  border:0;
  color:var(--muted-color);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sub_content .bo_v_com .btn:hover{ color:var(--body-color); background:none; border:0; }

/* ── 본문 — 큰 빈칸만 없앱니다 ──────────────────────────────────────────── */
.sub_content #bo_v_atc{ min-height:0 !important; height:auto !important; }
.sub_content #bo_v_con{ margin:2rem 0 2.4rem; font-size:var(--fs-body); line-height:var(--kk-lh); }
.sub_content #bo_v_share,
.sub_content #bo_v_act{ display:none !important; padding:0; height:0; }

/* ── 「수정·삭제」 메뉴 — 폭만 ──────────────────────────────────────────── */
.sub_content .more_opt{ min-width:11rem; white-space:nowrap; box-shadow:var(--kk-lift-2); }
.sub_content .more_opt li a,
.sub_content .more_opt li button{ white-space:nowrap; font-size:var(--fs-body-sm); }

/* ── 「댓글 0」 — 크기만 ────────────────────────────────────────────────── */
.sub_content .cmt_btn{ font-size:var(--fs-body); }
.sub_content .cmt_btn b{ font-size:1em; font-weight:500; color:var(--body-color); }


/* ── 아이콘 줄 — 원본의 float:right 로 되돌림 (마지막) ──────────────────
   ★ 앞서 제가 float:none 으로 바꾼 것이 여러 곳에 남았습니다.
     원본은 float:right 라 «글쓴이 줄과 같은 줄» 에 놓입니다.
     그것이 맞습니다. */
.sub_content .bo_v_com,
.sub_content #bo_v_top .bo_v_com,
.sub_content #bo_v_bot .bo_v_com,
.bo_v_com{
  float:right;
  display:block;
  margin:0;
  padding:0;
}
.sub_content .bo_v_com > li,
.bo_v_com > li{
  position:relative;
  float:left;
  margin-left:.8rem;
}
.sub_content #bo_v_top,
#bo_v_top{
  display:block;
  float:none;
  margin:0;
}
.sub_content #bo_v_top::after,
#bo_v_top::after{
  display:block;
  visibility:hidden;
  clear:both;
  content:"";
}

/* 「댓글목록」 글자 — 원본대로 화면 밖으로 */
.sub_content #bo_vc > h2,
#bo_vc > h2{
  position:absolute;
  font-size:0;
  line-height:0;
  overflow:hidden;
  width:1px; height:1px;
  margin:0; padding:0;
  clip:rect(0,0,0,0);
}

/* 제목 아래 빈칸 */
.sub_content #bo_v_atc,
#bo_v_atc{
  min-height:0 !important;
  height:auto !important;
  padding:0;
}
.sub_content #bo_v_share,
#bo_v_share,
.sub_content #bo_v_act,
#bo_v_act{ display:none !important; height:0; padding:0; margin:0; }


/* ══════════════════════════════════════════════════════════════════════════
   ★ 글 보기 — 아이콘 자리 · 여백 (마무리)
   --------------------------------------------------------------------------
   ★ #bo_v_top 이 <section id="bo_v_info"> «안» 에 있습니다.
     float:right 는 그 안에서만 갑니다.
     bo_v_info 가 폭을 다 쓰도록 하면 오른쪽 끝까지 갑니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 글쓴이 줄이 폭을 다 쓰게 ────────────────────────────────────────── */
.sub_content #bo_v_info,
#bo_v_info{
  display:block;
  width:100%;
  overflow:hidden;              /* float 를 감쌉니다 */
  margin:0 0 1.6rem;
  padding:0 0 1.2rem;
  border-bottom:1px solid var(--line-color);
  font-size:var(--fs-caption);
  color:var(--muted-color);
}
.sub_content #bo_v_info .profile_info,
#bo_v_info .profile_info{
  float:left;
  display:block;
  margin:0;
}
.sub_content #bo_v_info .profile_info_ct{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.2rem;
}
.sub_content #bo_v_top,
#bo_v_top{
  float:right;
  display:block;
  margin:0;
  padding:0;
}

/* ── ② 본문 위 여백 ─────────────────────────────────────────────────────── */
.sub_content #bo_v_atc,
#bo_v_atc{
  min-height:0 !important;
  height:auto !important;
  padding:0;
  margin:0;
}
.sub_content #bo_v_con,
#bo_v_con{
  margin:0 0 2.4rem;
  padding:0;
  min-height:0;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
}

/* ── ③ 「댓글 0」 위 여백 ──────────────────────────────────────────────── */
.sub_content .cmt_btn,
.cmt_btn{
  margin:2.4rem 0 0;
  padding:0 0 1rem;
}


/* ── 「페이지 정보」 글자 ─────────────────────────────────────────────────
   <h2>페이지 정보</h2> 는 읽어 주는 장치용입니다.
   화면에는 안 나와야 합니다. */
.sub_content #bo_v_info > h2,
#bo_v_info > h2{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  font-size:0;
  line-height:0;
}


/* ── 읽어 주는 장치용 제목 — 모두 숨김 ──────────────────────────────────
   화면에 나오면 안 되는 것들입니다. */
.sub_content #bo_v_info > h2,
.sub_content #bo_vc > h2,
.sub_content #bo_v_atc_title,
.sub_content #bo_cate h2,
.sub_content #bo_v_top h2,
.sub_content .tbl_head01 caption,
.sub_content #bo_vc article h2,
.sub_content .bo_sch legend,
#bo_v_info > h2, #bo_vc > h2, #bo_cate h2, #bo_v_top h2{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  clip:rect(0,0,0,0);
  font-size:0;
  line-height:0;
  white-space:nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 「수정·삭제」 메뉴 · 본문 여백 (마무리)
   --------------------------------------------------------------------------
   ★ ① 앞서 넣은 «제목 숨김» 이 너무 넓게 잡혔습니다.
        #bo_v_top h2 는 그 «안의 모든 h2» 를 잡습니다.
        .more_opt 안의 것까지 걸려 메뉴가 안 보였습니다.
        «바로 아래 자식» (>)만 짚습니다.

   ★ ② 본문 위아래 여백을 없앱니다. 작품을 싣는 자리입니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 제목 숨김 — 범위를 좁힙니다 ──────────────────────────────────────── */
.sub_content #bo_v_top > h2,
#bo_v_top > h2{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

/* 메뉴 안의 글자가 숨김 규칙에 걸리지 않게 되돌립니다.
   ★ 자리(position)는 «원본에 맡깁니다». 말풍선 꼬리가 그것을 씁니다. */
.sub_content .more_opt li,
.sub_content .more_opt li a,
.sub_content .more_opt li button,
.more_opt li, .more_opt li a, .more_opt li button{
  width:auto;
  height:auto;
  overflow:visible;
  clip:auto;
  font-size:var(--fs-body-sm);
  line-height:var(--kk-lh-tight);
}
.sub_content .more_opt,
.more_opt{
  min-width:11rem;
  white-space:nowrap;
  box-shadow:var(--kk-lift-2);
}
.sub_content .more_opt li a,
.sub_content .more_opt li button{
  font-size:var(--fs-body-sm);
  line-height:var(--kk-lh-tight);
  white-space:nowrap;
}

/* ── ② 본문 위아래 여백 없애기 ──────────────────────────────────────────── */
.sub_content #bo_v_atc,
#bo_v_atc{
  min-height:0 !important;
  height:auto !important;
  margin:0;
  padding:0;
}
.sub_content #bo_v_con,
#bo_v_con{
  margin:0;
  padding:0;
  min-height:0;
}
/* 글쓴이 줄과 본문 사이만 조금 */
.sub_content #bo_v_info,
#bo_v_info{ margin:0 0 2rem; }
/* 본문과 「댓글」 사이 */
.sub_content .cmt_btn,
.cmt_btn{ margin:3.2rem 0 0; }


/* ══════════════════════════════════════════════════════════════════════════
   ★ 「수정·삭제」 메뉴가 뒤로 숨던 것
   --------------------------------------------------------------------------
   ★ 두 가지가 겹쳤습니다.
     ① #bo_v_info 에 overflow:hidden — float 를 감싸려고 제가 넣었는데,
        메뉴가 그 «바깥» 으로 나가면서 잘렸습니다.
     ② .more_opt 의 z-index 를 999 → 20 으로 제가 낮췄습니다.

   ★ overflow 대신 «clearfix» 로 float 를 감쌉니다.
     그러면 바깥으로 나가는 것이 안 잘립니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① overflow 대신 clearfix ──────────────────────────────────────────── */
.sub_content #bo_v_info,
#bo_v_info{
  overflow:visible;
  position:relative;
  z-index:1;
}
.sub_content #bo_v_info::after,
#bo_v_info::after{
  content:"";
  display:block;
  clear:both;
}

/* ── ② z-index 를 원본대로 ──────────────────────────────────────────────── */
.sub_content .more_opt,
.more_opt{
  z-index:999;
}
/* 메뉴를 담는 자리도 위로 */
.sub_content #bo_v_top,
#bo_v_top{
  position:relative;
  z-index:10;
}
.sub_content .bo_v_com > li,
.bo_v_com > li{ position:relative; }

/* 본문이 메뉴를 덮지 않게 */
.sub_content #bo_v_atc,
#bo_v_atc{ position:relative; z-index:0; }


/* ── 목록 화면의 「옵션」 메뉴도 같은 방식으로 ───────────────────────────── */
.sub_content #bo_btn_top,
#bo_btn_top{
  position:relative;
  z-index:10;
  overflow:visible;
}
.sub_content .btn_bo_user > li,
.btn_bo_user > li{ position:relative; }
.sub_content #bo_list,
#bo_list{ overflow:visible; }


/* ── 선 아래 빈칸 — 첨부 그림 자리 ──────────────────────────────────────
   ★ <div id="bo_v_img"> 는 그림이 없어도 그려지고
     margin:4rem 0 (위아래 40px씩) 을 차지합니다.

   ★ 여백을 0 으로 두고, 안에 그림이 «있을 때만» 자리를 갖게 합니다. */
.sub_content #bo_v_img,
#bo_v_img{
  margin:0;
  padding:0;
}
.sub_content #bo_v_img:has(img),
#bo_v_img:has(img){
  margin:0 0 2.4rem;
}
/* :has 를 못 읽는 브라우저를 위해 — 그림 자체에 여백 */
.sub_content #bo_v_img img,
#bo_v_img img{
  display:block;
  margin:0 0 1.6rem;
  max-width:100%;
  height:auto;
}

/* 「본문」 글자도 자리를 안 잡게 */
.sub_content #bo_v_atc_title,
#bo_v_atc_title{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  clip:rect(0,0,0,0);
}


/* ── 선 아래 빈칸 — 진범 ────────────────────────────────────────────────
   ★ #bo_v_info .profile_info 에 margin:4rem 0 1.6rem 0 이 걸려 있습니다.
     «위 40px» 입니다.

     float:left 인 요소라 감싸개가 그만큼 늘어나
     선 아래에 빈칸이 생깁니다. */
.sub_content #bo_v_info .profile_info,
#bo_v_info .profile_info{
  margin:0 !important;
  float:left;
}
.sub_content #bo_v_info .profile_info_ct,
#bo_v_info .profile_info_ct{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.2rem;
  margin:0;
}


/* ── 「등록된 댓글이 없습니다」 — 위아래 80px 을 줄입니다 ────────────────── */
.sub_content #bo_vc_empty,
#bo_vc_empty{
  padding:4rem 0 !important;
  text-align:center;
  color:var(--muted-color);
  font-size:var(--fs-body-sm);
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 첫 화면 배경 사진 — 글자가 읽히게
   --------------------------------------------------------------------------
   ★ 사진 위에 흰 글자를 얹습니다.
     사진은 자리마다 밝기가 다릅니다. 책장 쪽은 어둡고 창가 쪽은 밝습니다.
     «어두운 덮개» 를 깔면 어디서든 읽힙니다.

   ★ 덮개를 옅게 하시려면 아래 .55 를 낮추십시오.
   ══════════════════════════════════════════════════════════════════════════ */
#main_intro .main_intro_slide .itm .slide_bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(28, 27, 25, .42) 0%,
    rgba(28, 27, 25, .55) 55%,
    rgba(28, 27, 25, .68) 100%
  );
  z-index:1;
}
#main_intro .main_intro_slide .itm .txt{
  position:relative;
  z-index:2;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 서브 배너 — 사진을 넣었습니다
   --------------------------------------------------------------------------
   ★ sub.head.php 가 images/_sub_bg01~09.jpg 를 «있으면» 씁니다.
       1 출판사 소개 · 2 도서 · 3 책 만들기 · 4 소식
       5 작가의 방 · 6 문의 · 9 회원

     한 사진(책방 풍경)에서 «자리를 달리해» 일곱을 만들었습니다.

   ★ 사진 위에 흰 글자를 얹으므로 어두운 덮개를 깝니다.
     덮개를 옅게 하시려면 아래 .58 을 낮추십시오.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_title{
  background-color:var(--secondary-color);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* 어두운 덮개 — 글자가 읽히게 */
.sub_title::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(28, 27, 25, .48) 0%,
    rgba(28, 27, 25, .58) 50%,
    rgba(28, 27, 25, .70) 100%
  );
}
.sub_title::after{ display:none; }

/* 글자를 덮개 위로 */
.sub_title .title{ position:relative; z-index:3; }
.sub_title .ghost{ z-index:2; color:rgba(255,255,255,.10); }


/* ── 서브 배너 — 한 장으로 통일 ─────────────────────────────────────────
   ★ images/_sub_bg.jpg 한 장을 모든 화면에 씁니다.
     «펼친 책» 사진입니다. 글자도 사물도 없어 조용합니다.

   ★ 사진이 밝아 덮개를 조금 진하게 둡니다.
     옅게 하시려면 아래 .62 를 낮추십시오. */
.sub_title::before{
  background:linear-gradient(
    to bottom,
    rgba(28, 27, 25, .52) 0%,
    rgba(28, 27, 25, .62) 50%,
    rgba(28, 27, 25, .74) 100%
  );
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 배너 안 글자 — 되살림 (마지막) ★★
   --------------------------------------------------------------------------
   ★ 제목·설명이 안 보이고 배경 큰 글자만 오른쪽에 걸쳐 있었습니다.
     .title 의 width·text-align 이 나중 블록에서 지워졌습니다.

   ★ 배경 큰 글자(.ghost)도 오른쪽으로 넘쳐 잘렸습니다.
     배너 안에 들어오게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_title{
  position:relative;
  overflow:hidden;              /* 배경 글자가 밖으로 안 나가게 */
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(var(--kk-banner-h) + var(--kk-hd-h));
  min-height:calc(var(--kk-banner-h) + var(--kk-hd-h));
  padding-top:var(--kk-hd-h);
  padding-bottom:0;
  box-sizing:border-box;
}

/* 제목·설명 */
.sub_title .title{
  position:relative;
  z-index:3;
  top:auto; bottom:auto; left:auto; right:auto;
  transform:none;
  width:100%;
  padding:0 2.4rem;
  text-align:center;
}
.sub_title .title h2{
  font-family:var(--serif-font);
  font-size:clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight:400;
  color:#fff;
  letter-spacing:var(--kk-serif-ls);
  margin:0 0 1rem;
}
.sub_title .title p{
  font-size:var(--fs-body);
  font-weight:300;
  color:#d6d2cd;
  letter-spacing:-.02em;
  margin:0;
  opacity:1;
}

/* 배경 큰 글자 — 배너 안에 */
.sub_title .ghost{
  position:absolute;
  z-index:2;
  top:auto;
  bottom:-.1em;
  right:2.4rem;
  left:auto;
  transform:none;
  font-family:var(--serif-font);
  font-size:clamp(4rem, 6vw, 6.4rem);
  line-height:1;
  color:rgba(255, 255, 255, .12);
  white-space:nowrap;
  pointer-events:none;
}

@media (max-width:768px){
  .sub_title .title p{ font-size:var(--fs-body-sm); }
  .sub_title .ghost{ font-size:clamp(3.2rem, 10vw, 4.8rem); right:1.6rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 로그인 · 회원 폼 — 심플하게 ★★
   --------------------------------------------------------------------------
   ★ 글자가 큰 까닭
     원본이 «em» 단위를 씁니다. em 은 부모 크기에 «곱하는» 단위라
     부모가 이미 크면 더 커집니다.

       .mbskin h1        2em     → 32px
       .mbskin .btn      1.25em  → 20px
       #fregister h2     1.2em

   ★ 우리 기준으로 못박습니다.
       20px  화면 제목
       16px  입력칸 · 단추
       14px  안내글 · 이름표
       13px  작은 도움말
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 감싸개 ────────────────────────────────────────────────────────────── */
.mbskin,
.register,
#find_info,
.sub_content .mbskin,
.sub_content .register{
  max-width:40rem;
  margin:0 auto;
  padding:0;
  border:0;
  background:none;
  font-size:var(--fs-body);
  text-align:left;
}

/* ── 화면 제목 ─────────────────────────────────────────────────────────── */
.mbskin h1,
.register h1,
#find_info h1,
.sub_content .mbskin h1,
.sub_content .register h1{
  margin:0 0 2.4rem;
  padding:0;
  font-family:var(--serif-font);
  font-size:2rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:var(--kk-serif-ls);
  text-align:center;
  border:0;
  background:none;
}

/* ── 입력칸 ────────────────────────────────────────────────────────────── */
.mbskin .frm_input,
.register .frm_input,
#find_info .frm_input,
.sub_content .mbskin .frm_input,
.sub_content .register .frm_input,
#login_fs .frm_input{
  width:100%;
  height:4.8rem;
  margin:0 0 .8rem;
  padding:0 1.4rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:#fff;
  border:1px solid var(--line-color);
  border-radius:0;
  box-shadow:none;
  transition:border-color .18s;
}
.mbskin .frm_input:focus,
.register .frm_input:focus{
  border-color:var(--body-color);
  outline:none;
  box-shadow:none;
}
.mbskin .frm_input::placeholder,
.register .frm_input::placeholder{
  color:var(--muted-color);
  font-size:var(--fs-body-sm);
}

/* ── 단추 ──────────────────────────────────────────────────────────────── */
.mbskin .btn_submit,
.register .btn_submit,
#find_info .btn_submit,
.sub_content .mbskin .btn_submit,
.sub_content .register .btn_submit{
  width:100%;
  height:4.8rem;
  min-height:4.8rem;
  margin:1.2rem 0 0;
  padding:0;
  font-size:var(--fs-body);
  font-weight:500;
  letter-spacing:-.02em;
  background:var(--body-color);
  color:var(--white-color);
  border:1px solid var(--body-color);
  border-radius:0;
}
.mbskin .btn_submit:hover,
.register .btn_submit:hover{
  background:var(--kk-point-fill);
  border-color:var(--kk-point-fill);
}

/* ── 자동로그인 체크 ───────────────────────────────────────────────────── */
#login_info{
  margin:1.6rem 0 0;
  padding:0;
  text-align:left;
}
.login_if_auto label,
#login_info label{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  cursor:pointer;
}

/* ── 아래 링크 줄 ──────────────────────────────────────────────────────── */
.mbskin .btn_confirm,
#login_frm .btn_confirm{
  margin:2rem 0 0;
  padding:0;
}
.mb_login_notice,
#login_frm .login_etc,
.mbskin .etc_lnk{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:2rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
  font-size:var(--fs-body-sm);
}
.mbskin .etc_lnk a,
#login_frm .login_etc a{
  position:relative;
  padding:0 1.2rem;
  color:var(--muted-color);
}
.mbskin .etc_lnk a:hover{ color:var(--body-color); }
.mbskin .etc_lnk a + a::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:1.2rem;
  background:var(--line-color);
}

/* ── 회원가입 — 이름표와 안내글 ─────────────────────────────────────────── */
#fregister h2,
.sub_content #fregister h2{
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--body-color);
  margin:2.4rem 0 1rem;
}
#fregister p,
.sub_content #fregister p{
  font-size:var(--fs-body-sm);
  line-height:var(--kk-lh);
  color:var(--muted-color);
}
#fregister p i,
.sub_content #fregister p i{ font-size:1em; }
#fregister label,
.register label{
  display:block;
  margin:0 0 .5rem;
  font-size:var(--fs-body-sm);
  color:var(--body-color);
}
#fregister .frm_info,
.register .frm_info{
  margin:.4rem 0 0;
  font-size:1.3rem;
  color:var(--muted-color);
  line-height:var(--kk-lh-list);
}

/* ── 약관 상자 ─────────────────────────────────────────────────────────── */
#fregister_term,
#fregister_private{
  font-size:var(--fs-body-sm);
  line-height:var(--kk-lh);
}
#fregister_private table,
.sub_content #fregister_private table{ font-size:var(--fs-caption); }

/* ── 「비밀번호 찾기」 등 새 창 ─────────────────────────────────────────── */
.new_win .btn_submit{ font-size:var(--fs-body); }
.register .btn_confirm .btn_submit,
.register .btn_confirm .btn_close{ font-size:var(--fs-body); }


/* ══════════════════════════════════════════════════════════════════════════
   ★ 없어진 변수 되살림 · 폼 제목 중복
   --------------------------------------------------------------------------
   ★ --kk-point-fill 이 «정의 없이» 쓰이고 있었습니다.
     앞서 블록을 정리할 때 함께 지워진 것입니다.
     빈 값이면 background 가 사라져 마우스를 올렸을 때 아무것도 안 보입니다.

   ★ 폼 안의 <h1>로그인</h1> — 배너에 이미 나오므로 걷어냅니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-point-fill:#b04a3c;      /* 채워지는 바탕 — 흰 글자 대비 5.4:1 */
}

/* ── 폼 안의 제목 — 배너에 이미 나옵니다 ────────────────────────────────── */
.sub_content .mbskin > h1,
.sub_content .register > h1,
.sub_content #find_info > h1,
.mbskin > h1, .register > h1{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

/* ── 단추 — 마우스 올렸을 때 ────────────────────────────────────────────── */
.sub_content .mbskin .btn_submit:hover,
.sub_content .register .btn_submit:hover,
.mbskin .btn_submit:hover,
.register .btn_submit:hover{
  background:var(--kk-point-fill);
  border-color:var(--kk-point-fill);
  color:var(--white-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 정의 없이 쓰이던 변수 — 되살림 ★★
   --------------------------------------------------------------------------
   앞서 블록을 정리할 때 함께 지워졌습니다.
   빈 값이면 그 규칙이 «아예 안 걸립니다».
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 줄간격 */
  --kk-lh:1.6;                  /* 본문 */
  --kk-lh-list:1.45;            /* 목록 · 표 · 작은 글 */
  --kk-lh-tight:1.3;            /* 단추 · 딱지 · 분류 */

  /* 그림자 — 얼마나 떠 있나 */
  --kk-lift-1:0 1px 2px rgba(32, 32, 32, .10);      /* 가까이 — 표지 */
  --kk-lift-2:0 12px 32px rgba(32, 32, 32, .14);    /* 멀리 — 펼침 메뉴 */
  --kk-ring:0 0 0 1px var(--point-color);           /* 입력칸을 눌렀을 때 */

  /* 색 */
  --kk-point-fill:#b04a3c;      /* 채워지는 바탕 — 흰 글자 대비 5.4:1 */
  --kk-point-text:#b04a3c;      /* 작은 글씨용 포인트 — 대비 5.4:1 */
  --kk-faint:#767066;           /* 옅은 글자 — 대비 4.9:1 */

  /* 크기 */
  --kk-hd-h:8rem;
  --kk-hd-h-scr:6.4rem;
  --kk-logo-h:4.4rem;
  --kk-logo-h-scr:3.6rem;
  --kk-logo-h-ft:4rem;
  --kk-banner-h:18rem;
  --kk-banner-bottom:0rem;
  --kk-body-top:4rem;
  --kk-read-w:72rem;
  --kk-title-gap:1.8rem;
}

@media (max-width:1024px){
  :root{ --kk-hd-h:6.4rem; --kk-hd-h-scr:5.6rem;
         --kk-logo-h:3.8rem; --kk-logo-h-scr:3.2rem;
         --kk-banner-h:15rem; --kk-body-top:3.2rem; }
}
@media (max-width:768px){
  :root{ --kk-banner-h:13rem; --kk-body-top:2.8rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 로그인 상자 — 테두리 지우기 · 아래 링크 줄
   --------------------------------------------------------------------------
   ★ .mbskin_box 에 테두리가 있는데 제가 .mbskin 만 짚어 안 잡혔습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content .mbskin_box,
.mbskin_box{
  border:0;
  padding:0;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.sub_content .mbskin,
.mbskin{
  border:0;
  padding:0;
  background:none;
}

/* ── 아래 링크 줄 ──────────────────────────────────────────────────────── */
.sub_content .mbskin .etc_lnk,
.mbskin .etc_lnk{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:2.4rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
}
.sub_content .mbskin .etc_lnk a,
.mbskin .etc_lnk a{
  position:relative;
  padding:0 1.4rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  letter-spacing:-.02em;
}
.sub_content .mbskin .etc_lnk a:hover,
.mbskin .etc_lnk a:hover{ color:var(--body-color); }
.sub_content .mbskin .etc_lnk a + a::before,
.mbskin .etc_lnk a + a::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:1.2rem;
  background:var(--line-color);
}

/* ── 「비회원 구매」 — 판매를 안 하므로 숨깁니다 ─────────────────────────── */
.sub_content #mb_login_odinfo,
#mb_login_odinfo,
.sub_content .mbskin .btn_confirm,
.mbskin .btn_confirm{
  display:none;
}

/* ── 필수 표시(✱) — 로그인은 둘 다 필수라 뺍니다 ────────────────────────── */
.sub_content #login_fs .frm_input + .req,
#login_fs .req,
.mbskin .req{ display:none; }


/* ── 로그인 화면의 붉은 별표 ────────────────────────────────────────────
   ★ .required 에 별표 그림이 깔립니다.
     로그인은 «둘 다 필수» 라 표시가 뜻이 없습니다. 뺍니다.
     회원가입은 필요하므로 그대로 둡니다. */
.sub_content .mbskin .frm_input.required,
.mbskin .frm_input.required,
#login_fs .frm_input.required{
  background-image:none !important;   /* 원본이 !important 라 같은 힘으로 */
}


/* ── 로그인 폼 — 아래 여백 ──────────────────────────────────────────────
   ★ #login_fs 에 padding:35px 이 남아 자동로그인 아래에 빈칸이 생깁니다.
     거기에 .etc_lnk 의 여백이 더해져 75px 이 되었습니다. */
.sub_content #login_fs,
#login_fs{
  padding:0;
  margin:0;
  border:0;
  background:none;
}

/* 자동로그인 줄 */
.sub_content #login_info,
#login_info{
  margin:1.6rem 0 0;
  padding:0;
}
.sub_content #login_info .login_if_auto,
#login_info .login_if_auto{ margin:0; padding:0; }

/* 아래 링크 줄 — 사이를 40px 로 */
.sub_content .mbskin .etc_lnk,
.mbskin .etc_lnk{
  margin:4rem 0 0;
  padding:1.6rem 0 0;
}


/* ── 로그인 폼 — 시안에 맞춰 여백 ───────────────────────────────────────
       배너 아래 ~ 아이디     40 → 80px
       로그인 ~ 자동로그인    16 → 24px
       자동로그인 ~ 선        40 → 60px
       체크박스              16 → 20px */
.sub_content .mbskin,
.mbskin{
  padding-top:4rem;             /* 본문 여백 40px 에 더해 80px */
}
.sub_content #login_info,
#login_info{ margin:2.4rem 0 0; }

.sub_content .mbskin .etc_lnk,
.mbskin .etc_lnk{
  margin:6rem 0 0;
  padding:1.6rem 0 0;
}

/* 체크박스 */
.sub_content #login_info .selec_chk,
#login_info .selec_chk{
  width:2rem;
  height:2rem;
  margin:0;
}
.sub_content #login_info label,
#login_info label{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  padding-left:0;
  vertical-align:middle;
}


/* ── 승인 대기 안내 ─────────────────────────────────────────────────────
   ★ 가입은 하셨으나 아직 승인 전인 분께 보입니다.
     「권한이 없습니다」 만 나오면 기다리시는 줄 모릅니다. */
.wait-note{
  margin:0 0 2rem;
  padding:1.4rem 1.8rem;
  background:var(--lightgray-color);
  border-left:2px solid var(--point-color);
  font-size:var(--fs-body-sm);
  line-height:var(--kk-lh);
  color:var(--text-color);
}
.wait-note a{
  color:var(--point-color);
  border-bottom:1px solid var(--line-color);
}
.wait-note a:hover{ color:var(--kk-point-text); border-bottom-color:var(--kk-point-text); }


/* ══════════════════════════════════════════════════════════════════════════
   ★ 회원가입 완료 화면
   --------------------------------------------------------------------------
   승인제라 «기다리셔야» 합니다. 그것을 알려 드리는 화면입니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content #reg_result,
#reg_result{
  max-width:44rem;
  margin:0 auto;
  padding:2rem 0 0;
  text-align:center;
  border:0;
  background:none;
}
.sub_content #reg_result .reg-logo,
#reg_result .reg-logo{
  margin:0 0 2.4rem;
  line-height:1;
}
.sub_content #reg_result .reg-logo img,
#reg_result .reg-logo img{
  height:4rem;
  width:auto;
}
.sub_content #reg_result .reg-tit,
#reg_result .reg-tit{
  margin:0 0 1.6rem;
  font-family:var(--serif-font);
  font-size:2.2rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:var(--kk-serif-ls);
}
.sub_content #reg_result .reg-txt,
#reg_result .reg-txt{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  color:var(--text-color);
}
.sub_content #reg_result .reg-txt strong,
#reg_result .reg-txt strong{ font-weight:500; color:var(--body-color); }
.sub_content #reg_result .reg-sub,
#reg_result .reg-sub{
  margin:2.4rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
}
.sub_content #reg_result .admin-bar,
#reg_result .admin-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  margin:3.2rem 0 0;
}
.sub_content #reg_result .admin-bar .btn,
#reg_result .admin-bar .btn{ width:100%; }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 폼 — 한 결로 (밑줄 방식) ★★
   --------------------------------------------------------------------------
   로그인 · 회원가입 · 문의 · 글쓰기가 같은 모양입니다.

   ★ 왜 밑줄인가
     사이트가 목록도 표도 «아래 선 하나» 로 가릅니다.
     입력칸만 네모 상자면 결이 어긋납니다.

   ★ 바꾸실 때는 아래 --kk-fld-* 만 고치시면 다섯 화면이 함께 바뀝니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-fld-h:4.4rem;            /* 입력칸 높이 */
  --kk-fld-line:#dcd8d3;        /* 밑줄 색 */
  --kk-fld-gap:2.8rem;          /* 칸과 칸 사이 */
}

/* ── 입력칸 ────────────────────────────────────────────────────────────── */
.mbskin .frm_input,
.register .frm_input,
#find_info .frm_input,
.wform .frm_input,
.kk-doc .frm_input,
.mtext .frm_input,
.sub_content .frm_input,
.sub_content input[type="text"],
.sub_content input[type="password"],
.sub_content input[type="email"],
.sub_content input[type="tel"],
.sub_content input[type="number"],
.sub_content input[type="date"]{
  width:100%;
  height:var(--kk-fld-h);
  padding:0 0 .4rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:none;
  border:0;
  border-bottom:1px solid var(--kk-fld-line);
  border-radius:0;
  box-shadow:none;
  outline:none;
  transition:border-color .2s;
}
.sub_content .frm_input:focus,
.sub_content input[type="text"]:focus,
.sub_content input[type="password"]:focus,
.sub_content input[type="email"]:focus,
.sub_content input[type="tel"]:focus,
.mbskin .frm_input:focus,
.register .frm_input:focus{
  border-bottom-color:var(--body-color);
  box-shadow:none;
  outline:none;
}

/* 고르개도 같은 결로 */
.sub_content select,
.mbskin select,
.register select,
.wform select{
  width:100%;
  height:var(--kk-fld-h);
  padding:0 2.4rem 0 0;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:none;
  border:0;
  border-bottom:1px solid var(--kk-fld-line);
  border-radius:0;
  box-shadow:none;
}
.sub_content select:focus{ border-bottom-color:var(--body-color); box-shadow:none; }

/* 글상자 */
.sub_content .frm_textarea,
.sub_content textarea,
.wform textarea{
  width:100%;
  padding:1.2rem 0;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  color:var(--body-color);
  background:none;
  border:0;
  border-bottom:1px solid var(--kk-fld-line);
  border-radius:0;
  box-shadow:none;
  resize:vertical;
}
.sub_content textarea:focus{ border-bottom-color:var(--body-color); box-shadow:none; }

/* 안내 글자 */
.sub_content .frm_input::placeholder,
.sub_content textarea::placeholder{
  color:#b9b5ae;
  font-size:var(--fs-body-sm);
}

/* ── 칸 사이 ───────────────────────────────────────────────────────────── */
.wrow,
.sub_content .wrow{ margin-bottom:var(--kk-fld-gap); }

/* ── 이름표 ────────────────────────────────────────────────────────────── */
.wrow label,
.sub_content .wrow label,
#fregister label,
.register label{
  display:block;
  margin:0 0 .5rem;
  font-size:var(--fs-body-sm);
  font-weight:400;
  color:var(--muted-color);
  letter-spacing:-.02em;
}

/* 도움말 */
.whelp,
.sub_content .whelp,
.frm_info{
  margin:.6rem 0 0;
  font-size:1.2rem;
  line-height:1.4;
  color:var(--muted-color);
}

/* ── 「필수」 표시 ─────────────────────────────────────────────────────── */
.wrow .req,
.sub_content .req{
  display:inline-block;
  margin-left:.4rem;
  font-size:1.1rem;
  color:var(--kk-point-text);
  vertical-align:middle;
}
.sub_content .frm_input.required,
.mbskin .frm_input.required{ background-image:none !important; }

/* ── 체크·라디오 ───────────────────────────────────────────────────────── */
.sub_content input[type="checkbox"],
.sub_content input[type="radio"]{
  width:1.8rem;
  height:1.8rem;
  accent-color:var(--body-color);
  vertical-align:middle;
}

/* ── 파일 고르기 ───────────────────────────────────────────────────────── */
.sub_content input[type="file"]{
  border-bottom:1px solid var(--kk-fld-line);
  padding:0 0 .8rem;
  height:auto;
}


/* ── 검색칸은 밑줄 규칙에서 뺍니다 ───────────────────────────────────────
   작은 창 안에 들어가는 것이라 밑줄이 어울리지 않습니다. */
.bo_sch .frm_input,
.bo_sch_wrap .frm_input,
#faq_sch .frm_input,
.sch_wrap .frm_input,
.sub_content .bo_sch .frm_input{
  height:4rem;
  padding:0 1.2rem;
  background:#fff;
  border:1px solid var(--line-color);
}
.sub_content .bo_sch select{
  height:4rem;
  padding:0 2.4rem 0 1.2rem;
  background:#fff;
  border:1px solid var(--line-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 회원 화면 — 로그인 · 약관 동의 · 정보 입력 ★★
   --------------------------------------------------------------------------
   셋이 한 결입니다. 입력칸은 밑줄, 이름표는 위에 작게.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 감싸개 ────────────────────────────────────────────────────────────── */
.sub_content .mbskin,
.sub_content #fregister,
.sub_content #reg_result{
  margin:0 auto;
  padding:2rem 0 0;
  border:0;
  background:none;
  text-align:left;
}
.sub_content .mbskin{ max-width:44rem; }
.sub_content #fregister{ max-width:52rem; }
.sub_content #reg_result{ max-width:44rem; text-align:center; }

/* ── 단계 표시 ─────────────────────────────────────────────────────────── */
.reg-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:0 0 5rem;
  padding:0;
  list-style:none;
}
.reg-steps li{
  position:relative;
  padding:0 1.6rem;
  font-size:1.3rem;
  color:#b9b5ae;
  letter-spacing:-.02em;
}
.reg-steps li.on{ color:var(--body-color); font-weight:500; }
.reg-steps li + li::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:1.1rem;
  background:var(--line-color);
}

/* ── 약관 ──────────────────────────────────────────────────────────────── */
.reg-term{ margin:0 0 4rem; }
.reg-term h2{
  margin:0 0 1.2rem;
  font-family:var(--serif-font);
  font-size:1.7rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
  text-align:left;
}
.reg-box{
  height:15rem;
  overflow-y:auto;
  padding:2rem 2.2rem;
  background:var(--lightgray-color);
  border:0;
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--text-color);
}
.reg-box p{ margin:0 0 .8rem; }
.reg-box p:last-child{ margin:0; }
.reg-box h1, .reg-box h2, .reg-box h3{
  margin:1.6rem 0 .6rem;
  font-size:var(--fs-body-sm);
  font-weight:500;
  color:var(--body-color);
}
.reg-box h1:first-child, .reg-box h2:first-child{ margin-top:0; }
.reg-agree{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:1.2rem 0 0;
  font-size:var(--fs-body-sm);
  color:var(--text-color);
  cursor:pointer;
}
.reg-agree input{ width:1.8rem; height:1.8rem; accent-color:var(--body-color); }

/* ── 아래 안내 ─────────────────────────────────────────────────────────── */
.reg-note{
  margin:4rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
  font-size:1.3rem;
  line-height:1.55;
  color:var(--muted-color);
}
.reg-note b{ font-weight:500; color:var(--text-color); }

/* ── 로그인 — 이름표 ────────────────────────────────────────────────────── */
.mbskin .fld-lb{
  display:block;
  margin:0 0 .5rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  letter-spacing:-.02em;
}
#login_fs .frm_input{ margin:0 0 2.4rem; }
#login_fs .frm_input:last-of-type{ margin-bottom:0; }

/* ── 단추 ──────────────────────────────────────────────────────────────── */
.sub_content .mbskin .btn_submit,
.sub_content #fregister .btn_submit,
.mbskin .btn_submit{
  width:100%;
  height:5.2rem;
  min-height:5.2rem;
  margin:2rem 0 0;
  font-size:var(--fs-body);
  font-weight:500;
}
.sub_content #fregister .admin-bar,
.sub_content .mbskin .admin-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  margin:3.2rem 0 0;
}
.sub_content #fregister .admin-bar .btn,
.sub_content .mbskin .admin-bar .btn{ width:100%; }

/* ── 캡차 ──────────────────────────────────────────────────────────────── */
.sub_content #captcha{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:3rem 0 0;
  padding:0;
}
.sub_content #captcha #captcha_key{
  height:4.4rem;
  padding:0 1.2rem;
  border:1px solid var(--line-color);
  background:#fff;
  font-size:var(--fs-body);
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 회원가입 화면 — 붉은 띠 · 여백 (마무리)
   --------------------------------------------------------------------------
   ★ 원본 #fregister p 가 «그 안의 모든 <p>» 를 붉은 띠로 만듭니다.
       position:relative; text-align:center; color:#fff; background:테라코타
     회원가입 안내문 하나를 꾸미려던 규칙인데,
     우리가 만든 .reg-note · .whelp 도 <p> 라 함께 걸렸습니다.

   ★ 클래스를 짚어 빼냅니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content #fregister p,
#fregister p{
  position:static;
  height:auto;
  min-height:0;
  padding:0;
  background:none;
  color:var(--muted-color);
  text-align:left;
  font-size:var(--fs-body-sm);
  line-height:var(--kk-lh);
}
.sub_content #fregister p::before,
.sub_content #fregister p::after,
#fregister p::before,
#fregister p::after{ display:none; }

/* 아래 안내 */
.sub_content #fregister .reg-note,
.reg-note{
  margin:4rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
  background:none;
  color:var(--muted-color);
  font-size:1.3rem;
  line-height:1.55;
  text-align:left;
}
.reg-note b{ font-weight:500; color:var(--text-color); }

/* 도움말 */
.sub_content #fregister .whelp,
#fregister .whelp{
  margin:.6rem 0 0;
  padding:0;
  background:none;
  color:var(--muted-color);
  font-size:1.2rem;
  line-height:1.4;
  text-align:left;
}

/* ── 약관 상자 — 테두리와 여백 ─────────────────────────────────────────── */
.reg-term{
  margin:0 0 3.2rem;
  padding:0;
  border:0;
  background:none;
}
.reg-term h2{
  margin:0 0 1.2rem;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  height:auto;
  color:var(--body-color);
}
.reg-box{
  margin:0;
  border:0;
}

/* 「다음」 단추 — 위 여백 */
.sub_content #fregister .admin-bar{
  margin:3.2rem 0 0;
}


/* ── 약관 상자 — 테두리와 큰 여백 걷어내기 ─────────────────────────────
   원본이 <section> 에 테두리와 여백을 줍니다. 우리는 옅은 바탕만 씁니다. */
.sub_content #fregister section,
.sub_content .reg-term,
#fregister section.reg-term{
  border:0 !important;
  border-radius:0;
  background:none;
  padding:0;
  margin:0 0 3.2rem;
  box-shadow:none;
}
.sub_content .reg-term h2,
#fregister .reg-term h2{
  position:static;
  width:auto;
  height:auto;
  margin:0 0 1.2rem;
  padding:0;
  overflow:visible;
  clip:auto;
  font-family:var(--serif-font);
  font-size:1.7rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
  text-align:left;
  background:none;
  border:0;
  line-height:1.4;
}
.sub_content .reg-box,
#fregister .reg-box{
  height:15rem;
  overflow-y:auto;
  margin:0;
  padding:1.8rem 2rem;
  background:var(--lightgray-color);
  border:0;
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--text-color);
  text-align:left;
}
.sub_content .reg-agree,
#fregister .reg-agree{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:1.2rem 0 0;
  padding:0;
  background:none;
  border:0;
  font-size:var(--fs-body-sm);
  color:var(--text-color);
  text-align:left;
  cursor:pointer;
}
.reg-agree input{ width:1.8rem; height:1.8rem; accent-color:var(--body-color); }


/* ── 약관 상자 — 잘린 티가 안 나게 ─────────────────────────────────────
   ★ 글이 「… 만 14」 에서 끊겨 잘린 티가 났습니다.
     아래를 «흐리게» 두면 더 있다는 것을 알려 주면서 조용합니다.

   ★ 높이도 조금 키웁니다. 150 → 18rem(180px). */
.sub_content .reg-box,
#fregister .reg-box{
  position:relative;
  height:18rem;
  padding:1.8rem 2rem 2.4rem;
}
.sub_content .reg-term,
#fregister .reg-term{ position:relative; }

/* 아래를 흐리게 — 더 있다는 표시 */
.sub_content .reg-term::after,
#fregister .reg-term::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4.4rem;                /* 동의 체크 줄 위 */
  height:3.2rem;
  background:linear-gradient(
    to bottom,
    rgba(247, 246, 245, 0) 0%,
    rgba(247, 246, 245, .92) 70%,
    rgba(247, 246, 245, 1) 100%
  );
  pointer-events:none;
}

/* ── 「다음」 단추 위 여백 ──────────────────────────────────────────────── */
.sub_content #fregister .admin-bar{
  margin:4rem 0 0;
}

/* ── 아래 안내 — 두 줄 사이 ─────────────────────────────────────────────── */
.sub_content #fregister .reg-note,
.reg-note{
  margin:4rem 0 0;
  line-height:1.8;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 폼 — 상자 방식으로 ★★
   --------------------------------------------------------------------------
   ★ 밑줄은 빈 칸일 때 «어디를 채워야 하는지» 잘 안 보입니다.
     이름표만 크게 보이고 칸은 선 하나라 허전했습니다.

   ★ 상자로 두되 «옅은 테두리» 로 무겁지 않게 합니다.
     누르면 테두리가 먹색으로 진해집니다.

   ★ 바꾸실 때는 아래 --kk-fld-* 만 고치시면 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-fld-h:4.8rem;            /* 입력칸 높이 */
  --kk-fld-line:#e4e1dd;        /* 테두리 색 */
  --kk-fld-gap:2rem;            /* 칸과 칸 사이 */
}

/* ── 입력칸 ────────────────────────────────────────────────────────────── */
.mbskin .frm_input,
.register .frm_input,
#fregister .frm_input,
#find_info .frm_input,
.wform .frm_input,
.sub_content .frm_input,
.sub_content input[type="text"],
.sub_content input[type="password"],
.sub_content input[type="email"],
.sub_content input[type="tel"],
.sub_content input[type="number"],
.sub_content input[type="date"]{
  width:100%;
  height:var(--kk-fld-h);
  padding:0 1.4rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:#fff;
  border:1px solid var(--kk-fld-line);
  border-bottom:1px solid var(--kk-fld-line);
  border-radius:0;
  box-shadow:none;
  outline:none;
  transition:border-color .18s;
}
.sub_content .frm_input:focus,
.sub_content input[type="text"]:focus,
.sub_content input[type="password"]:focus,
.sub_content input[type="email"]:focus,
.sub_content input[type="tel"]:focus,
.mbskin .frm_input:focus,
#fregister .frm_input:focus{
  border-color:var(--body-color);
  box-shadow:none;
  outline:none;
}

/* 고르개 */
.sub_content select,
.mbskin select,
#fregister select,
.wform select{
  width:100%;
  height:var(--kk-fld-h);
  padding:0 2.4rem 0 1.4rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:#fff;
  border:1px solid var(--kk-fld-line);
  border-radius:0;
  box-shadow:none;
}
.sub_content select:focus{ border-color:var(--body-color); box-shadow:none; }

/* 글상자 */
.sub_content .frm_textarea,
.sub_content textarea,
.wform textarea{
  width:100%;
  padding:1.2rem 1.4rem;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  color:var(--body-color);
  background:#fff;
  border:1px solid var(--kk-fld-line);
  border-radius:0;
  box-shadow:none;
  resize:vertical;
}
.sub_content textarea:focus{ border-color:var(--body-color); box-shadow:none; }

/* ── 이름표 — 작게, 칸 위에 ──────────────────────────────────────────────
   ★ 전에는 16px 라 «칸보다 커» 보였습니다. 14px 로 낮춥니다. */
.wrow label,
.sub_content .wrow label,
#fregister label,
.register label,
.mbskin .fld-lb{
  display:block;
  margin:0 0 .6rem;
  font-size:var(--fs-body-sm);
  font-weight:400;
  color:var(--text-color);
  letter-spacing:-.02em;
}

/* ── 칸 사이 ───────────────────────────────────────────────────────────── */
.wrow,
.sub_content .wrow{ margin-bottom:var(--kk-fld-gap); }

/* 도움말 */
.whelp,
.sub_content .whelp,
#fregister .whelp,
.frm_info{
  margin:.6rem 0 0;
  font-size:1.2rem;
  line-height:1.4;
  color:var(--muted-color);
}

/* ── 로그인 — 칸 사이 ───────────────────────────────────────────────────── */
#login_fs .frm_input{ margin:0 0 1.2rem; }
#login_fs .frm_input:last-of-type{ margin-bottom:0; }

/* ── 파일 고르기 ───────────────────────────────────────────────────────── */
.sub_content input[type="file"]{
  border:1px solid var(--kk-fld-line);
  padding:1rem 1.4rem;
  height:auto;
  background:#fff;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 폼 — 다듬기 ★★
   --------------------------------------------------------------------------
   ★ 상자만 줄줄이 늘어놓으면 리듬이 없습니다.
     선보다 «면» 으로 칸을 알리고, 여백으로 묶음을 나눕니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-fld-h:5rem;              /* 50px */
  --kk-fld-bg:#faf9f8;          /* 아주 옅은 바탕 */
  --kk-fld-line:#eceae7;        /* 옅은 테두리 */
  --kk-fld-gap:2.4rem;
}

/* ── 입력칸 — 면으로 ────────────────────────────────────────────────────── */
.mbskin .frm_input,
.register .frm_input,
#fregister .frm_input,
#find_info .frm_input,
.wform .frm_input,
.sub_content .frm_input,
.sub_content input[type="text"],
.sub_content input[type="password"],
.sub_content input[type="email"],
.sub_content input[type="tel"],
.sub_content input[type="number"],
.sub_content input[type="date"]{
  width:100%;
  height:var(--kk-fld-h);
  padding:0 1.6rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
  box-shadow:none;
  outline:none;
  transition:background .18s, border-color .18s;
}
.sub_content .frm_input:hover,
.mbskin .frm_input:hover,
#fregister .frm_input:hover{
  background:#f5f3f1;
}
.sub_content .frm_input:focus,
.sub_content input[type="text"]:focus,
.sub_content input[type="password"]:focus,
.sub_content input[type="email"]:focus,
.sub_content input[type="tel"]:focus,
.mbskin .frm_input:focus,
#fregister .frm_input:focus{
  background:#fff;
  border-color:var(--body-color);
  box-shadow:none;
  outline:none;
}

/* 고르개 · 글상자도 같은 결 */
.sub_content select,
.mbskin select,
#fregister select,
.wform select{
  width:100%;
  height:var(--kk-fld-h);
  padding:0 2.4rem 0 1.6rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
  box-shadow:none;
}
.sub_content select:focus{ background:#fff; border-color:var(--body-color); box-shadow:none; }

.sub_content .frm_textarea,
.sub_content textarea,
.wform textarea{
  width:100%;
  padding:1.4rem 1.6rem;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  color:var(--body-color);
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
  box-shadow:none;
  resize:vertical;
}
.sub_content textarea:focus{ background:#fff; border-color:var(--body-color); box-shadow:none; }

/* ── 이름표 — 위에 작게, 여백을 넉넉히 ──────────────────────────────────── */
.wrow label,
.sub_content .wrow label,
#fregister label,
.register label,
.mbskin .fld-lb{
  display:block;
  margin:0 0 .8rem;
  font-size:1.3rem;
  font-weight:400;
  color:var(--muted-color);
  letter-spacing:.01em;
}

/* ── 칸 사이 ───────────────────────────────────────────────────────────── */
.wrow,
.sub_content .wrow{ margin-bottom:var(--kk-fld-gap); }

/* ★ 묶음 나누기 — 세 번째 칸(비밀번호 확인) 뒤에 여백을 더 줍니다
     로그인 정보 / 나를 알리는 것 */
#fregister .wrow:nth-of-type(3){ margin-bottom:4.8rem; }

/* 도움말 */
.whelp,
.sub_content .whelp,
#fregister .whelp,
.frm_info{
  margin:.8rem 0 0;
  font-size:1.2rem;
  line-height:1.5;
  color:#8a857e;
}

/* ── 「필수」 표시 — 별표 하나로 ────────────────────────────────────────── */
.wrow .req,
.sub_content .req{
  display:inline-block;
  margin-left:.3rem;
  font-size:1.1rem;
  color:var(--point-color);
  vertical-align:top;
  line-height:1.6;
}

/* ── 단추 — 위에 여백을 넉넉히 ──────────────────────────────────────────── */
.sub_content #fregister .admin-bar,
.sub_content .mbskin .admin-bar{
  margin:5.6rem 0 0;
  gap:2rem;
}
.sub_content #fregister .btn_submit,
.sub_content .mbskin .btn_submit{
  height:5.6rem;
  min-height:5.6rem;
  font-size:var(--fs-body);
  letter-spacing:.02em;
}

/* ── 로그인 — 칸 사이 ───────────────────────────────────────────────────── */
#login_fs .frm_input{ margin:0 0 1rem; }
#login_fs .frm_input:last-of-type{ margin-bottom:0; }


/* ── 묶음 제목 ─────────────────────────────────────────────────────────
   ★ 성격이 다른 칸을 나눕니다.
       로그인에 쓰실 것    아이디 · 비밀번호
       작가의 방에 보일 것  이름 · 필명 · 전자우편

   ★ 명조로 작게. 위에 선을 그어 묶음을 알립니다. */
.reg-group{
  margin:0 0 2rem;
  padding:0 0 1rem;
  border-bottom:1px solid var(--line-color);
  font-family:var(--serif-font);
  font-size:1.5rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
  text-align:left;
  background:none;
  height:auto;
}
.reg-group + .wrow{ margin-top:0; }
#fregister .reg-group:not(:first-of-type){ margin-top:5.6rem; }

/* 앞서 넣은 «세 번째 칸 뒤 여백» 은 이제 필요 없습니다 */
#fregister .wrow:nth-of-type(3){ margin-bottom:var(--kk-fld-gap); }


/* ══════════════════════════════════════════════════════════════════════════
   ★ 폼 — 묶음 제목 걷어냄 · 바탕 진하게
   --------------------------------------------------------------------------
   ★ 묶음 제목과 선이 오히려 어수선했습니다.
     여백만으로 나누는 편이 조용합니다.

   ★ 입력칸 바탕이 너무 옅어 «칸인지» 잘 안 보였습니다.
     한 단 진하게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-fld-bg:#f2f0ed;          /* #faf9f8 → 한 단 진하게 */
}

/* 묶음 제목은 안 씁니다 */
.reg-group{ display:none; }

/* ★ 세 번째 칸(비밀번호 확인) 뒤에 여백을 더 줍니다
     로그인 정보 / 나를 알리는 것 — 선 없이 여백만으로 */
#fregister .wrow:nth-of-type(3){ margin-bottom:5.6rem; }

/* 입력칸 — 바탕을 진하게 */
.mbskin .frm_input,
.register .frm_input,
#fregister .frm_input,
#find_info .frm_input,
.wform .frm_input,
.sub_content .frm_input,
.sub_content input[type="text"],
.sub_content input[type="password"],
.sub_content input[type="email"],
.sub_content input[type="tel"],
.sub_content input[type="number"],
.sub_content input[type="date"],
.sub_content select,
.sub_content textarea{
  background:var(--kk-fld-bg);
}
.sub_content .frm_input:hover,
.mbskin .frm_input:hover,
#fregister .frm_input:hover,
.sub_content select:hover,
.sub_content textarea:hover{
  background:#ece9e5;
}
.sub_content .frm_input:focus,
.mbskin .frm_input:focus,
#fregister .frm_input:focus,
.sub_content select:focus,
.sub_content textarea:focus{
  background:#fff;
  border-color:var(--body-color);
}


/* ── 폼 — 줄 간격 줄이기 ─────────────────────────────────────────────────
       입력칸 높이       50 → 46px
       이름표 → 칸        8 → 6px
       칸 → 도움말        8 → 5px
       칸과 칸 사이       24 → 18px
       묶음 사이         56 → 40px
       마지막 칸 → 단추    56 → 40px */
:root{
  --kk-fld-h:4.6rem;
  --kk-fld-gap:1.8rem;
}

.wrow label,
.sub_content .wrow label,
#fregister label,
.register label,
.mbskin .fld-lb{ margin:0 0 .6rem; }

.whelp,
.sub_content .whelp,
#fregister .whelp,
.frm_info{ margin:.5rem 0 0; line-height:1.4; }

/* 묶음 사이 */
#fregister .wrow:nth-of-type(3){ margin-bottom:4rem; }

/* 단추 위 */
.sub_content #fregister .admin-bar,
.sub_content .mbskin .admin-bar{
  margin:4rem 0 0;
  gap:1.6rem;
}
.sub_content #fregister .btn_submit,
.sub_content .mbskin .btn_submit{
  height:5.2rem;
  min-height:5.2rem;
}

/* 로그인 — 칸 사이 */
#login_fs .frm_input{ margin:0 0 .8rem; }
#login_fs .frm_input:last-of-type{ margin-bottom:0; }


/* ── 가입 완료 화면 — 가운데로 (마지막 못박기) ──────────────────────────
   ★ <div id="reg_result" class="register"> 라 두 규칙이 다 걸립니다.
       .sub_content .register    left    ← 나중이라 이겼습니다
       .sub_content #reg_result  center

   ★ 이 블록이 파일 끝이라 이제 center 가 이깁니다. */
.sub_content #reg_result,
#reg_result{
  max-width:44rem;
  margin:0 auto;
  padding:2rem 0 0;
  text-align:center;
}
.sub_content #reg_result .reg-logo,
.sub_content #reg_result .reg-tit,
.sub_content #reg_result .reg-txt,
.sub_content #reg_result .reg-sub,
#reg_result .reg-logo, #reg_result .reg-tit,
#reg_result .reg-txt, #reg_result .reg-sub{
  text-align:center;
}
.sub_content #reg_result .reg-logo img,
#reg_result .reg-logo img{
  display:inline-block;
  height:4rem;
  width:auto;
}
.sub_content #reg_result .reg-tit,
#reg_result .reg-tit{
  margin:0 0 1.6rem;
  font-family:var(--serif-font);
  font-size:2.2rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:var(--kk-serif-ls);
}
.sub_content #reg_result .reg-txt,
#reg_result .reg-txt{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  color:var(--text-color);
}
.sub_content #reg_result .reg-sub,
#reg_result .reg-sub{
  margin:2.4rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
}
.sub_content #reg_result .admin-bar,
#reg_result .admin-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  margin:4rem 0 0;
}
.sub_content #reg_result .admin-bar .btn,
#reg_result .admin-bar .btn{
  width:100%;
  height:5.2rem;
  min-height:5.2rem;
  justify-content:center;
}


/* ── 아래 안내 — 또렷하게 ───────────────────────────────────────────────
   ★ 13px 옅은 회색이라 눈에 잘 안 들어왔습니다.
     14px 로 키우고 색을 한 단 진하게 합니다.
     ※ 표시도 테라코타로 두어 눈이 먼저 가게 합니다. */
.sub_content #fregister .reg-note,
.reg-note{
  display:block;
  margin:4rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-color);
  background:none;
  font-size:var(--fs-body-sm);
  line-height:1.8;
  color:var(--text-color);
  text-align:left;
  height:auto;
  position:static;
}
.reg-note b{ font-weight:500; color:var(--body-color); }


/* ── 약관 상자 — 설정 파일의 글이 그대로 나오게 ───────────────────────────
   ★ 문안이 lib/kkeullim.config.php 의 kk_terms_join() 에 있습니다.
     엔터로 나눈 줄이 <br> 로 바뀌어 나옵니다.
     문단 사이가 벌어지지 않으므로 줄간격으로 읽기 좋게 합니다. */
.sub_content .reg-box,
#fregister .reg-box{
  line-height:1.7;
  word-break:keep-all;
}
.sub_content .reg-box br + br,
#fregister .reg-box br + br{ line-height:2.4; }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 약관 상자 — 스크롤 · 타이포 ★★
   --------------------------------------------------------------------------
   ★ 흐림 덮개가 상자 위를 덮어 스크롤 막대를 가렸습니다.
     걷어내고 «막대를 보이게» 합니다. 더 있다는 것은 막대가 알려 줍니다.

   ★ 상자 안 글이 다 같은 크기라 어디가 제목인지 안 보였습니다.
     설정 파일의 글이 <br> 로 이어지므로 «줄 첫머리» 로 나눕니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 흐림 덮개 걷어내기 ─────────────────────────────────────────────────── */
.sub_content .reg-term::after,
#fregister .reg-term::after{ display:none; }

/* ── 상자 — 스크롤이 보이게 ─────────────────────────────────────────────── */
.sub_content .reg-box,
#fregister .reg-box{
  height:20rem;
  max-height:20rem;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2rem 2.2rem;
  background:var(--lightgray-color);
  border:0;
  font-size:var(--fs-body-sm);
  line-height:1.8;
  color:var(--text-color);
  text-align:left;
  word-break:keep-all;
  -webkit-overflow-scrolling:touch;
}

/* 스크롤 막대 — 옅게, 늘 보이게 */
.sub_content .reg-box::-webkit-scrollbar,
#fregister .reg-box::-webkit-scrollbar{
  width:.6rem;
}
.sub_content .reg-box::-webkit-scrollbar-track,
#fregister .reg-box::-webkit-scrollbar-track{
  background:transparent;
}
.sub_content .reg-box::-webkit-scrollbar-thumb,
#fregister .reg-box::-webkit-scrollbar-thumb{
  background:#d6d2cd;
  border-radius:0;
}
.sub_content .reg-box::-webkit-scrollbar-thumb:hover,
#fregister .reg-box::-webkit-scrollbar-thumb:hover{
  background:var(--muted-color);
}
/* 파이어폭스 */
.sub_content .reg-box,
#fregister .reg-box{
  scrollbar-width:thin;
  scrollbar-color:#d6d2cd transparent;
}

/* ── 상자 안 글 — 제목과 본문을 나눕니다 ─────────────────────────────────
   ★ 설정 파일의 글이 <br> 로 이어져 옵니다.
     <b> 로 감싼 부분이 제목이 되게 하고,
     빈 줄(br+br) 로 문단을 나눕니다. */
.sub_content .reg-box b,
#fregister .reg-box b{
  display:inline-block;
  margin:0;
  font-weight:500;
  color:var(--body-color);
}
.sub_content .reg-box br + br,
#fregister .reg-box br + br{
  display:block;
  content:"";
  margin-top:.8rem;
}


/* ── 약관 상자 안 — 제목 · 본문 · 항목 ─────────────────────────────────
   ★ 설정 파일의 글을 «줄 첫머리» 로 나눠 그립니다.
       .tm-h    「제5조 (…)」   조 제목
       .tm-s    짧은 소제목
       .tm-p    본문
       .tm-li   「· 」 항목
       .tm-gap  빈 줄 */
.reg-box .tm-h{
  margin:2.4rem 0 1rem;
  font-family:var(--serif-font);
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
  line-height:1.5;
}
.reg-box .tm-h:first-child{ margin-top:0; }

.reg-box .tm-s{
  margin:2rem 0 .8rem;
  font-size:var(--fs-body-sm);
  font-weight:500;
  color:var(--body-color);
  letter-spacing:-.02em;
}
.reg-box .tm-s:first-child{ margin-top:0; }

.reg-box .tm-p{
  margin:0 0 .8rem;
  font-size:var(--fs-body-sm);
  line-height:1.75;
  color:var(--text-color);
}
.reg-box .tm-li{
  position:relative;
  margin:0 0 .4rem;
  padding-left:1.2rem;
  font-size:var(--fs-body-sm);
  line-height:1.7;
  color:var(--text-color);
}
.reg-box .tm-li::before{
  content:"·";
  position:absolute;
  left:.2rem;
  color:var(--muted-color);
}
.reg-box .tm-gap{ height:.8rem; }
.reg-box .tm-gap + .tm-h,
.reg-box .tm-gap + .tm-s{ margin-top:1.6rem; }
.reg-box > *:last-child{ margin-bottom:0; }


/* ── 자동등록방지(캡차) ─────────────────────────────────────────────────
   ★ captcha_html() 이 그리는 것을 우리 결에 맞춥니다.
       #captcha       감싸개
       #captcha_img   숫자 그림
       #captcha_key   적는 칸
       #captcha_reload  다시 그리기
       #captcha_mp3     소리로 듣기 */
.sub_content #captcha,
#captcha{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem;
  margin:0;
  padding:0;
  border:0;
  background:none;
}
.sub_content #captcha #captcha_img,
#captcha #captcha_img{
  display:block;
  height:4.6rem;
  border:1px solid var(--line-color);
  vertical-align:middle;
}
.sub_content #captcha #captcha_key,
#captcha #captcha_key{
  width:auto;
  flex:1 1 12rem;
  height:4.6rem;
  padding:0 1.4rem;
  font-size:var(--fs-body);
  letter-spacing:.1em;
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
}
.sub_content #captcha #captcha_key:focus,
#captcha #captcha_key:focus{
  background:#fff;
  border-color:var(--body-color);
}
.sub_content #captcha #captcha_reload,
.sub_content #captcha #captcha_mp3,
#captcha #captcha_reload, #captcha #captcha_mp3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:4.6rem;
  height:4.6rem;
  padding:0;
  background:none;
  border:1px solid var(--line-color);
  border-radius:0;
  color:var(--muted-color);
  cursor:pointer;
}
.sub_content #captcha #captcha_reload:hover,
#captcha #captcha_reload:hover{
  border-color:var(--body-color);
  color:var(--body-color);
}
.sub_content #captcha #captcha_info,
#captcha #captcha_info{
  flex:1 1 100%;
  margin:.6rem 0 0;
  font-size:1.2rem;
  color:var(--muted-color);
}

/* 캡차 줄 */
.wrow-captcha{ margin-bottom:var(--kk-fld-gap); }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 자동등록방지(캡차) — 마무리 ★★
   --------------------------------------------------------------------------
   ★ captcha_html() 이 그리는 것
       <fieldset id="captcha">
         <img id="captcha_img">        숫자 그림
         <input id="captcha_key">      적는 칸
         <button id="captcha_mp3">     소리로 듣기
         <button id="captcha_reload">  새로 그리기
         <span id="captcha_info">      안내
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 「필수」 별표 — 테두리를 걷어냅니다 ──────────────────────────────── */
.sub_content .req,
.wrow .req,
#fregister .req{
  display:inline-block;
  width:auto;
  height:auto;
  margin:0 0 0 .3rem;
  padding:0;
  border:0 !important;
  background:none !important;
  font-size:1.1rem;
  color:var(--point-color);
  line-height:1.6;
  vertical-align:top;
}

/* ── ② 적는 칸의 별표 그림 걷어내기 ────────────────────────────────────── */
.sub_content #captcha_key,
#captcha_key,
.sub_content .frm_input.required,
.sub_content input.required{
  background-image:none !important;
}

/* ── ③ 감싸개와 단추 ───────────────────────────────────────────────────── */
.sub_content #captcha,
#captcha{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem;
  margin:0;
  padding:0;
  border:0;
  background:none;
}
.sub_content #captcha_img,
#captcha_img{
  display:block;
  height:4.6rem;
  width:auto;
  border:1px solid var(--line-color);
  background:#fff;
}
.sub_content #captcha_key,
#captcha_key{
  flex:1 1 14rem;
  width:auto;
  height:4.6rem;
  padding:0 1.4rem;
  font-size:var(--fs-body);
  letter-spacing:.15em;
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
}
.sub_content #captcha_key:focus,
#captcha_key:focus{ background:#fff; border-color:var(--body-color); }

/* 단추 — 글자가 보이게 */
.sub_content #captcha_reload,
.sub_content #captcha_mp3,
#captcha_reload, #captcha_mp3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:4.6rem;
  height:4.6rem;
  padding:0 1rem;
  background:none;
  border:1px solid var(--line-color);
  border-radius:0;
  font-size:1.2rem;
  color:var(--muted-color);
  white-space:nowrap;
  cursor:pointer;
  overflow:visible;
  text-indent:0;
}
.sub_content #captcha_reload:hover,
.sub_content #captcha_mp3:hover,
#captcha_reload:hover, #captcha_mp3:hover{
  border-color:var(--body-color);
  color:var(--body-color);
}
/* 단추 안의 «화면에서 감춘 글자» 를 되살립니다 */
.sub_content #captcha_reload .sound_only,
.sub_content #captcha_mp3 .sound_only,
#captcha_reload .sound_only, #captcha_mp3 .sound_only{
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
  clip:auto;
  font-size:1.2rem;
  line-height:1;
}

/* ── ④ 안내 — 원본 것만 남기고 우리 것은 뺍니다 ─────────────────────────── */
.sub_content #captcha_info,
#captcha_info{
  flex:1 1 100%;
  margin:.6rem 0 0;
  font-size:1.2rem;
  line-height:1.4;
  color:var(--muted-color);
}
.wrow-captcha > .whelp{ display:none; }


/* ── 캡차 단추에 글자 넣기 ──────────────────────────────────────────────
   원본은 아이콘 글꼴을 쓰는데 우리 테마에는 없어 빈 상자로 보입니다. */
/* ★ 단추 안에 글자가 이미 있습니다.
       <button><span></span>새로고침</button>

     <span> 은 아이콘 자리인데 우리 테마에 아이콘이 없어 빈 칸입니다.
     그것이 폭을 차지해 글자를 밀어냈습니다. 감춥니다. */
.sub_content #captcha_reload > span,
.sub_content #captcha_mp3 > span,
#captcha_reload > span, #captcha_mp3 > span{
  display:none;
}
.sub_content #captcha_reload,
.sub_content #captcha_mp3,
#captcha_reload, #captcha_mp3{
  font-size:1.2rem;
  text-indent:0;
  overflow:visible;
  white-space:nowrap;
  padding:0 1.2rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 자동등록방지 — 마무리
   --------------------------------------------------------------------------
   ★ ① <legend>자동등록방지</legend> 가 그림 아래 눌려 겹쳤습니다.
        우리는 <label> 을 따로 달았으므로 감춥니다.

   ★ ② 단추가 빈 상자였던 까닭
        원본이 «배경 그림» 으로 아이콘을 넣고 글자를 감춥니다.
        우리 테마에 그 그림이 없어 빈 상자가 됩니다.
        글자를 되살립니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① legend 감추기 ────────────────────────────────────────────────────── */
.sub_content #captcha legend,
#captcha legend{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  clip:rect(0,0,0,0);
  font-size:0 !important;
  line-height:0 !important;
}

/* ── ② 단추 — 글자를 되살립니다 ─────────────────────────────────────────── */
.sub_content #captcha #captcha_mp3,
.sub_content #captcha #captcha_reload,
#captcha #captcha_mp3, #captcha #captcha_reload{
  position:static !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:5.6rem;
  height:4.6rem !important;
  margin:0 !important;
  padding:0 1.2rem !important;
  background:none !important;
  background-image:none !important;
  border:1px solid var(--line-color) !important;
  border-radius:0;
  font-size:1.2rem !important;
  line-height:1 !important;
  color:var(--muted-color);
  text-indent:0 !important;
  overflow:visible !important;
  white-space:nowrap;
  cursor:pointer;
}
.sub_content #captcha #captcha_mp3:hover,
.sub_content #captcha #captcha_reload:hover,
#captcha #captcha_mp3:hover, #captcha #captcha_reload:hover{
  border-color:var(--body-color) !important;
  color:var(--body-color);
}
/* 아이콘 자리(빈 span) 는 감춥니다 */
.sub_content #captcha #captcha_mp3 > span,
.sub_content #captcha #captcha_reload > span,
#captcha #captcha_mp3 > span, #captcha #captcha_reload > span{
  display:none !important;
}

/* ── ③ 그림과 칸 ───────────────────────────────────────────────────────── */
.sub_content #captcha,
#captcha{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem;
  position:relative;
  margin:0;
  padding:0;
  border:0;
}
.sub_content #captcha #captcha_img,
#captcha #captcha_img{
  display:block;
  height:4.6rem !important;
  width:auto;
  border:1px solid var(--line-color) !important;
  vertical-align:middle;
  background:#fff;
}
.sub_content #captcha #captcha_key,
#captcha #captcha_key{
  flex:1 1 14rem;
  width:auto !important;
  height:4.6rem !important;
  margin:0 !important;
  padding:0 1.4rem !important;
  font-size:var(--fs-body);
  letter-spacing:.15em;
  background:var(--kk-fld-bg) !important;
  background-image:none !important;
  border:1px solid transparent !important;
  border-radius:0;
}
.sub_content #captcha #captcha_key:focus,
#captcha #captcha_key:focus{
  background:#fff !important;
  border-color:var(--body-color) !important;
}
.sub_content #captcha #captcha_info,
#captcha #captcha_info{
  display:block;
  flex:1 1 100%;
  margin:.8rem 0 0 !important;
  font-size:1.2rem;
  line-height:1.4;
  color:var(--muted-color);
  letter-spacing:-.02em;
}


/* ── 중복 확인 결과 ─────────────────────────────────────────────────────
   ★ 아이디·필명·이메일을 치면 서버에 물어보고 여기에 결과를 씁니다.
       「사용 가능한 아이디입니다」  또는  「이미 쓰이는 아이디입니다」

   ★ 이 자리가 있어야 그누보드가 «확인했다» 고 기록합니다.
     없으면 「올바른 방법으로 이용해 주십시오」 로 막힙니다. */
.chk-msg{
  display:block;
  margin:.5rem 0 0;
  font-size:1.2rem;
  line-height:1.4;
  color:var(--muted-color);
  letter-spacing:-.02em;
}
.chk-msg:empty{ display:none; }
/* 그누보드가 붙이는 색 이름 */
.chk-msg .msg_ok,   .chk-msg.msg_ok   { color:#3f7a5a; }
.chk-msg .msg_error,.chk-msg.msg_error{ color:var(--kk-point-text); }



/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 표지 — kk_cover() 가 그리는 것 ★★
   --------------------------------------------------------------------------
   ★ 표지를 «키만 맞춰» 세웁니다.
     3:4 로 자르면 시집처럼 갸름한 책은 세로가 잘려 나갑니다.
     높이만 같게 두고 가로는 비율대로 두면 실제 서가처럼 보입니다.

   ★ 표지 아래 네모 상자를 걷어냈습니다.

   ★ 크기를 바꾸시려면 아래 세 값만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-cover-sm:16rem;          /* 작게 160px */
  --kk-cover-md:26rem;          /* 첫 화면 슬라이드 260px */
  --kk-cover-lg:40rem;          /* 크게 400px */
}

.kk-cover{
  display:inline-block;
  line-height:0;
  background:none;
  border:0;
}
.kk-cover img{
  display:block;
  width:auto;
  max-width:none;
  margin:0 auto;
  box-shadow:0 1px 3px rgba(32, 32, 32, .14);
  transition:transform .3s, box-shadow .3s;
}
.kk-cover:hover img{
  transform:translateY(-.6rem);
  box-shadow:0 8px 20px rgba(32, 32, 32, .18);
}

.kk-cover-sm img{ height:var(--kk-cover-sm); }
.kk-cover-md img{ height:var(--kk-cover-md); }
.kk-cover-lg img{ height:var(--kk-cover-lg); }

/* 표지를 아직 안 올리셨을 때 — 제목만 세워 둡니다 */
.kk-cover-none{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18rem;
  padding:2rem 1.4rem;
  background:var(--lightgray-color);
  font-family:var(--serif-font);
  font-size:1.5rem;
  line-height:1.5;
  color:var(--muted-color);
  letter-spacing:-.03em;
  text-align:center;
  word-break:keep-all;
}
.kk-cover-sm .kk-cover-none{ width:11rem; height:var(--kk-cover-sm); font-size:1.3rem; }
.kk-cover-md .kk-cover-none{ width:18rem; height:var(--kk-cover-md); }
.kk-cover-lg .kk-cover-none{ width:28rem; height:var(--kk-cover-lg); font-size:1.8rem; }

/* ── 슬라이드 안 — 바닥선을 맞춥니다 ────────────────────────────────────── */
#main_showroom .swiper-slide{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
#main_showroom .swiper-slide figure{
  margin:0;
  padding:0;
  line-height:0;
}

@media (max-width:1024px){
  :root{ --kk-cover-md:22rem; --kk-cover-lg:32rem; }
}
@media (max-width:768px){
  :root{ --kk-cover-sm:12rem; --kk-cover-md:18rem; --kk-cover-lg:24rem; }
  .kk-cover-md .kk-cover-none{ width:13rem; font-size:1.3rem; }
}


/* ── 표지를 아직 안 올리셨을 때 ─────────────────────────────────────────── */
.kk-cover-empty{
  padding:6rem 2rem;
  text-align:center;
  font-size:var(--fs-body-sm);
  line-height:1.9;
  color:var(--muted-color);
}
.kk-cover-empty span{
  display:inline-block;
  margin:.4rem 0 0;
  padding:.2rem .8rem;
  background:var(--lightgray-color);
  font-size:1.2rem;
  color:var(--text-color);
}
/* 누를 수 없는 그림 — 마우스를 올려도 안 움직입니다 */
.kk-cover.is-plain{ cursor:default; }
.kk-cover.is-plain:hover img{ transform:none; box-shadow:0 1px 3px rgba(32,32,32,.14); }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 첫 화면 4번 — 출판 방향 다섯 항목 ★★
   --------------------------------------------------------------------------
   ★ 화살표로 넘길 때마다 다른 항목이 나옵니다.
     전에는 글이 하나뿐이라 화살표가 뜻이 없었습니다.

   ★ 배경은 셋, 글은 다섯이라 개수가 다릅니다.
     글을 주로 삼고 배경은 따라오게 했습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 큰 제목 — 늘 그대로 */
#main_philosophy .dir-head{
  margin:0 0 3.2rem;
}

/* 넘어가는 자리 */
#main_philosophy .dir-slide{
  overflow:hidden;
  margin:0 0 3.2rem;
}
#main_philosophy .dir-slide .swiper-slide{
  height:auto;
}

/* 하나 · 둘 · 셋 */
#main_philosophy .dir-no{
  margin:0 0 1rem;
  font-family:var(--serif-font);
  font-size:1.4rem;
  color:var(--point-color);
  letter-spacing:.02em;
}

/* 항목 제목 */
#main_philosophy .dir-tit{
  margin:0 0 1.4rem;
  font-family:var(--serif-font);
  font-size:clamp(2rem, 2.6vw, 2.4rem);
  font-weight:400;
  color:inherit;
  letter-spacing:-.04em;
  line-height:1.45;
}

/* 설명 */
#main_philosophy .dir-slide .desc{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.85;
}

@media (max-width:768px){
  #main_philosophy .dir-head{ margin-bottom:2.4rem; }
  #main_philosophy .dir-slide{ margin-bottom:2.4rem; }
  #main_philosophy .dir-tit{ font-size:1.9rem; }
}


/* ── 첫 화면 4번 — 영문과 제목 사이 ──────────────────────────────────────
   ★ 「our direction」 과 제목이 붙어 보였습니다.
     원본 테마의 다른 블록과 같은 간격으로 맞춥니다.

   ★ 제목도 두 줄로 바꾸고 마침표를 뺐습니다.
       많이 만들지 않습니다
       오래 남을 것을 고릅니다 */
/* ★ 원본 테마는 .title h2 에 margin-top: 2rem 입니다. (layout.css)
     제가 .dir-head 로 이름을 바꾸면서 그 값이 안 걸렸습니다.
     원본과 같게 두되 두 줄 제목이라 조금 넉넉히 합니다. */
#main_philosophy .dir-head{
  margin:2.8rem 0 4rem;
  line-height:1.5;
}
#main_philosophy .dir-slide{
  margin:0 0 4rem;
}

@media (max-width:768px){
  #main_philosophy .title em{ margin-bottom:1.6rem; }
  #main_philosophy .dir-head{ margin-bottom:3rem; }
  #main_philosophy .dir-slide{ margin-bottom:3rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 목록 — kk_bookshelf 스킨 ★★
   --------------------------------------------------------------------------
   원본 갤러리 스킨(dd__webzine)을 바탕으로 만들었습니다.

   ★ 표지를 «키만 맞춰» 세웁니다.
     자르지 않으므로 판형이 저마다인 책이 온전히 나옵니다.
     실제 서가처럼 바닥선이 나란합니다.

   ★ 크기를 바꾸시려면 아래 --kk-shelf-h 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-shelf-h:28rem;           /* 표지 높이 280px */
  --kk-shelf-gap:3.2rem;        /* 책과 책 사이 */
}

/* ── 격자 — 한 줄에 넷 ──────────────────────────────────────────────────── */
#bo_gall .kk-shelf-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--kk-shelf-gap) 2.4rem;
  margin:0;
  padding:0;
  list-style:none;
}
#bo_gall .kk-shelf-grid .itm{
  margin:0;
  padding:0;
  float:none;
  width:auto;
}
#bo_gall .kk-shelf-grid .gall_box{ height:100%; }

/* ── 표지가 위, 글이 아래 ────────────────────────────────────────────────
   원본은 «그림 왼쪽, 글 오른쪽» 이었습니다.
   도서는 표지 아래에 제목이 오는 편이 자연스럽습니다. */
#bo_gall .kk-shelf-grid .gall_con{
  display:block;
  gap:0;
}

/* ── 표지 — 키만 맞춰 ───────────────────────────────────────────────────── */
#bo_gall .kk-shelf-grid .gall_img{
  display:flex;
  align-items:flex-end;         /* ★ 바닥선을 맞춥니다 */
  justify-content:center;
  height:var(--kk-shelf-h);
  margin:0 0 1.6rem;
  flex:none;
  background:none;
  overflow:visible;
}
#bo_gall .kk-shelf-grid .gall_img a{
  display:block;
  line-height:0;
}
#bo_gall .kk-shelf-grid .gall_img img{
  display:block;
  width:auto;
  max-width:100%;
  height:var(--kk-shelf-h);
  object-fit:contain;           /* ★ 자르지 않습니다 */
  box-shadow:0 1px 3px rgba(32, 32, 32, .14);
  transition:transform .3s, box-shadow .3s;
}
#bo_gall .kk-shelf-grid .itm:hover .gall_img img{
  transform:translateY(-.6rem);
  box-shadow:0 8px 20px rgba(32, 32, 32, .18);
}

/* 표지가 없을 때 */
#bo_gall .kk-shelf-grid .no_image{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18rem;
  height:var(--kk-shelf-h);
  background:var(--lightgray-color);
  font-size:1.3rem;
  color:var(--muted-color);
}

/* ── 글 ────────────────────────────────────────────────────────────────── */
#bo_gall .kk-shelf-grid .gall_txt{
  flex:none;
  display:block;
  text-align:center;
}
#bo_gall .kk-shelf-grid .bo_cate_link{
  display:inline-block;
  margin:0 0 .6rem;
  font-size:1.2rem;
  color:var(--point-color);
  letter-spacing:-.02em;
}
#bo_gall .kk-shelf-grid .bo_tit{
  display:block;
  font-size:var(--fs-body-sm);
  line-height:1.5;
  color:var(--body-color);
  letter-spacing:-.03em;
  word-break:keep-all;
}
#bo_gall .kk-shelf-grid .itm:hover .bo_tit{ color:var(--point-color); }

/* 지은이 · 발행연도 */
#bo_gall .kk-shelf-grid .kk-meta{
  display:block;
  margin:.6rem 0 0;
  font-size:1.2rem;
  line-height:1.5;
  color:var(--muted-color);
  height:auto;
  overflow:visible;
}
#bo_gall .kk-shelf-grid .kk-meta b{ font-weight:400; }
#bo_gall .kk-shelf-grid .kk-meta i{
  font-style:normal;
  margin-left:.6rem;
  color:#b9b5ae;
}

/* 아래 글쓴이·날짜 줄은 도서에 필요 없습니다 */
#bo_gall .kk-shelf-grid .gall_info{ display:none; }

@media (max-width:1024px){
  :root{ --kk-shelf-h:22rem; }
  #bo_gall .kk-shelf-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:600px){
  :root{ --kk-shelf-h:17rem; --kk-shelf-gap:2.4rem; }
  #bo_gall .kk-shelf-grid{ grid-template-columns:repeat(2, 1fr); gap:2.4rem 1.6rem; }
  #bo_gall .kk-shelf-grid .bo_tit{ font-size:1.3rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 등록 폼 — kk_bookshelf ★★
   --------------------------------------------------------------------------
   원본 갤러리 폼에는 제목과 내용밖에 없습니다.
   도서는 지은이·발행일·ISBN·서점 링크가 필요해 칸을 더했습니다.

   ★ 두 칸씩 나란히 놓아 한 화면에 들어오게 했습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-book-form{
  margin:2.4rem 0;
  padding:2.4rem 0 0;
  border-top:1px solid var(--line-color);
}

/* 묶음 제목 */
.kk-form-head{
  margin:0 0 1.6rem;
  font-family:var(--serif-font);
  font-size:1.7rem;
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
}
.kk-form-head:not(:first-child){
  margin-top:3.2rem;
  padding-top:2.4rem;
  border-top:1px solid var(--line-color);
}
.kk-form-note{
  margin:-.8rem 0 1.6rem;
  font-size:var(--fs-body-sm);
  line-height:1.6;
  color:var(--muted-color);
}
.kk-form-note b{ font-weight:500; color:var(--text-color); }

/* 두 칸씩 나란히 */
.kk-wgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 2.4rem;
}
.kk-wrow{ margin:0 0 1.8rem; }
.kk-wrow label{
  display:block;
  margin:0 0 .6rem;
  font-size:1.3rem;
  color:var(--muted-color);
  letter-spacing:.01em;
}
.kk-wrow .frm_input,
.kk-wrow select{
  width:100%;
  height:4.6rem;
  padding:0 1.4rem;
  font-size:var(--fs-body);
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
}
.kk-wrow .frm_input:focus,
.kk-wrow select:focus{
  background:#fff;
  border-color:var(--body-color);
}
.kk-whelp{
  margin:.5rem 0 0;
  font-size:1.2rem;
  line-height:1.4;
  color:#8a857e;
}

@media (max-width:768px){
  .kk-wgrid{ grid-template-columns:1fr; gap:0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 목록 화면 — 다듬기 ★★
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 밑줄을 «글씨 폭에» 맞춥니다 ──────────────────────────────────────
   box-shadow 는 상자 전체에 그어져 좌우 여백만큼 삐져나옵니다.
   글씨에만 긋도록 ::after 로 바꿉니다. */
.filter .ftab{
  position:relative;
  box-shadow:none !important;
}
.filter .ftab::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.6rem;
  transform:translateX(-50%);
  width:0;
  height:2px;
  background:var(--body-color);
  transition:width .2s;
}
.filter .ftab[aria-current="true"]::after{
  width:calc(100% - 2.6rem);   /* 좌우 여백(13px×2)만큼 뺍니다 */
}
.filter .frow.minor .ftab[aria-current="true"]::after{
  width:calc(100% - 2rem);
  height:1px;
  bottom:.4rem;
}

/* ── ②③ 「모두 N종」 줄 ────────────────────────────────────────────────
   왼쪽 끝을 격자와 맞추고 높이를 넉넉히 합니다. */
.filter + .count,
.count{
  display:flex;
  align-items:center;
  min-height:5.6rem;
  padding:0;
  margin:0;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  letter-spacing:-.02em;
}

/* ── ④ 「새 도서 등록」 단추 ─────────────────────────────────────────────
   원본은 크고 무겁습니다. 작고 조용하게 바꿉니다. */
.sub_content .admin-bar{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  padding:4rem 0 0;
}
.sub_content .admin-bar .btn,
.sub_content .admin-bar a.btn{
  display:inline-flex;
  align-items:center;
  height:4rem;
  min-height:4rem;
  padding:0 1.8rem;
  font-size:1.3rem;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--muted-color);
  background:none;
  border:1px solid var(--line-color);
  border-radius:0;
  transition:border-color .18s, color .18s;
}
.sub_content .admin-bar .btn:hover,
.sub_content .admin-bar a.btn:hover{
  border-color:var(--body-color);
  color:var(--body-color);
  background:none;
}
/* 가운데 정렬로 쓰는 곳(가입 완료 등)은 그대로 둡니다 */
.sub_content .admin-bar.is-center .btn{
  height:5.2rem;
  min-height:5.2rem;
  font-size:var(--fs-body);
  color:#fff;
  background:var(--body-color);
  border-color:var(--body-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 정렬 · 발행처 — 세로바로 가르기 ★★
   --------------------------------------------------------------------------
       최신순 | 가나다순
       전체 | 도서출판 끌림 | 스톤-캠벨

   ★ 밑줄 대신 세로바를 쓰면 «고르는 것» 이라는 뜻이 분명해집니다.
     꼬리말·로그인 아래 링크와도 같은 결입니다.

   ★ 주 분류(전체·문학·종교…)는 밑줄 그대로 둡니다.
     그것이 «주» 이고 이 둘은 «보조» 라 구별되어야 합니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 정렬 (최신순 | 가나다순) ────────────────────────────────────────────── */
.filter .fsort{
  display:flex;
  align-items:center;
  gap:0;
  margin-left:auto;
}
.filter .fsort .ftab{
  position:relative;
  padding:.9rem 1.2rem;
  box-shadow:none !important;
}
.filter .fsort .ftab::after{ display:none; }   /* 밑줄 안 씁니다 */
.filter .fsort .ftab + .ftab::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:1.2rem;
  background:var(--line-color);
}
.filter .fsort .ftab[aria-current="true"]{
  color:var(--body-color);
  font-weight:500;
}

/* ── 발행처 (전체 | 도서출판 끌림 | 스톤-캠벨) ──────────────────────────── */
.filter .frow.minor .ftab{
  position:relative;
  padding:.7rem 1.1rem;
  box-shadow:none !important;
}
.filter .frow.minor .ftab::after{ display:none; }
.filter .frow.minor .ftab + .ftab::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:1rem;
  background:var(--line-color);
}
.filter .frow.minor .ftab[aria-current="true"]{
  color:var(--body-color);
  font-weight:500;
}
/* 「발행처」 이름표 뒤에는 세로바를 넣지 않습니다 */
.filter .frow.minor .flabel + .ftab::before{ display:none; }


/* ── 보조 줄이 둘일 때 ──────────────────────────────────────────────────
   발행연도와 발행처가 나란히 놓입니다.
   책이 두 해에 걸치면 발행연도 줄이 저절로 생깁니다. */
.filter .minor-wrap .frow.minor + .frow.minor{
  margin-top:.2rem;
}
.filter .frow.minor .flabel{
  padding-right:.8rem;
  font-size:1.2rem;
  color:#b9b5ae;
  letter-spacing:-.02em;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 격자 — 좌우 맞추기 · 선 걷어내기 ★★
   --------------------------------------------------------------------------
   ★ .bk 에 좌우 여백이 있어 표지가 안쪽으로 밀렸습니다.
     첫 칸 표지가 위 필터 줄보다 오른쪽으로 들어가 보였습니다.
     좌우 여백을 0으로 두고 «칸 사이» 는 gap 으로 벌립니다.

   ★ 책 아래 선을 걷어냈습니다.
     표의 잔재입니다. 표지가 서 있는 서가에는 줄이 없는 편이 조용합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.shelf{
  gap:0 clamp(2rem, 2.6vw, 3.2rem);   /* 칸 사이만 벌립니다 */
  border-bottom:0;
}
.shelf .bk{
  padding-left:0;
  padding-right:0;
  padding-bottom:4rem;
  border-bottom:0;                    /* ★ 책 아래 선 걷어냄 */
}

/* 「모두 N종」 과 「새 도서 등록」 도 같은 왼쪽 끝에 */
.wrap .count{ padding-left:0; padding-right:0; }
.wrap .admin-bar{ padding-left:0; padding-right:0; }
.wrap .filter .frow{ padding-left:0; padding-right:0; }
.wrap .filter .frow .ftab:first-child{ padding-left:0; }
.wrap .filter .fsort .ftab:last-child{ padding-right:0; }
.wrap .filter .frow.minor .flabel{ padding-left:0; }


/* 첫 항목 왼쪽 여백을 0으로 두면 세로바가 글자에 붙습니다.
   세로바는 «항목 사이» 에만 있으면 되므로 자리를 조금 띄웁니다. */
.wrap .filter .fsort .ftab + .ftab,
.wrap .filter .frow.minor .ftab + .ftab{
  padding-left:1.4rem;
}
.wrap .filter .fsort .ftab + .ftab::before,
.wrap .filter .frow.minor .ftab + .ftab::before{
  left:.6rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 목록 — 폭 맞추기 · 선 줄이기 ★★
   --------------------------------------------------------------------------
   ★ .wrap 이 112rem 으로 못박혀 있어 다른 화면과 폭이 어긋났습니다.
     테마가 쓰는 --inner-size 를 그대로 씁니다.

   ★ 선이 너무 많았습니다.
       필터 위 · 필터 아래 · 「모두 N종」 아래 · 표지 아래 · 책 아래
     남길 것은 «필터 위아래» 둘뿐입니다.
     그것이 「고르는 자리」와 「보는 자리」를 가릅니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 폭 ──────────────────────────────────────────────────────────────── */
.sub_content .wrap,
.wrap{
  max-width:var(--inner-size);
  margin:0 auto;
  padding-left:2.4rem;
  padding-right:2.4rem;
}

/* ── ② 선 줄이기 ───────────────────────────────────────────────────────── */

/* 표지와 제목 사이 — 걷어냅니다 */
.shelf .bk-cover,
.shelf .bk .bk-cover{
  border-bottom:0;
  box-shadow:none;
}
.shelf .bk-info{
  border-top:0;
  padding-top:1.6rem;
}

/* 「모두 N종」 아래 — 걷어냅니다 */
.wrap .count{
  border-bottom:0;
  border-top:0;
}

/* 남기는 선 — 필터 위아래 둘뿐입니다 */
.wrap .filter{
  border-top:2px solid var(--rule);
  border-bottom:1px solid var(--line-color);
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 목록 — 폭 넘침 · 여백 · 선 (마무리) ★★
   --------------------------------------------------------------------------
   ★ .filter 의 선이 .wrap 의 «패딩 바깥» 까지 그어졌습니다.
     패딩을 걷어 선과 내용이 «같은 폭» 이 되게 합니다.
     좌우 여백은 바깥(.sub_content)이 맡습니다.

   ★ 표지와 제목 사이 여백을 줄이고 남은 선도 걷어냅니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 폭 ──────────────────────────────────────────────────────────────── */
.sub_content .wrap,
.wrap{
  max-width:var(--inner-size);
  margin:0 auto;
  padding-left:0;
  padding-right:0;
}
/* 좌우 여백은 바깥이 맡습니다 */
.sub_content:has(> .wrap),
.sub_content .wrap-pad{
  padding-left:clamp(1.8rem, 2vw, 2.4rem);
  padding-right:clamp(1.8rem, 2vw, 2.4rem);
}

/* ── ② 표지와 제목 사이 ────────────────────────────────────────────────── */
.shelf .bk-info,
.bk-info{
  margin-top:1rem;              /* 13px → 10px */
  padding-top:0;
  border-top:0;
}

/* ── ③ 표지 아래 선 · 그림자 걷어내기 ───────────────────────────────────── */
.shelf .bk-cover,
.bk-cover{
  border-bottom:0;
  box-shadow:none;
  padding-bottom:0;
  margin-bottom:0;
}
.shelf .cover-img,
.cover-img{
  box-shadow:none;              /* ★ 표지 그림자를 걷어냅니다 */
  border:0;
}
.shelf .bk{
  padding:0 0 3.2rem;
  border-bottom:0;
}


/* ── 주 분류 밑줄 — 글자 폭에 맞춤 ──────────────────────────────────────
   ★ 첫 항목만 왼쪽 여백이 0이라 계산이 어긋났습니다.
     각 항목의 «좌우 여백» 을 알아서 빼도록 고쳐 잡습니다. */
.wrap .filter .frow > .ftab{
  padding-left:1.3rem;
  padding-right:1.3rem;
}
.wrap .filter .frow > .ftab:first-child{
  padding-left:0;
}
.wrap .filter .frow > .ftab::after{
  left:1.3rem;
  right:1.3rem;
  width:auto;
  transform:none;
}
.wrap .filter .frow > .ftab:first-child::after{
  left:0;
}
.wrap .filter .frow > .ftab[aria-current="true"]::after{
  width:auto;
}
/* 정렬(fsort) 안의 것은 밑줄을 안 쓰므로 그대로 */
.wrap .filter .fsort .ftab::after{ display:none; }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 세로바 — 좌우 빈칸을 같게 ★★
   --------------------------------------------------------------------------
   ★ 앞 글자 오른쪽 12px, 뒷 글자 왼쪽 8px 로 어긋났습니다.

   ★ 항목 좌우 여백을 «같게» 두고 세로바를 그 한가운데 놓습니다.
       [최신순]  12px  |  12px  [가나다순]

     항목 사이 빈칸은 24px 이고 세로바는 그 절반인 12px 자리에 섭니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 정렬 (최신순 | 가나다순) ────────────────────────────────────────────── */
.wrap .filter .fsort .ftab,
.wrap .filter .fsort .ftab + .ftab{
  padding-left:1.2rem;
  padding-right:1.2rem;
}
.wrap .filter .fsort .ftab:last-child{ padding-right:0; }
.wrap .filter .fsort .ftab + .ftab::before{
  left:0;                       /* 앞 글자의 오른쪽 여백 끝 = 뒷 글자의 왼쪽 여백 시작 */
}

/* ── 발행처 · 발행연도 ───────────────────────────────────────────────────── */
.wrap .filter .frow.minor .ftab,
.wrap .filter .frow.minor .ftab + .ftab{
  padding-left:1.1rem;
  padding-right:1.1rem;
}
.wrap .filter .frow.minor .ftab + .ftab::before{
  left:0;
}
/* 「발행처」 이름표 다음 항목은 왼쪽 여백을 그대로 둡니다 */
.wrap .filter .frow.minor .flabel + .ftab{
  padding-left:1.1rem;
}
.wrap .filter .frow.minor .flabel + .ftab::before{ display:none; }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 밑줄 — 고른 것에만 ★★
   --------------------------------------------------------------------------
   ★ left 와 right 를 둘 다 정하면 «폭이 저절로» 잡힙니다.
     width:0 이 무시되어 모든 항목에 밑줄이 그어졌습니다.

   ★ 안 고른 것은 «투명» 으로 두고 고른 것만 색을 넣습니다.
     그러면 폭 계산은 그대로 두고 보이고 안 보이고만 가릅니다.
   ══════════════════════════════════════════════════════════════════════════ */
.wrap .filter .frow > .ftab::after{
  left:1.3rem;
  right:1.3rem;
  width:auto;
  transform:none;
  background:transparent;       /* ★ 안 고른 것은 안 보입니다 */
}
.wrap .filter .frow > .ftab:first-child::after{
  left:0;
}
.wrap .filter .frow > .ftab[aria-current="true"]::after{
  background:var(--body-color); /* ★ 고른 것만 보입니다 */
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 상세 — 아래 단추 줄 ★★
   --------------------------------------------------------------------------
   ★ 성격에 따라 나눴습니다.
       왼쪽  「목록으로」   손님이 누르는 것
       오른쪽 「수정·삭제」  관리자만 보는 것

   ★ 삭제는 되돌릴 수 없으므로 «가장 조용하게» 둡니다.
     마우스를 올렸을 때만 붉어집니다.
   ══════════════════════════════════════════════════════════════════════════ */
.bk-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin:6rem 0 0;
  padding:2.4rem 0 0;
  border-top:1px solid var(--line-color);
}

/* ── 목록으로 ──────────────────────────────────────────────────────────── */
.bk-back{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:var(--fs-body-sm);
  color:var(--text-color);
  letter-spacing:-.02em;
  transition:color .18s;
}
.bk-back svg{
  width:1.4rem;
  height:1.4rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s;
}
.bk-back:hover{ color:var(--point-color); }
.bk-back:hover svg{ transform:translateX(-.3rem); }

/* ── 수정 · 삭제 ───────────────────────────────────────────────────────── */
.bk-manage{
  display:inline-flex;
  align-items:center;
  gap:0;
}
.bk-mbtn{
  position:relative;
  padding:0 1.2rem;
  font-size:1.3rem;
  color:var(--muted-color);
  letter-spacing:-.02em;
  transition:color .18s;
}
.bk-mbtn:last-child{ padding-right:0; }
.bk-mbtn + .bk-mbtn::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:1rem;
  background:var(--line-color);
}
.bk-mbtn:hover{ color:var(--body-color); }
.bk-mbtn.is-del:hover{ color:var(--kk-point-text); }

@media (max-width:600px){
  .bk-foot{ margin-top:4rem; }
  .bk-mbtn{ padding:0 1rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 총서(시리즈) ★★
   --------------------------------------------------------------------------
   wr_10 에 「끌림基督選 009」 처럼 담깁니다.
   비어 있으면 아무것도 안 나옵니다. 총서에 들지 않는 책이 더 많습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 — 제목 위에 작게 ──────────────────────────────────────────────── */
.shelf .bk-series{
  margin:0 0 .4rem;
  font-size:1.2rem;
  color:var(--muted-color);
  letter-spacing:.01em;
  font-family:var(--eng-font), var(--body-font);
}

/* ── 상세 — 서지정보의 총서 행 ──────────────────────────────────────────── */
.kk-sr-link{
  color:var(--body-color);
  border-bottom:1px solid var(--line-color);
  transition:color .18s, border-color .18s;
}
.kk-sr-link:hover{
  color:var(--point-color);
  border-bottom-color:var(--point-color);
}
.kk-sr-no{
  margin-left:.6rem;
  font-size:1.3rem;
  color:var(--muted-color);
  letter-spacing:.02em;
}

/* ── 등록 화면 — 총서명과 번호를 나란히 ─────────────────────────────────── */
.wrow-series .series-pair{
  display:grid;
  grid-template-columns:1fr 10rem;
  gap:.8rem;
}
.wrow-series .series-pair select,
.wrow-series .series-pair input{
  width:100%;
}
.wrow-series .series-pair input{
  text-align:center;
  letter-spacing:.1em;
}

@media (max-width:600px){
  .wrow-series .series-pair{ grid-template-columns:1fr 8rem; }
}


/* ── 목록의 총서 — 안 씁니다 ────────────────────────────────────────────
   ★ 총서는 상세 화면에만 둡니다. (2026-08)
     목록에서 제목 위에 한 줄이 더 들어가면 어수선합니다.
     되살리실 때를 위해 규칙은 남겨 둡니다. */
.shelf .bk-series{ display:none; }


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 등록 화면 — 폭 맞추기 · 단추 자리 ★★
   --------------------------------------------------------------------------
   ★ .wrow select 는 max-width:640px 인데 총서 짝에는 그 제한이 없어
     오른쪽으로 더 나갔습니다. 짝 전체에 같은 제한을 겁니다.

   ★ 저장 단추가 가운데 있었습니다.
     폼은 왼쪽에서 시작하므로 단추도 왼쪽이 맞습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 총서 짝 — 다른 칸과 같은 폭 ─────────────────────────────────────────── */
.wrow-series .series-pair{
  display:grid;
  grid-template-columns:1fr 9rem;
  gap:.8rem;
  width:100%;
  max-width:640px;              /* ★ 다른 칸과 같게 */
}
.wrow-series .series-pair select,
.wrow-series .series-pair input{
  width:100%;
  max-width:none;               /* 짝 안에서는 제한을 풉니다 */
}
.wrow-series .series-pair input{
  text-align:center;
  letter-spacing:.1em;
}
/* 총서를 안 고르셨을 때 — 번호 칸을 잠급니다 */
.wrow-series .series-pair input:disabled{
  background:#f7f6f5;
  color:#c9c5c0;
  cursor:not-allowed;
}

/* ── 저장 단추 — 왼쪽으로 ────────────────────────────────────────────────── */
.wform + .admin-bar,
#bo_w .admin-bar,
.sub_content #bo_w .admin-bar{
  justify-content:flex-start;
  padding-left:0;
}
#bo_w .admin-bar.is-center{
  justify-content:flex-start;
}

@media (max-width:600px){
  .wrow-series .series-pair{ grid-template-columns:1fr 7rem; }
}



/* ══════════════════════════════════════════════════════════════════════════
   ★★ 등록 화면 — 모든 칸의 폭을 같게 ★★
   --------------------------------------------------------------------------
   ★ 클래스가 없는 칸이 있어 폭 제한을 못 받았습니다.
       #kk_series_no · 파일 고르기 …
     클래스가 아니라 «태그» 로 잡아 빠짐이 없게 합니다.

   ★ 폭을 바꾸시려면 아래 --kk-form-w 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-form-w:64rem;            /* 등록 화면 칸 폭 640px */
}

/* ── 모든 칸 ────────────────────────────────────────────────────────────── */
#bo_w .wrow input[type="text"],
#bo_w .wrow input[type="url"],
#bo_w .wrow input[type="email"],
#bo_w .wrow input[type="tel"],
#bo_w .wrow input[type="number"],
#bo_w .wrow input[type="date"],
#bo_w .wrow input[type="password"],
#bo_w .wrow input[type="file"],
#bo_w .wrow select,
#bo_w .wrow textarea,
#bo_w .wrow .series-pair{
  width:100%;
  max-width:var(--kk-form-w);
  box-sizing:border-box;
}

/* 짝 안의 칸은 짝이 폭을 맡으므로 제한을 풉니다 */
#bo_w .wrow .series-pair select,
#bo_w .wrow .series-pair input{
  max-width:none;
}

/* 체크·라디오는 제외 */
#bo_w .wrow input[type="checkbox"],
#bo_w .wrow input[type="radio"]{
  width:1.8rem;
  max-width:1.8rem;
}

/* 도움말도 같은 폭 안에 */
#bo_w .wrow .whelp{
  max-width:var(--kk-form-w);
}

/* 안내 상자도 */
#bo_w .wform .wnote,
#bo_w .wnote{
  max-width:var(--kk-form-w);
  box-sizing:border-box;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 단추 줄 — 세로 정렬 ★★
   --------------------------------------------------------------------------
   ★ .admin-bar 가 flex 인데 align-items 가 없어 기본값(stretch)으로
     늘어났습니다. 「취소」는 글자만이라 위에 붙고 「저장」은 상자라
     아래로 처져 «가운데선이 안 맞았습니다».

   ★ 가운데로 맞추고 「취소」에도 같은 높이를 줍니다.
   ══════════════════════════════════════════════════════════════════════════ */
.admin-bar,
.sub_content .admin-bar,
#bo_w .admin-bar{
  display:flex;
  align-items:center;           /* ★ 가운데 맞춤 */
  gap:1.6rem;
}

/* 「취소」 등 글자 단추 — 상자 단추와 같은 높이 */
.admin-bar .btn-txt,
.sub_content .admin-bar .btn-txt,
#bo_w .admin-bar .btn-txt{
  display:inline-flex;
  align-items:center;
  height:4rem;
  padding:0 .4rem;
  font-size:1.4rem;
  color:var(--muted-color);
  transition:color .18s;
}
.admin-bar .btn-txt:hover{ color:var(--body-color); }

/* 등록 화면은 조금 높게 */
#bo_w .admin-bar .btn,
#bo_w .admin-bar .btn_submit{
  height:4.8rem;
  min-height:4.8rem;
}
#bo_w .admin-bar .btn-txt{
  height:4.8rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 단추 줄 — 세로 정렬 (마지막 못박기) ★★★
   --------------------------------------------------------------------------
   ★ .btn-txt 규칙이 여러 겹 쌓여 min-height 가 저마다입니다.
       4.4rem · 3.6rem · auto …
     그래서 「취소」와 「저장」의 가운데선이 안 맞았습니다.

   ★ 등록 화면의 단추 줄만 정확히 짚어 같은 높이를 줍니다.
   ══════════════════════════════════════════════════════════════════════════ */
#bo_w .admin-bar,
.sub_content #bo_w .admin-bar{
  display:flex !important;
  align-items:center !important;
  gap:1.6rem;
  padding:4rem 0 0;
  margin:0;
}

/* 저장 · 취소 — 같은 높이 */
#bo_w .admin-bar .btn,
#bo_w .admin-bar .btn_submit,
#bo_w .admin-bar .btn-txt,
.sub_content #bo_w .admin-bar .btn,
.sub_content #bo_w .admin-bar .btn_submit,
.sub_content #bo_w .admin-bar .btn-txt{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center;
  height:4.8rem !important;
  min-height:4.8rem !important;
  margin:0 !important;
  line-height:1 !important;
  box-sizing:border-box;
}

/* 저장 — 채운 단추 */
#bo_w .admin-bar .btn_submit,
.sub_content #bo_w .admin-bar .btn_submit{
  padding:0 3.2rem !important;
  font-size:var(--fs-body);
  font-weight:500;
  color:#fff;
  background:var(--body-color);
  border:0;
  border-radius:0;
  cursor:pointer;
}
#bo_w .admin-bar .btn_submit:hover{ background:var(--kk-point-fill); }

/* 취소 — 글자만 */
#bo_w .admin-bar .btn-txt,
.sub_content #bo_w .admin-bar .btn-txt{
  padding:0 .6rem !important;
  font-size:1.4rem;
  color:var(--muted-color);
  background:none;
  border:0;
  text-decoration:none;
}
#bo_w .admin-bar .btn-txt:hover{
  color:var(--body-color);
  text-decoration:none;
}

@media (max-width:600px){
  #bo_w .admin-bar .btn,
  #bo_w .admin-bar .btn_submit,
  #bo_w .admin-bar .btn-txt{
    height:4.4rem !important;
    min-height:4.4rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 상세 — 표지 ★★
   --------------------------------------------------------------------------
   ★ ① 210px 로 제한돼 있어 작았습니다. 300px 로 키웁니다.
   ★ ② 표지를 자르지 않습니다. (스킨에서 고쳤습니다)
        높이만 맞추고 가로는 판형대로 둡니다.
   ★ ③ 표지가 위쪽 끝에 붙어 오른쪽 제목보다 올라가 있었습니다.
        분류 이름과 제목만큼 내려 «제목 줄에» 맞춥니다.

   ★ 크기를 바꾸시려면 --kk-detail-cover 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-detail-cover:30rem;      /* 표지 폭 300px */
  --kk-detail-drop:7.2rem;      /* 표지를 내리는 만큼 — 분류 + 제목 높이 */
}

.detail{
  grid-template-columns:minmax(0, var(--kk-detail-cover)) minmax(0, 1fr);
  gap:clamp(3.2rem, 5vw, 6rem);
  align-items:start;
}

/* ── 표지 ──────────────────────────────────────────────────────────────── */
.d-cover{
  max-width:var(--kk-detail-cover);
  margin-top:var(--kk-detail-drop);   /* ★ 제목 줄에 맞춰 내립니다 */
}
.d-cover a,
.d-cover > a{
  display:block;
  line-height:0;
}
.d-cover .cover-img{
  display:block;
  width:100%;
  height:auto;                        /* ★ 자르지 않으니 비율대로 */
  max-width:100%;
  object-fit:contain;
  box-shadow:0 2px 8px rgba(32, 32, 32, .12);
  transition:transform .3s, box-shadow .3s;
}
.d-cover a:hover .cover-img{
  transform:translateY(-.4rem);
  box-shadow:0 10px 24px rgba(32, 32, 32, .16);
}

/* 표지가 없을 때 — 제목만 세워 둡니다 */
.d-cover .cover{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:40rem;
  padding:3rem 2rem;
  background:var(--lightgray-color);
  text-align:center;
}

@media (max-width:900px){
  :root{ --kk-detail-drop:0; }        /* 한 줄로 쌓이면 안 내립니다 */
  .detail{ grid-template-columns:1fr; }
  .d-cover{ max-width:24rem; margin:0 auto 3rem; }
}


/* ── 표지를 내리는 양 — 제목 줄에 맞춤 ──────────────────────────────────
   오른쪽 첫 줄은 분류 이름(종교)이고 그다음이 제목입니다.
   표지 윗변을 «제목 윗변» 에 맞추려면 분류 줄만큼 내리면 됩니다.

   분류 글자 1.3rem × 줄간격 + 아래 여백 ≒ 3.2rem */
:root{
  --kk-detail-drop:3.2rem;
}


/* ── 표지 내리는 양 — 정확히 ────────────────────────────────────────────
   분류 줄(.d-series)의 실제 높이

     글자 12px × 줄간격 1.5  =  18px
     아래 여백                    8px
     ────────────────────────────────
     합계                        26px

   전에는 32px 이라 6px 더 내려가 있었습니다. */
:root{
  --kk-detail-drop:2.6rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 상세 표지 — 감싸개를 표지에 맞춤 ★★
   --------------------------------------------------------------------------
   ★ .d-cover 가 300px 고정인데 표지는 2:3 비율이라 더 좁습니다.
     감싸개가 남아 좌우에 흰 여백이 생기고 그림자가 삐져나왔습니다.

   ★ 감싸개를 «내용 크기» 로 줄이고 «높이» 로 크기를 정합니다.
     판형이 저마다여도 감싸개가 표지에 딱 붙습니다.

   ★ 크기를 바꾸시려면 --kk-detail-h 한 줄만 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-detail-h:42rem;          /* 표지 높이 420px */
}

.detail{
  grid-template-columns:auto minmax(0, 1fr);   /* ★ 표지 칸을 내용에 맞춤 */
  gap:clamp(3.2rem, 5vw, 6rem);
  align-items:start;
}

.d-cover{
  width:auto;
  max-width:none;
  margin-top:var(--kk-detail-drop);
  line-height:0;
}
.d-cover a,
.d-cover > a{
  display:inline-block;
  line-height:0;
}
.d-cover .cover-img{
  display:block;
  width:auto;                   /* ★ 가로는 비율대로 */
  height:var(--kk-detail-h);    /* ★ 높이로 크기를 정합니다 */
  max-width:none;
  object-fit:contain;
  box-shadow:0 2px 8px rgba(32, 32, 32, .12);
  transition:transform .3s, box-shadow .3s;
}
.d-cover a:hover .cover-img{
  transform:translateY(-.4rem);
  box-shadow:0 10px 24px rgba(32, 32, 32, .16);
}

/* 표지가 없을 때 */
.d-cover .cover{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:28rem;
  height:var(--kk-detail-h);
  padding:3rem 2rem;
  background:var(--lightgray-color);
  text-align:center;
  line-height:1.5;
}

@media (max-width:1024px){
  :root{ --kk-detail-h:34rem; }
}
@media (max-width:900px){
  :root{ --kk-detail-h:30rem; --kk-detail-drop:0; }
  .detail{ grid-template-columns:1fr; }
  .d-cover{ margin:0 auto 3rem; text-align:center; }
  .d-cover .cover{ margin:0 auto; }
}


/* ── 「같은 분야의 책」 표지 ─────────────────────────────────────────────
   ★ 상세 화면 아래 네 권입니다. 목록과 같은 .shelf 를 씁니다.
     자르지 않고 높이만 맞춥니다. (스킨에서 고쳤습니다)
     그림자도 목록과 같게 걷어냅니다. */
.d-related .cover-img,
#bo_v .shelf .cover-img{
  box-shadow:none;
  border:0;
}


/* ── 표지 위의 선 — 걷어냅니다 ──────────────────────────────────────────
   ★ .shelf 에 border-top 이 남아 있었습니다.
     아래 선은 앞서 걷어냈는데 위는 그대로였습니다.

   ★ 선을 줄이기로 했으니 이것도 뺍니다.
     남길 것은 «필터 위아래» 둘뿐입니다. */
.shelf,
#bo_v .shelf,
.wrap .shelf{
  border-top:0;
  border-bottom:0;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 첫 화면 신간 — 표지만 한 줄에 ★★
   --------------------------------------------------------------------------
   ★ 분류 탭과 설명 글을 걷어냈습니다.
     첫 화면은 «보여 주는» 자리이지 «고르는» 자리가 아닙니다.

   ★ 한 줄에 여섯 권.
     화면 폭 1440px 에서 표지 높이 318px 남짓이 됩니다.

   ★ 표지에 상자선도 그림자도 없습니다.
     책등이 바닥에 나란히 서기만 합니다.

   ★ 몇 권을 보일지는 main_lookbook.html 의 kk_cover_row(6) 에서 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-newrow-h:32rem;          /* 표지 높이 320px */
}

.kk-newrow{
  display:flex;
  align-items:flex-end;         /* ★ 바닥선을 맞춥니다 */
  justify-content:center;
  gap:clamp(1.6rem, 2.2vw, 3.2rem);
  margin:0;
  padding:0;
}
.kk-newbk{
  display:block;
  flex:0 0 auto;
  line-height:0;
}
.kk-newbk img{
  display:block;
  height:var(--kk-newrow-h);
  width:auto;
  max-width:100%;
  border:0;                     /* ★ 상자선 없음 */
  box-shadow:none;              /* ★ 그림자도 없음 */
  transition:transform .3s;
}
.kk-newbk:hover img{
  transform:translateY(-.8rem);
}

/* 표지를 아직 안 올리셨을 때 */
.kk-newbk-none{
  display:flex;
  align-items:center;
  justify-content:center;
  width:14rem;
  height:var(--kk-newrow-h);
  padding:2rem 1.4rem;
  background:var(--lightgray-color);
  font-family:var(--serif-font);
  font-size:1.4rem;
  line-height:1.5;
  color:var(--muted-color);
  text-align:center;
  word-break:keep-all;
}

@media (max-width:1200px){
  :root{ --kk-newrow-h:26rem; }
}
@media (max-width:900px){
  :root{ --kk-newrow-h:20rem; }
  .kk-newrow{ flex-wrap:wrap; gap:2rem 1.6rem; }
}
@media (max-width:600px){
  :root{ --kk-newrow-h:16rem; }
  .kk-newrow{ gap:1.6rem 1.2rem; }
}


/* ── 도서 목록 아래 한 줄 ───────────────────────────────────────────────
   ★ 걷어낸 「끌림의 서가」 블록에 있던 글입니다. (2026-08)
     절판된 책의 페이지도 남겨 둔다는 뜻이라 목록 아래가 맞습니다.

   ★ 조용히 놓습니다. 목록을 다 본 뒤 눈이 닿는 자리입니다. */
.kk-archive-note{
  margin:4rem 0 0;
  padding:3.2rem 0 0;
  border-top:1px solid var(--line-color);
  font-size:var(--fs-body-sm);
  line-height:1.9;
  color:var(--muted-color);
  letter-spacing:-.02em;
  text-align:center;
}
.kk-archive-note b{
  font-family:var(--serif-font);
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--body-color);
  letter-spacing:-.03em;
}

@media (max-width:600px){
  .kk-archive-note{ margin-top:3rem; padding-top:2.4rem; }
}


/* ── 보조 줄 이름표 — 폭을 같게 ─────────────────────────────────────────
   ★ 「발행연도」 넉 자, 「발행처」 석 자라 그다음 「전체」 가 어긋났습니다.
     이름표에 같은 폭을 주면 나란히 섭니다.

   ★ 이름이 더 긴 것이 생기면 아래 폭만 늘리십시오. */
.wrap .filter .frow.minor .flabel{
  display:inline-block;
  width:6.4rem;                 /* 「발행연도」 넉 자가 들어가는 폭 */
  flex:0 0 6.4rem;
  padding-left:0;
  padding-right:0;
  font-size:1.2rem;
  color:#b9b5ae;
  letter-spacing:-.02em;
}

@media (max-width:600px){
  .wrap .filter .frow.minor .flabel{
    width:5.6rem;
    flex:0 0 5.6rem;
  }
}


/* ── 이름표 폭 — 조금 줄임 ──────────────────────────────────────────────
   64px 이 넉넉했습니다. 「발행연도」 넉 자가 48px 남짓이니
   54px 이면 붙지 않으면서 사이가 좁아집니다. */
.wrap .filter .frow.minor .flabel{
  width:5.4rem;
  flex:0 0 5.4rem;
}

@media (max-width:600px){
  .wrap .filter .frow.minor .flabel{
    width:4.8rem;
    flex:0 0 4.8rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 공지 · 소식 · 투고 — kk_notice 스킨 ★★
   --------------------------------------------------------------------------
   원본 공지 스킨(dd__notice)을 바탕으로 만들었습니다.

   ★ 분류 탭을 도서 목록과 같은 모양으로 맞춥니다.
     전체 · 알려드립니다 · 뉴스 및 이벤트 …

   ★ 관리자 > 게시판 관리 > 「분류 사용」 에 적으신 값이 탭이 됩니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 분류 탭 ────────────────────────────────────────────────────────────── */
.sub_content #bo_cate{
  margin:0 0 3rem;
  padding:0;
  border-bottom:1px solid var(--line-color);
}
.sub_content #bo_cate h2{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.sub_content #bo_cate ul{
  display:flex;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:wrap;
}
.sub_content #bo_cate li{ margin:0; }
.sub_content #bo_cate a{
  position:relative;
  display:inline-block;
  padding:.9rem 1.4rem;
  font-size:var(--fs-body);
  color:var(--muted-color);
  letter-spacing:-.02em;
  border:0;
  background:none;
}
.sub_content #bo_cate li:first-child a{ padding-left:0; }
.sub_content #bo_cate a::after{
  content:"";
  position:absolute;
  left:1.4rem;
  right:1.4rem;
  bottom:0;
  height:2px;
  background:transparent;
}
.sub_content #bo_cate li:first-child a::after{ left:0; }
.sub_content #bo_cate a#bo_cate_on{
  color:var(--body-color);
  font-weight:600;
}
.sub_content #bo_cate a#bo_cate_on::after{
  background:var(--body-color);
}

/* ── 목록 위 줄 ─────────────────────────────────────────────────────────── */
.sub_content #bo_list_total{
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
}

/* ── 분류 이름 — 목록 안 ────────────────────────────────────────────────── */
.sub_content #bo_list .bo_cate_link{
  display:inline-block;
  font-size:1.3rem;
  color:var(--point-color);
  letter-spacing:-.02em;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 기본 게시판 — kk_basic ★★
   --------------------------------------------------------------------------
   작가의 방 · 이야기 마당 · 문의가 씁니다.

   ★ 표를 «선 두 줄» 로 두었습니다. 위는 굵게, 칸마다 가늘게.
     세로선은 없습니다. 서가처럼 조용한 것이 우리 결입니다.

   ★ 글쓰기 폼은 도서 등록과 같은 결로 맞췄습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 표 ────────────────────────────────────────────────────────────── */
.sub_content #bo_list .tbl_head01 table,
.sub_content #bo_list table{
  width:100%;
  border-collapse:collapse;
  border-top:2px solid var(--rule);
  border-bottom:0;
}
.sub_content #bo_list thead th{
  padding:1.4rem .8rem;
  font-size:1.3rem;
  font-weight:400;
  color:var(--muted-color);
  letter-spacing:-.02em;
  background:none;
  border:0;
  border-bottom:1px solid var(--line-color);
  white-space:nowrap;
}
.sub_content #bo_list tbody td{
  padding:1.6rem .8rem;
  font-size:var(--fs-body-sm);
  color:var(--text-color);
  border:0;
  border-bottom:1px solid #f0efed;
  background:none;
  text-align:center;
  vertical-align:middle;
}
.sub_content #bo_list tbody tr:hover td{
  background:var(--lightgray-color);
}

/* 제목 칸 */
.sub_content #bo_list .td_subject{
  text-align:left;
  padding-left:.4rem;
}
.sub_content #bo_list .td_subject a,
.sub_content #bo_list .bo_tit{
  font-size:var(--fs-body);
  color:var(--body-color);
  letter-spacing:-.02em;
}
.sub_content #bo_list tbody tr:hover .bo_tit{ color:var(--point-color); }

/* 번호 · 날짜 · 글쓴이 — 조용히 */
.sub_content #bo_list .td_num,
.sub_content #bo_list .td_num2,
.sub_content #bo_list .td_date,
.sub_content #bo_list .td_datetime,
.sub_content #bo_list .td_name{
  font-size:1.3rem;
  color:var(--muted-color);
}

/* 분류 이름 */
.sub_content #bo_list .bo_cate_link{
  display:inline-block;
  margin-right:.8rem;
  font-size:1.3rem;
  color:var(--point-color);
  letter-spacing:-.02em;
}

/* 댓글 수 */
.sub_content #bo_list .cnt_cmt{
  display:inline-block;
  margin-left:.6rem;
  font-size:1.2rem;
  color:var(--muted-color);
}

/* 공지 딱지 */
.sub_content #bo_list .bo_notice td{
  background:var(--lightgray-color);
}
.sub_content #bo_list .bo_notice .td_num2{
  font-size:1.2rem;
  color:var(--point-color);
}

/* ── 글쓰기 폼 ──────────────────────────────────────────────────────────── */
.sub_content #bo_w .write_div{
  margin:0 0 2.4rem;
  padding:0;
  border:0;
}
.sub_content #bo_w label,
.sub_content #bo_w .write_div > label{
  display:block;
  margin:0 0 .6rem;
  font-size:1.3rem;
  font-weight:400;
  color:var(--muted-color);
  letter-spacing:.01em;
}
.sub_content #bo_w .frm_input,
.sub_content #bo_w input[type="text"],
.sub_content #bo_w input[type="password"],
.sub_content #bo_w input[type="email"],
.sub_content #bo_w select{
  width:100%;
  max-width:var(--kk-form-w);
  height:4.6rem;
  padding:0 1.4rem;
  font-size:var(--fs-body);
  color:var(--body-color);
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
  box-sizing:border-box;
}
.sub_content #bo_w .frm_input:focus,
.sub_content #bo_w select:focus{
  background:#fff;
  border-color:var(--body-color);
  box-shadow:none;
  outline:none;
}
.sub_content #bo_w .half_input{
  width:100%;
  max-width:32rem;
}
.sub_content #bo_w textarea,
.sub_content #bo_w #wr_content{
  width:100%;
  max-width:var(--kk-form-w);
  min-height:24rem;
  padding:1.4rem;
  font-size:var(--fs-body);
  line-height:var(--kk-lh);
  background:var(--kk-fld-bg);
  border:1px solid transparent;
  border-radius:0;
  box-sizing:border-box;
  resize:vertical;
}
.sub_content #bo_w textarea:focus{
  background:#fff;
  border-color:var(--body-color);
}

/* 파일 고르기 */
.sub_content #bo_w .bo_w_flie,
.sub_content #bo_w .file_wr{
  margin:0 0 1.2rem;
  max-width:var(--kk-form-w);
}
.sub_content #bo_w input[type="file"]{
  width:100%;
  max-width:var(--kk-form-w);
  padding:1rem 1.4rem;
  font-size:1.3rem;
  background:#fff;
  border:1px solid var(--line-color);
  box-sizing:border-box;
}

/* 안내 글 */
.sub_content #bo_w .bo_w_info,
.sub_content #bo_w .frm_info{
  margin:.5rem 0 0;
  font-size:1.2rem;
  line-height:1.5;
  color:#8a857e;
}

/* 「필수」 표시 */
.sub_content #bo_w .required + strong,
.sub_content #bo_w label strong{
  margin-left:.3rem;
  font-size:1.1rem;
  font-weight:400;
  color:var(--point-color);
}
.sub_content #bo_w .frm_input.required{ background-image:none !important; }

/* ── 아래 단추 줄 ───────────────────────────────────────────────────────── */
.sub_content #bo_w .btn_confirm{
  display:flex;
  align-items:center;
  gap:1.6rem;
  margin:4rem 0 0;
  padding:0;
  border:0;
}
.sub_content #bo_w .btn_confirm .btn_submit,
.sub_content #bo_w .btn_confirm .btn_cancel,
.sub_content #bo_w .btn_confirm a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:4.8rem;
  min-height:4.8rem;
  padding:0 3.2rem;
  font-size:var(--fs-body);
  line-height:1;
  border-radius:0;
  box-sizing:border-box;
}
.sub_content #bo_w .btn_confirm .btn_submit{
  font-weight:500;
  color:#fff;
  background:var(--body-color);
  border:0;
  cursor:pointer;
}
.sub_content #bo_w .btn_confirm .btn_submit:hover{ background:var(--kk-point-fill); }
.sub_content #bo_w .btn_confirm .btn_cancel,
.sub_content #bo_w .btn_confirm a{
  padding:0 .6rem;
  font-size:1.4rem;
  color:var(--muted-color);
  background:none;
  border:0;
}
.sub_content #bo_w .btn_confirm a:hover{ color:var(--body-color); }
/* ★ 단추 클래스가 .icon_btn_write / .icon_btn_cancel 입니다.
     이름에 icon 이 붙었지만 «단추 자체» 입니다. */
.sub_content #bo_w .icon_btn_write,
.sub_content #bo_w .btn_confirm button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:4.8rem;
  min-height:4.8rem;
  padding:0 3.2rem;
  font-size:var(--fs-body);
  font-weight:500;
  line-height:1;
  color:#fff;
  background:var(--body-color);
  border:0;
  border-radius:0;
  cursor:pointer;
  box-sizing:border-box;
  letter-spacing:.02em;
}
.sub_content #bo_w .icon_btn_write:hover{ background:var(--kk-point-fill); }

.sub_content #bo_w .icon_btn_cancel{
  display:inline-flex;
  align-items:center;
  height:4.8rem;
  padding:0 .6rem;
  font-size:1.4rem;
  color:var(--muted-color);
  background:none;
  border:0;
  text-decoration:none;
  box-sizing:border-box;
}
.sub_content #bo_w .icon_btn_cancel:hover{ color:var(--body-color); }

/* ★ 「취소」 를 «앞» 에 둡니다. 저장 앞에 두어 실수로 저장을 막습니다. */
.sub_content #bo_w .btn_confirm{ flex-direction:row; }

@media (max-width:600px){
  .sub_content #bo_list thead{ display:none; }
  .sub_content #bo_list tbody td{ padding:1.2rem .4rem; font-size:1.3rem; }
  .sub_content #bo_w .btn_confirm .btn_submit,
  .sub_content #bo_w .btn_confirm a{ height:4.4rem; min-height:4.4rem; }
}


/* ── 댓글 수 동그라미 — 원본대로 ────────────────────────────────────────
   ★ 원본은 «검은 원» 에 흰 숫자입니다. (css/style.css)
     제가 넣은 규칙이 그것을 덮어 글자만 남고 자리가 내려갔습니다.

   ★ 제목 옆에 «가운데 맞춰» 붙습니다. */
.sub_content #bo_list .cnt_cmt,
#bo_list .cnt_cmt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  margin-left:.6rem;
  padding:0;
  font-size:1.1rem;
  font-weight:500;
  line-height:1;
  color:#fff;
  background:var(--body-color);
  border:0;
  border-radius:50%;
  vertical-align:middle;
  letter-spacing:0;
}


/* ── 댓글 수 — 목록 안에서는 검은 원 하나로 ────────────────────────────
   ★ 앞서 다른 화면용으로 넣은 .cnt_cmt 에 붉은 테두리가 있어
     검은 원과 겹쳐 어긋났습니다.

   ★ 목록 안(#bo_list)에서는 검은 원으로 통일합니다.
     테두리도 없앱니다. */
#bo_list .cnt_cmt,
.sub_content #bo_list .cnt_cmt,
#bo_list .td_subject .cnt_cmt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  min-width:1.8rem;
  margin-left:.6rem;
  padding:0;
  font-size:1.1rem;
  font-weight:500;
  line-height:1;
  color:#fff;
  background:var(--body-color);
  border:0 !important;
  border-radius:50%;
  vertical-align:middle;
  letter-spacing:0;
  box-shadow:none;
}


/* ── 제목과 댓글 수를 한 줄에 ────────────────────────────────────────────
   ★ .bo_tit 이 display:block 이라 줄을 통째로 차지했습니다.
     그래서 검은 원이 «다음 줄» 로 밀렸습니다. (원본 style.css)

   ★ inline 으로 두면 제목 옆에 나란히 섭니다.
     제목이 두 줄이 되어도 마지막 글자 옆에 붙습니다. */
.sub_content #bo_list .bo_tit,
#bo_list .bo_tit,
.sub_content #bo_list .td_subject a.bo_tit{
  display:inline !important;
  font-size:var(--fs-body);
  color:var(--body-color);
  letter-spacing:-.02em;
  vertical-align:middle;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 기본 게시판 — 폭 · 밑줄 · 폼 · 단추 (마무리) ★★
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 표 폭 ────────────────────────────────────────────────────────────
   .wrap 이 없어 화면 끝까지 퍼졌습니다.
   목록 자체에 폭을 겁니다. */
.sub_content #bo_list,
.sub_content #bo_v,
.sub_content #bo_w{
  max-width:var(--inner-size);
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(1.8rem, 2vw, 2.4rem);
  padding-right:clamp(1.8rem, 2vw, 2.4rem);
  box-sizing:border-box;
}

/* ── ② 분류 탭 밑줄 — 글자 폭에 ─────────────────────────────────────────
   좌우 여백만큼 삐져나왔습니다. 도서 목록과 같은 방식으로 고칩니다. */
.sub_content #bo_cate a::after{
  left:1.4rem;
  right:1.4rem;
  bottom:0;
  height:2px;
  background:transparent;
}
.sub_content #bo_cate li:first-child a::after{ left:0; }
.sub_content #bo_cate a#bo_cate_on::after{ background:var(--body-color); }

/* ── ③ 글쓰기 폼 — 가운데 · 크기 고정 ───────────────────────────────────
   폼이 왼쪽에 몰려 있었습니다.
   가운데로 모으고 칸 폭을 못박습니다. */
.sub_content #bo_w{
  max-width:calc(var(--kk-form-w) + 4.8rem);
}
.sub_content #bo_w .frm_input,
.sub_content #bo_w input[type="text"],
.sub_content #bo_w input[type="password"],
.sub_content #bo_w input[type="email"],
.sub_content #bo_w select,
.sub_content #bo_w textarea,
.sub_content #bo_w input[type="file"]{
  width:100%;
  max-width:100%;
}
.sub_content #bo_w .half_input{ max-width:32rem; }
.sub_content #bo_w textarea,
.sub_content #bo_w #wr_content{
  height:32rem;
  min-height:32rem;
  /* ★ 칸의 «크기는 고정» 입니다. 늘였다 줄였다 하지 않습니다.
       글이 길어지면 칸 안에서 위아래로 움직여 읽습니다.
       (마우스 휠이 칸 안에서 먹히도록 하는 처리는 js/custom.js 에 있습니다.
        부드러운 스크롤이 휠을 가로채고 있었습니다) */
  resize:none;
  overflow-y:auto;              /* 넘치는 글은 칸 안에서 스크롤 */
}

/* 링크 칸 — 아이콘이 겹칩니다 */
.sub_content #bo_w .bo_w_link{
  position:relative;
  margin:0 0 1.2rem;
}
.sub_content #bo_w .bo_w_link .lb_icon,
.sub_content #bo_w .bo_w_link svg,
.sub_content #bo_w .bo_w_flie .lb_icon,
.sub_content #bo_w .bo_w_flie svg{
  display:none;                 /* ★ 아이콘을 걷어냅니다 */
}

/* 체크 상자 줄 */
.sub_content #bo_w .bo_v_option{
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  margin:0 0 2.4rem;
  padding:0;
  list-style:none;
}
.sub_content #bo_w .bo_v_option li{ margin:0; }
.sub_content #bo_w .bo_v_option label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-size:1.3rem;
  color:var(--text-color);
  cursor:pointer;
}
.sub_content #bo_w .bo_v_option input[type="checkbox"]{
  width:1.6rem;
  height:1.6rem;
  margin:0;
  accent-color:var(--body-color);
}

/* 임시 저장 단추 — 조용히 */
.sub_content #bo_w #btn_autosave{
  display:inline-flex;
  align-items:center;
  height:3.2rem;
  margin:.8rem 0 0;
  padding:0 1.2rem;
  font-size:1.2rem;
  color:var(--muted-color);
  background:none;
  border:1px solid var(--line-color);
  border-radius:0;
  cursor:pointer;
}

/* ── ④ 아래 단추 — 겹침 없이 ────────────────────────────────────────────
   원본 아이콘 글꼴이 글자와 포개졌습니다. */
.sub_content #bo_w .btn_confirm{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.6rem;
  margin:4rem 0 0;
  padding:0;
  border:0;
}
.sub_content #bo_w .icon_btn_write::before,
.sub_content #bo_w .icon_btn_write::after,
.sub_content #bo_w .icon_btn_cancel::before,
.sub_content #bo_w .icon_btn_cancel::after{
  display:none !important;      /* ★ 아이콘을 걷어냅니다 */
  content:none !important;
}
.sub_content #bo_w .icon_btn_write{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:4.8rem;
  min-height:4.8rem;
  padding:0 3.2rem;
  font-size:var(--fs-body);
  font-weight:500;
  line-height:1;
  color:#fff;
  background:var(--body-color);
  border:0;
  border-radius:0;
  cursor:pointer;
  text-indent:0;
  overflow:visible;
  box-sizing:border-box;
}
.sub_content #bo_w .icon_btn_write:hover{ background:var(--kk-point-fill); }
.sub_content #bo_w .icon_btn_cancel{
  display:inline-flex;
  align-items:center;
  width:auto;
  height:4.8rem;
  padding:0 .6rem;
  font-size:1.4rem;
  line-height:1;
  color:var(--muted-color);
  background:none;
  border:0;
  text-decoration:none;
  text-indent:0;
  overflow:visible;
  box-sizing:border-box;
}
.sub_content #bo_w .icon_btn_cancel:hover{ color:var(--body-color); }

@media (max-width:600px){
  .sub_content #bo_w textarea{ height:24rem; min-height:24rem; }
  .sub_content #bo_w .icon_btn_write,
  .sub_content #bo_w .icon_btn_cancel{ height:4.4rem; min-height:4.4rem; }
}


/* ── 단추 줄 왼쪽 정렬 — 원본이 오른쪽으로 밀고 있습니다 ─────────────────
   ★ #content #bo_w .btn_confirm 에 justify-content:flex-end 가 있습니다.
     (css/modify.css) 같은 힘으로 눌러야 합니다.

   ★ 폼이 왼쪽에서 시작하므로 단추도 왼쪽이 맞습니다. */
#content #bo_w .btn_confirm,
.sub_content #bo_w .btn_confirm{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:1.6rem;
  margin:4rem 0 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ 게시판 손질 (2026-08-03) — 목록·본문·글쓰기 ★★
   --------------------------------------------------------------------------
   ■ 무엇을 고쳤나
     ① 게시판 폭을 1000px 로 고정하고 가운데 정렬
     ② 분류 이름(공지·질문·답변)을 제목보다 작게 · 포인트 색으로
     ③ 본문 위 분류 — 회색 상자를 걷어내고 글자만 왼쪽에
     ④ 탭(전체·질문·답변) 밑줄을 글자 폭에 딱 맞게
     ⑤ 「임시 저장된 글」 단추를 제목칸 위아래 한가운데로
     ⑥ 「취소·작성완료」 단추 줄을 가운데로
     ⑦ 파일칸을 감싸던 상자 선 제거

   ■ 되돌리시려면
     이 표시부터 파일 끝까지 지우시면 이전 모습 그대로입니다.
     위쪽 줄은 하나도 건드리지 않았습니다.

   ■ ★ 값을 바꾸실 곳은 바로 아래 두 줄뿐입니다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kk-board-w:100rem;              /* 게시판 폭 — 100rem = 1000px */
  --kk-cate-fs:1.3rem;              /* 분류 이름 글자 크기 (제목은 1.6rem) */
}

/* ── ① 게시판 폭 — 1000px 가운데 ─────────────────────────────────────────
   목록(#bo_list) · 본문(#bo_v) · 글쓰기(#bo_w) 셋이 같은 폭이어야
   화면을 오갈 때 흔들리지 않습니다.
   ※ 도서 갤러리(#bo_gall)는 표지를 넓게 펼쳐야 해서 여기 넣지 않았습니다. */
.sub_content #bo_list,
.sub_content #bo_v,
.sub_content #bo_w,
#bo_list, #bo_v, #bo_w{
  max-width:var(--kk-board-w);
  margin-left:auto;
  margin-right:auto;
}

/* ── ② 분류 이름 — 목록 안 ──────────────────────────────────────────────
   ★ 왜 여태 안 먹었나
     같은 파일의 「.td_subject a」 규칙이 분류 링크에도 걸려
     제목과 똑같은 크기·색이 되어 있었습니다.
     선택자를 한 단계 더 정확히 짚어(a.bo_cate_link) 힘을 넘깁니다. */
.sub_content #bo_list .td_subject a.bo_cate_link,
#bo_list .td_subject a.bo_cate_link,
.sub_content #bo_list .bo_cate_link{
  float:none;
  display:inline;
  height:auto;
  margin:0 .8rem 0 0;
  padding:0;
  background:none;
  border-radius:0;
  font-size:var(--kk-cate-fs);
  font-weight:400 !important;      /* 스킨 원본의 !important 와 같은 힘으로 */
  line-height:inherit;
  color:var(--point-color);
  letter-spacing:-.02em;
  vertical-align:middle;
}

/* ── ③ 본문 위 분류 — 상자 없이 글자만 ──────────────────────────────────
   회색 음영(background)을 걷어내고, 제목 위 별도 줄에 왼쪽 정렬합니다.
   목록의 분류와 같은 크기·색이라 두 화면이 자연스럽게 이어집니다. */
.sub_content #bo_v #bo_v_title .bo_v_cate,
#bo_v #bo_v_title .bo_v_cate{
  display:block;
  width:fit-content;
  margin:0 0 1.2rem;
  padding:0;
  background:none;
  border-radius:0;
  font-size:var(--kk-cate-fs);
  color:var(--point-color);
  line-height:1.4;
  text-align:left;
}

/* ── ④ 탭 밑줄 — 글자 폭에 ──────────────────────────────────────────────
   ★ 무엇이 어긋났나
     글자는 좌우 1.2rem 여백 안에 있는데,
     밑줄은 첫 탭에서 left:0 이라 왼쪽으로 12px 튀어나오고
     오른쪽은 1.4rem 이라 2px 모자랐습니다.
     밑줄의 시작·끝을 글자 여백(1.2rem)과 똑같이 맞춥니다. */
/* ★ 2026-08-04 보강 — 두 곳의 «글자 여백» 이 서로 다릅니다.
     · #bo_list 안쪽 탭 : 좌우 1.2rem
     · 그 밖(자주 묻는 질문 등) : 좌우 1.4rem, 다만 «첫 탭은 왼쪽 0»
     한 값으로 뭉뚱그리면 밑줄이 글자와 어긋납니다. 따로 짚습니다. */
#bo_list #bo_cate a::after{ left:1.2rem; right:1.2rem; }
#bo_list #bo_cate li:first-child a::after{ left:1.2rem; }

.sub_content #bo_cate a::after{ left:1.4rem; right:1.4rem; }
.sub_content #bo_cate li:first-child a::after{ left:0; }
@media (max-width:600px){
  /* 좁은 화면은 글자 여백이 .9rem 으로 줄어듭니다. 밑줄도 함께. */
  #bo_list #bo_cate a::after,
  .sub_content #bo_cate a::after,
  #bo_list #bo_cate li:first-child a::after,
  .sub_content #bo_cate li:first-child a::after{
    left:.9rem;
    right:.9rem;
  }
}

/* ── ⑤ 「임시 저장된 글」 — 제목칸 한가운데 ─────────────────────────────
   ★ 무엇이 어긋났나
     top:5px 에 margin-top:8px 이 겹쳐 13px 위로 올라가 있었습니다.
     top:50% + translateY(-50%) 는 «칸 높이가 바뀌어도» 늘 한가운데입니다. */
.sub_content #bo_w #btn_autosave,
#bo_w #btn_autosave{
  position:absolute;
  top:50%;
  right:.7rem;
  transform:translateY(-50%);
  margin:0;
}

/* ── ⑥ 「취소 · 작성완료」 — 가운데 ─────────────────────────────────────
   ★ 위쪽에 왼쪽 정렬 !important 규칙이 있어 같은 힘으로 눌러야 합니다.
     같은 선택자를 «더 나중에» 쓰면 이깁니다. */
#content #bo_w .btn_confirm,
.sub_content #bo_w .btn_confirm,
#bo_w .btn_confirm{
  justify-content:center !important;
  text-align:center !important;
}

/* ── ⑦ 파일칸 — 상자 선 제거 · 폭 통일 ──────────────────────────────────
   그누보드 기본 스킨에서 딸려온 테두리입니다.
   다른 입력칸에는 없는 선이라 이 칸만 상자에 갇혀 보였습니다.
   선 한 줄만 지우면 나머지 세 변이 어색하게 남으므로 통째로 걷어냅니다.
   ★ 폭도 다른 칸과 같게 — 위쪽의 옛 640px 제한을 풉니다. */
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie,
.sub_content #bo_w .bo_w_flie .file_wr,
#bo_w .file_wr{
  max-width:100%;
  height:auto;
  border:0;
  padding:0;
  background:none;
}
.sub_content #bo_w .bo_w_flie .frm_file,
#bo_w .bo_w_flie .frm_file{
  /* ★ 원본 스킨은 아이콘 자리로 50px 을 비워 둡니다. 아이콘이 없으니
       다른 입력칸과 같은 1.4rem 으로 맞춥니다. 0 으로 두면
       「파일 선택」 단추가 테두리에 딱 붙어 답답합니다. */
  padding-left:1.4rem;
  margin-top:0;
}
.sub_content #bo_w input[type="file"]{
  max-width:100%;               /* 다른 입력칸과 같은 폭 */
}


/* ── ⑧ 내용칸 — 다른 칸과 같은 폭 ───────────────────────────────────────
   ★ 왜 좁았나
     위쪽의 「.sub_content #bo_w #wr_content」 규칙이 옛 640px 을 물고 있습니다.
     아이디(#)가 둘이라 힘이 세서, 게시판을 1000px 로 넓혀도 이 칸만 남았습니다.
     같은 힘의 선택자를 «더 나중에» 써서 풉니다. */
.sub_content #bo_w #wr_content,
#bo_w #wr_content{
  max-width:100%;
}

/* ── ⑨ 「비밀글 · 댓글등록」 줄 — 위아래 한가운데 ───────────────────────
   댓글등록 사각형과 「비밀글」 글자의 세로 중심을 맞춥니다.
   글꼴이 바뀌어도(맥·윈도우) 어긋나지 않도록 flex 로 못박습니다. */
#bo_vc_w .btn_confirm,
.sub_content #bo_vc_w .btn_confirm{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1.2rem;
}
#bo_vc_w .btn_confirm .secret_cm,
.sub_content #bo_vc_w .btn_confirm .secret_cm{
  display:inline-flex;
  align-items:center;
  margin:0;
  position:static;
  top:auto;
}
#bo_vc_w .btn_confirm .secret_cm label,
.sub_content #bo_vc_w .btn_confirm .secret_cm label{
  display:inline-flex;
  align-items:center;
  margin:0 1rem 0 0;
  line-height:1;
}

/* ── ⑩ 임프린트 안내 — 출판 방향 맨 아래 (2026-08-04) ────────────────────
   ★ 다섯 항목(.creed)이 끝난 뒤, 맺음말과 서명 사이에 놓입니다.
     본문보다 «한 걸음 물러선» 자리로 보이게 여백과 선만 씁니다.
     상자·그림자·색 배경은 쓰지 않습니다. */
.kk-doc .imprint{
  margin:clamp(4rem,5vw,5.6rem) 0 0;
  padding:clamp(2.4rem,3vw,3.2rem) 0 0;
  border-top:1px solid var(--line-color);
}
.kk-doc .imprint .sub-h{
  margin:0 0 1.2rem;
  padding-bottom:0;
  font-size:1.6rem;
  color:var(--point-color);   /* 임프린트 이름이라 포인트 색으로 살짝 구분 */
  /* ★ 2026-08-05 — 소제목(.sub-h)에 기본으로 붙는 아래 선을 걷어냅니다.
       이 단락은 위쪽에 이미 구분선이 있어, 그대로 두면 가는 선이 둘로
       겹쳐 답답해집니다. 여기서는 «위 선 하나» 로 충분합니다. */
  border-bottom:0;
}
.kk-doc .imprint p{ margin:0; }

/* ── ⑪ 제작 진행 — 「일곱 단계 가운데 넷째」 (2026-08-04) ─────────────────
   단계 이름 뒤에 붙는 «남은 길» 표시입니다.
   이름보다 한 단계 여리게 두어, 눈이 «이름» 에 먼저 가게 합니다. */
.prg-step .prg-of,
.band-item em .prg-of{
  color:var(--muted-color);
  white-space:nowrap;   /* 「일곱 단계 가운데」 와 「넷째」 가 갈라지지 않게 */
}

/* ── ⑫ 제작 진행 공개 목록 — 링크가 아닙니다 (2026-08-04) ────────────────
   .band-item 이 <a> 에서 <div> 로 바뀌었습니다.
   손가락 모양 커서와 «누를 수 있어 보이는» 색 변화를 걷어냅니다.
   눌러도 아무 일이 없는데 눌러 보게 만들면 안 됩니다. */
.band-item{ cursor:default; }
.band-item:hover b{ color:var(--body-color); }

/* ── ⑬ 게시판 «본문 안» 의 굵은 글자 (2026-08-04) ────────────────────────
   ★ 무엇이 어긋났나
     위 「굵은 글자」 규칙은 .kk-doc(안내 페이지)와 .mtext 만 다룹니다.
     게시판 본문(#bo_v_con)은 빠져 있어, 공지에 <b> 를 써도
     굵어지지 않았습니다.
     브라우저 기본값 bolder 는 «부모보다 한 단계» 라는 뜻인데,
     본문이 300 이라 400 이 되어 눈에 띄지 않습니다.

   ★ 대표님이 공지·안내를 쓰실 때 굵게가 먹지 않으면
     읽는 사람이 어디가 중요한지 모릅니다. 여기서 바로잡습니다. */
#bo_v_con b, #bo_v_con strong,
.sub_content #bo_v_con b, .sub_content #bo_v_con strong{
  font-weight:600;
  color:var(--body-color);
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 자주 묻는 질문 (2026-08-04) ★★
   --------------------------------------------------------------------------
   스킨: /theme/kkeullim_theme/skin/faq/kk_faq/
   ■ 폭은 게시판과 같은 1000px 입니다. --kk-board-w 를 그대로 씁니다.
   ■ 상자·배경색·아이콘을 쓰지 않습니다. 선과 여백으로만 나눕니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 폭 — 게시판(#bo_list·#bo_v·#bo_w)과 같은 1000px 로 맞춥니다.
     ■ 왜 이렇게 짚어야 하나
       위쪽에 「.kk-doc, .mtext, .ms, .ms .read … { max-width:72rem }」 라는
       읽기 좋은 폭(720px) 규칙이 있습니다. 안내 페이지를 위한 것입니다.
       자주 묻는 질문은 «게시판 계열» 이라 1000px 이어야 하는데,
       그 규칙에 걸려 720px 로 나왔습니다.
       그래서 세 겹(.ms · .read · .kk-faq)을 모두 풀어 줍니다. */
.ms.wide,
.sub_content .ms.wide{ max-width:var(--kk-board-w); }
.ms.wide .read.kk-faq,
.sub_content .ms.wide .read.kk-faq{ max-width:100%; }
.kk-faq{
  max-width:var(--kk-board-w);
  margin-left:auto;
  margin-right:auto;
}

/* ── 검색 — 밑줄 하나 ──────────────────────────────────────────────────── */
/* ── 머리줄 — 왼쪽 분류 · 오른쪽 검색 ─────────────────────────────────── */
.kk-faq .faq-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2.4rem;
  margin:0 0 clamp(2.4rem,3vw,3.2rem);
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--line-color);
}
.kk-faq .faq-head #bo_cate{ flex:1 1 auto; min-width:0; margin:0; }

.kk-faq .faq-sch{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex:0 0 auto;
  width:26rem;
  margin:0;
  padding-bottom:.4rem;
  /* ★ --line-color 는 너무 연해 «칸이 있는 줄» 도 몰랐습니다. 한 단계 진하게. */
  border-bottom:1px solid var(--muted-color);
  transition:border-color .2s;
}
/* 칸에 손이 닿으면 더 진해집니다 — 어디를 쓰는지 알려 줍니다 */
.kk-faq .faq-sch:focus-within{ border-bottom-color:var(--body-color); }
/* ★ 배경과 테두리를 «!important» 로 지웁니다.
     .sub_content input[type=text] 같은 전역 규칙이 회색 바탕을 깔아
     밑줄만 두려던 모양이 상자로 보였습니다. */
.kk-faq .faq-sch-in,
.sub_content .kk-faq .faq-sch-in{
  flex:1 1 auto;
  min-width:0;
  padding:.4rem 0 !important;
  font-size:var(--fs-body-sm);
  color:var(--body-color);
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none;
}
.kk-faq .faq-sch-in::placeholder{ color:var(--muted-color); }
.kk-faq .faq-sch-btn{
  flex:0 0 auto;
  padding:.4rem 0 .4rem 1.2rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  background:none;
  border:0;
  cursor:pointer;
}
.kk-faq .faq-sch-btn:hover{ color:var(--point-color); }
/* 돋보기와 글자 사이 */
.kk-faq .faq-sch-btn .fa{ margin-right:.6rem; font-size:1.4rem; }
@media (max-width:480px){
  /* 좁은 화면에서는 돋보기만 남깁니다. 검색칸이 넉넉해집니다. */
  .kk-faq .faq-sch-btn .fa{ margin-right:0; font-size:1.6rem; }
  .kk-faq .faq-sch-tx{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}

/* 찾은 결과 알림 */
.kk-faq .faq-sch-now{
  margin:-2.4rem 0 3.2rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  text-align:center;
}
.kk-faq .faq-sch-now a{ margin-left:.8rem; text-decoration:underline; }

/* ── 분류 탭 ────────────────────────────────────────────────────────────
   ★ 2026-08-04 — 선을 둘 다 걷어냈습니다.
     ① 탭 아래 가로선  ② 고른 탭의 밑줄
     게시판에서는 표가 이어지니 선이 «표의 머리» 노릇을 하지만,
     여기는 아래가 문답 목록이라 선이 겹쳐 답답합니다.
     어느 탭을 고르셨는지는 «굵기와 색» 으로 충분히 드러납니다.
   ★ 왼쪽 정렬 — 문답 목록이 왼쪽에서 시작하므로 탭도 같은 자리에서 섭니다. */
/* ── ① 가로로 길게 깔리던 선은 지웁니다 ────────────────────────────────
     nav 아래 · ul 아래 두 군데에 있었습니다. */
.kk-faq #bo_cate,
.sub_content .kk-faq #bo_cate{ border-bottom:0; }
.kk-faq #bo_cate ul,
.sub_content .kk-faq #bo_cate ul{
  justify-content:flex-start;
  gap:clamp(2rem,2.6vw,3.2rem);   /* 탭 사이를 벌려 각각이 또렷하게 */
  border-bottom:0;
}

/* ── ② 탭 글자 — 또렷하게 ──────────────────────────────────────────────
   ★ 선을 걷어내면 «고른 탭» 이 눈에 안 들어옵니다.
     그래서 글자를 키우고(1.8rem) 고른 것만 굵게·진하게 둡니다.
     원본 테마도 1.8rem 을 썼습니다. */
.kk-faq #bo_cate a,
.sub_content .kk-faq #bo_cate a{
  position:relative;
  padding:0 0 1.2rem;             /* 좌우 여백 없이 — 밑줄이 글자 폭과 같아집니다 */
  font-size:1.8rem;
  font-weight:400;
  color:var(--muted-color);
  transition:color .2s;
}
.kk-faq #bo_cate a:hover,
.sub_content .kk-faq #bo_cate a:hover{ color:var(--body-color); }

.kk-faq #bo_cate a#bo_cate_on,
.sub_content .kk-faq #bo_cate a#bo_cate_on{
  font-weight:600;
  color:var(--body-color);
  border-bottom:0;                /* 테마의 1px 선은 끄고 아래 ::after 로 그립니다 */
}

/* ── ③ 고른 탭의 밑줄 — 글자 폭에 «정확히» ────────────────────────────
   좌우 여백을 0 으로 두었으므로 left·right 0 이면 글자와 딱 맞습니다.
   2px 로 그려 아래 문답 목록의 가는 선(1px)과 구별됩니다. */
.kk-faq #bo_cate a::after,
.sub_content .kk-faq #bo_cate a::after{ display:none; }
.kk-faq #bo_cate a#bo_cate_on::after,
.sub_content .kk-faq #bo_cate a#bo_cate_on::after{
  display:block;
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-1.3px;                  /* ★ 머리줄의 가는 선 «위에» 겹칩니다 */
  height:2px;
  background:var(--body-color);
}

/* ── 문답 ──────────────────────────────────────────────────────────────── */
/* ★ 분류 탭이 이미 아래 선을 갖고 있어, 목록에 위 선을 또 두면
     가는 줄이 두 개로 겹쳐 보입니다. 위 선을 두지 않습니다. */
.kk-faq .faq-list{ margin:0; padding:0; list-style:none; }
.kk-faq #bo_cate + #faq_wrap .faq-list{ border-top:0; }
.kk-faq .faq-list > li{ border-bottom:1px solid var(--line-color); }
.kk-faq .faq-list h3{ margin:0; font-size:1em; font-weight:400; }

/* 질문 줄 — 단추 하나가 줄 전체입니다 */
.kk-faq .faq-q{
  display:flex;
  align-items:center;
  gap:2.4rem;
  width:100%;
  /* ★ 위아래 여백을 조금 줄였습니다. 전에는 여섯 항목이 한 화면을 다 채워
       «목록» 이 아니라 «낱장» 처럼 보였습니다. */
  padding:clamp(1.6rem,1.9vw,1.9rem) 0;
  font-size:1.7rem;               /* 본문(1.6)보다 한 단계 크게 — 목록의 주인공 */
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.02em;
  color:var(--body-color);
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
  transition:color .2s;
}
.kk-faq .faq-q:hover .faq-q-tx{ color:var(--point-color); }
.kk-faq .faq-q-tx{ flex:1 1 auto; }

/* 여닫는 표시 — 아이콘 글꼴을 쓰지 않고 «선 두 개» 로 그립니다.
   ★ 아이콘 글꼴이 안 열리면 네모(□)로 깨집니다. 겪어 본 일입니다. */
.kk-faq .faq-q-mk{
  position:relative;
  flex:0 0 auto;
  width:1.1rem;
  height:1.1rem;
  opacity:.55;                    /* 거들 뿐이니 한 걸음 물러섭니다 */
  transition:opacity .2s;
}
.kk-faq .faq-q:hover .faq-q-mk,
.kk-faq .is-open .faq-q-mk{ opacity:1; }
.kk-faq .faq-q-mk::before,
.kk-faq .faq-q-mk::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  background:var(--muted-color);
  transform:translate(-50%,-50%);
  transition:transform .18s ease, background-color .18s ease;
}
.kk-faq .faq-q-mk::before{ width:1.1rem; height:1px; }   /* 가로 */
.kk-faq .faq-q-mk::after { width:1px; height:1.1rem; }   /* 세로 */
/* 열리면 세로 선을 눕혀 «빼기» 로 만듭니다 */
.kk-faq .is-open .faq-q-mk::after{ transform:translate(-50%,-50%) rotate(90deg); }
.kk-faq .is-open .faq-q-mk::before,
.kk-faq .is-open .faq-q-mk::after{ background:var(--point-color); }
.kk-faq .is-open .faq-q-tx{ color:var(--body-color); font-weight:500; }

/* ★ 마우스로 눌렀을 때 파란 테두리가 남지 않게 합니다.
     :focus-visible 은 «키보드로 옮겨 왔을 때만» 테두리를 보여 줍니다.
     눈으로 보는 분에게는 거슬리지 않고, 키보드로 쓰시는 분은 자리를 압니다. */
.kk-faq .faq-q:focus{ outline:none; }
.kk-faq .faq-q:focus-visible{
  outline:2px solid var(--point-color);
  outline-offset:-2px;
}

/* 답 */
/* ★ 답 — 전에는 여린 색(muted)이라 «정작 읽어야 할 글» 이 흐렸습니다.
     본문 색으로 올리고, 왼쪽에 여백을 두어 질문 아래 «한 겹 안쪽» 임을
     선 없이 알립니다. 상자도 배경색도 쓰지 않습니다. */
.kk-faq .faq-a{
  display:none;
  margin:0 0 0 clamp(0rem,2vw,2.4rem);
  padding:0 6rem clamp(2rem,2.6vw,2.6rem) 0;
  color:var(--body-color);
  font-size:var(--fs-body);
  line-height:1.85;
}
/* ★ 안쪽 <p> 가 전역 규칙에 걸려 15px 로 작아집니다.
     답은 «읽으라고 있는 글» 이니 본문 크기(16px)로 되돌립니다. */
.kk-faq .faq-a p,
.kk-faq .faq-a li{
  font-size:var(--fs-body);
  line-height:1.85;
  color:inherit;
}
.kk-faq .faq-a p{ margin:0 0 1em; }
.kk-faq .faq-a > *:first-child{ margin-top:0; }
.kk-faq .faq-a > *:last-child { margin-bottom:0; }
.kk-faq .faq-a b, .kk-faq .faq-a strong{
  font-weight:600; color:var(--body-color);
}

/* ── 없을 때 · 맺음 ────────────────────────────────────────────────────── */
.kk-faq .faq-none{
  padding:clamp(4rem,6vw,6.4rem) 0;
  color:var(--muted-color);
  text-align:center;
}
.kk-faq .faq-more{
  margin:clamp(3.2rem,4vw,4.8rem) 0 0;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  text-align:center;
}
.kk-faq .faq-none a,
.kk-faq .faq-more a{ color:var(--point-color); text-decoration:underline; }
.kk-faq .faq-admin{ margin:2.4rem 0 0; text-align:right; }

@media (max-width:600px){
  .kk-faq .faq-sch{ max-width:none; }
  /* ※ 좁은 화면에서 분류가 세로로 쌓이는 것은 «테마가 정한 모양» 입니다.
       (modify.css — 「폰 — 가로 스크롤 대신 세로 스택 리스트」)
       다른 게시판의 분류 탭도 똑같이 쌓입니다.
       여기만 다르게 두면 화면마다 손놀림이 달라지므로 그대로 따릅니다. */
}

/* ── 자주 묻는 질문 — 좁은 화면 (2026-08-04) ─────────────────────────────
   머리줄(분류·검색)이 한 줄에 다 들어가지 않으므로 위아래로 풉니다. */
@media (max-width:768px){
  .kk-faq .faq-head{
    display:block;
    padding-bottom:0;
    border-bottom:0;
  }
  .kk-faq .faq-head #bo_cate{ margin:0 0 2rem; }
  .kk-faq .faq-sch{ width:100%; padding-bottom:.8rem; }
  .kk-faq .faq-a{ margin-left:0; padding-right:0; }
}

/* ── ⑭ 필명별 모아 보기 (2026-08-04) ─────────────────────────────────────
   작가 마당 · 환원운동연구회 목록 위에 놓입니다.
   ★ 분류 탭(#bo_cate)과 «다른 모양» 으로 둡니다.
     둘이 같아 보이면 「갈래」와 「사람」이 뒤섞여 읽힙니다.
     분류는 밑줄로, 이쪽은 «글 수» 를 곁들인 한 줄 목록으로 나눕니다. */
.sub_content .kk-writers,
.kk-writers{
  margin:0 0 clamp(2rem,2.6vw,2.8rem);
  padding:0 0 1.6rem;
  border-bottom:1px solid var(--line-color);
}
.kk-writers ul{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2rem;
  margin:0;
  padding:0;
  list-style:none;
}
.kk-writers a{
  display:inline-flex;
  align-items:baseline;
  gap:.5rem;
  font-size:var(--fs-body-sm);
  color:var(--muted-color);
  transition:color .2s;
}
.kk-writers a:hover{ color:var(--body-color); }
/* 글 수 — 이름보다 한 걸음 물러서게 */
.kk-writers a i{
  font-style:normal;
  font-size:1.2rem;
  color:var(--line-color);
}
.kk-writers a:hover i{ color:var(--muted-color); }
/* 지금 보고 있는 사람 */
.kk-writers a.on{
  color:var(--body-color);
  font-weight:600;
}
.kk-writers a.on i{ color:var(--point-color); }

@media (max-width:600px){
  /* 좁은 화면에서는 한 줄로 두고 옆으로 밀어 봅니다.
     이름이 여럿이면 세로로 쌓여 화면을 다 잡아먹습니다. */
  .kk-writers ul{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:1.6rem;
    scrollbar-width:none;
  }
  .kk-writers ul::-webkit-scrollbar{ display:none; }
  .kk-writers li{ flex:0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 모바일 메뉴 손질 (2026-08-04) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     원본 테마가 모바일 메뉴 글자에 자간 0.1em 을 주고 있었습니다.
     영문에서는 시원해 보이지만, 한글은 낱자가 흩어져
     「출 판 사 소 개」 처럼 읽힙니다.
     한글은 자간을 «좁히는» 쪽이 또렷합니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){

  /* ── 큰 메뉴 ────────────────────────────────────────────────────────── */
  /* ★ 여기는 rem 이 아니라 px 로 씁니다.
       이 테마는 좁은 화면에서 rem 의 크기를 줄입니다(1rem ≈ 8.1px).
       메뉴는 «손가락으로 누르는 곳» 이라 화면이 좁다고 작아지면 안 됩니다.
       그래서 화면 크기와 무관한 px 로 못박습니다. */
  #header .gnb > ul > li > a,
  #header.on .gnb > ul > li > a{
    letter-spacing:-.02em;        /* 0.1em → 좁힙니다 */
    font-size:17px;
    font-weight:500;
    line-height:54px;             /* 손가락 — 44px 이상 */
    padding-left:20px;            /* 화면 가장자리에서 조금 띄웁니다 */
  }

  /* ── 하위 메뉴 ──────────────────────────────────────────────────────
     한 번 누르면 펼쳐집니다. 큰 메뉴와 «구별» 되어야
     지금 어느 갈래를 보고 있는지 알 수 있습니다. */
  #header .gnb > ul > li ul li a{
    letter-spacing:-.02em;
    font-size:15px;
    color:var(--muted-color);
    padding-left:34px;            /* 한 겹 안쪽임을 여백으로 알립니다 */
    line-height:46px;             /* ★ 손가락으로 누르기 — 44px 이상 */
  }
  #header .gnb > ul > li ul li a:hover,
  #header .gnb > ul > li ul li a:active{ color:var(--body-color); }
}

/* ── 모바일 — 손가락으로 누르는 곳 (2026-08-04) ──────────────────────────
   ★ 「터치 영역 최소 44×44px」 은 처음 정하신 원칙입니다.
     재어 보니 지켜지지 않은 곳이 있었습니다.
       · 로그인 · 회원가입  글자 9.75px · 높이 17px
       · 햄버거 단추        32×32px
     화면이 좁다고 작아지면 안 되는 곳이라 px 로 못박습니다. */
@media (max-width:1024px){

  /* 로그인 · 회원가입 · 로그아웃 · 관리자
     ★ 이 묶음의 클래스는 «.adm» 입니다. (head.php 의 <div class="adm fs">)
       .member · .tnb 로 짚었다가 하나도 안 걸렸습니다. */
  #header .gnb .adm a,
  #header .adm a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 10px;
    font-size:14px;
    letter-spacing:-.02em;
  }

  /* ── 햄버거 단추 ──────────────────────────────────────────────────
     ★ 어제 44×44 로 키웠더니 «아이콘이 상자에 갇혀» 보였습니다.
       상자만 커지고 세 줄의 자리(top 7px · left 4px)는 그대로여서,
       선이 위아래로 몰리고 흰 여백이 크게 남았습니다.

     ■ 어떻게 고쳤나
       상자는 «보이는 크기» 그대로 34px 로 두고,
       모자란 만큼은 «투명한 여백» 으로 넓혀 손가락 자리를 44px 로 만듭니다.
       → 눈에는 작고 단정하게, 손가락에는 넉넉하게. */
  #header .mbtn{
    width:34px;
    height:34px;
    box-sizing:content-box;
    padding:5px;                  /* 34 + 5×2 = 44px — 손가락 자리 */
    background-clip:content-box;  /* ★ 흰 배경은 «상자 안쪽» 에만 */
    border:0;                     /* ★ 테두리는 바깥(46px)에 그려져 상자가
                                       둘로 보입니다. 흰 배경만으로 충분합니다 */
    /* ★ 2026-08-06 — 위로 조금 올렸습니다.
         재어 보니 단추 아래끝이 62px, 헤더 아래선이 61px 이라
         단추 상자가 «헤더 밑줄을 1px 가리고» 있었습니다.
         헤더 높이 61px 안에서 세로 가운데가 되도록 8px 로 둡니다.
           (61 − 44) ÷ 2 ≈ 8
         ※ rem 은 화면 크기에 따라 달라지므로 px 로 못박습니다. */
    top:8px;
    right:1.1rem;
  }

  /* 세 줄 — 34px 상자 한가운데로, 간격을 «고르게»
     ★ 좌표를 하나하나 적어 둡니다. 눈으로 맞추면 또 어긋납니다.
         단추 전체   0 ~ 44px
         흰 상자     5 ~ 39px  (위아래 여백 5px)
         위선       14 ~ 16    ← top:14px
         가운데     21 ~ 23    ← top:21px
         아래선     28 ~ 30    ← bottom:14px  (44 − 30 = 14)
       → 선 사이 간격 5px · 5px, 상자와의 여백 9px · 9px 로 고릅니다.
     ※ 처음엔 bottom 을 16px 로 잘못 잡아 3px·5px 로 어긋났습니다. */
  #header .mbtn::before{ top:14px;    left:10px; right:10px; }
  #header .mbtn::after { bottom:14px; left:10px; right:10px; }
  #header .mbtn span::before,
  #header .mbtn span::after{ top:21px; left:10px; right:10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 좁은 화면의 기준 글자 크기 (2026-08-04) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     처음에 「본문 16px 이상」 으로 정하셨는데 좁은 화면에서 13px 이었습니다.
     원본 테마가 화면이 좁아지면 «기준 크기» 를 10px → 8.125px 로 줄입니다.
     rem 으로 쓴 값이 전부 함께 줄어드니 본문도 따라 작아진 것입니다.

   ■ 어떻게 고쳤나
     기준 크기의 «최솟값» 만 올렸습니다. 8px → 9.4px.
     ★ 글자만이 아니라 여백 · 높이도 함께 커집니다. 그게 이 방식의 값입니다.
       화면이 통째로 시원해지는 대신, 한 줄에 들어가는 글자는 줄어듭니다.

   ■ 값을 바꾸시려면
     아래 9.4px 두 곳을 고치십시오.
       · 10px 로 하면 데스크톱과 «똑같은» 크기가 됩니다 (본문 16px)
       · 9px 로 하면 지금보다 조금 작아집니다
     고치신 뒤에는 «좁은 화면에서 가로로 넘치는 곳이 없는지» 꼭 보십시오.

   ■ 되돌리시려면
     이 덩어리를 지우면 원래대로 8px 로 돌아갑니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  html{ font-size:clamp(9.4px, 1.3020833vw, 10px); }
}
@media (max-width:480px){
  html{ font-size:clamp(9.4px, 2.0833333vw, 10px); }
}

/* ── 좁은 화면 — 목록 위 굵은 선이 «끝까지» 가도록 (2026-08-04) ──────────
   ■ 무엇이 어긋났나
     굵은 선을 <table> 의 위 테두리로 그리고 있습니다.
     좁은 화면에서는 목록 한 줄이 «카드» 모양으로 바뀌는데,
     칸 안의 글(NAME · HIT · DATA)이 길면 그 줄이 표보다 넓어집니다.
     테두리는 «표의 크기» 만큼만 그려지므로, 돋보기 아래가 비어 보입니다.
     (글 길이에 따라 달라져서 어떤 화면에서는 멀쩡해 보입니다)

   ■ 어떻게 고쳤나
     선을 «표를 감싼 상자» 에 옮겨 그립니다.
     그 상자는 늘 화면 폭을 지키므로 글 길이와 상관없이 끝까지 갑니다.
     ※ 넓은 화면은 건드리지 않았습니다. 거기서는 표가 곧 상자입니다. */
@media (max-width:768px){
  .sub_content #bo_list .tbl_head01,
  #bo_list .tbl_head01{
    border-top:2px solid var(--rule);
  }
  .sub_content #bo_list .tbl_head01 table,
  .sub_content #bo_list table,
  #bo_list table{
    border-top:0;                 /* 표에 그리던 선은 끕니다 — 두 줄이 되지 않게 */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 목록 아래 「글쓰기」 단추 · 공지 줄 (2026-08-04) ★★
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 「글쓰기」 — 검은 덩어리에서 «선 두른 글자» 로 ────────────────────
   ■ 왜 고쳤나
     이 사이트에서 «색으로 꽉 채운 덩어리» 는 여기 하나뿐이었습니다.
     자주 묻는 질문의 「찾기」, 제작 진행의 표시, 도서 정렬 —
     나머지는 모두 글자와 선으로 말합니다. 이것만 튀었습니다.

   ■ 어떻게
     테두리 한 줄 · 먹색 글자. 손이 닿으면 테라코타로 물듭니다.
     ★ 자간 0.1em 도 걷어냈습니다. 한글은 벌리면 낱자가 흩어집니다.
     ※ 「글쓰기」 화면의 «작성완료» 단추는 그대로 둡니다.
       거기서는 «지금 눌러야 할 것» 이 분명해야 합니다.

   ■ 되돌리시려면 이 덩어리를 지우십시오. */
.sub_content #bo_list .icon_btn_write,
#bo_list .icon_btn_write{
  height:4.6rem;
  padding:0 2.4rem 0 5.4rem;
  background:none;
  border:1px solid var(--body-color);
  color:var(--body-color);
  font-size:1.4rem;
  letter-spacing:-.02em;          /* 0.1em → 좁힙니다 */
  transition:color .2s, border-color .2s;
}
.sub_content #bo_list .icon_btn_write:hover,
#bo_list .icon_btn_write:hover{
  background:none;
  border-color:var(--point-color);
  color:var(--point-color);
}
/* 연필 그림 — 흰색 반전을 풀어 먹색으로 되돌립니다.
   ★ 2026-08-05 — 단추 여백을 다른 단추와 같게 맞추면서 그림이 글자에
     닿았습니다. 「글쓰기」 는 글자만으로도 뜻이 분명하니 그림을 뺍니다.
     (댓글등록의 화살표도 같은 까닭으로 걷어냈습니다) */
.sub_content #bo_list .icon_btn_write::after,
#bo_list .icon_btn_write::after,
.sub_content #bo_w .icon_btn_write::after,
#bo_w .icon_btn_write::after,
#bo_v .icon_btn_write::after{
  display:none;
}
.sub_content #bo_list .icon_btn_write:hover::after,
#bo_list .icon_btn_write:hover::after{ opacity:1; }

/* 좁은 화면 — 손가락 자리 44px 이상 */
@media (max-width:768px){
  .sub_content #bo_list .icon_btn_write,
  #bo_list .icon_btn_write{ height:4.8rem; min-height:44px; }
}

/* ── ② 공지 줄 아래 선 — 테라코타를 걷어냅니다 ──────────────────────────
   ■ 왜 고쳤나
     공지는 이미 왼쪽에 「공지」 라는 붉은 글자를 달고 있습니다.
     아래 선까지 포인트 색이면 같은 말을 두 번 하는 셈이고,
     목록에서 그 한 줄만 유난히 강해집니다.
     다른 줄과 같은 회색 선으로 두어도 «공지» 글자로 충분히 구별됩니다. */
.sub_content #bo_list tr.bo_notice td,
#bo_list tr.bo_notice td{
  border-bottom-color:var(--line-color);
}

/* ── 메인 「about us」 — 회사 이름을 앞줄에 (2026-08-04) ─────────────────
   「도서출판 끌림은 / 오래 붙드는 문장을 고릅니다」 두 줄로 읽히게 합니다.
   이름 줄은 한 단계 여리게 두어, 눈이 «무엇을 하는가» 에 머물게 합니다. */
#main_showroom .title h2 .kk-h2-name{
  display:block;
  margin-bottom:.4rem;
  font-size:.62em;
  font-weight:400;
  color:var(--muted-color);
  letter-spacing:-.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 도서 등록 화면 — 입력칸 폭을 하나로 (2026-08-05) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     재어 보니 칸마다 폭이 달랐습니다.
       도서명 · 지은이 · ISBN · 판형          720px
       발행일 · 쪽수 · 정가                   640px
       총서(고르는 칸 + 번호 칸)               542px + 90px
     규칙이 여러 겹 쌓여 서로 다른 값을 물고 있었습니다.
     칸마다 오른쪽 끝이 들쭉날쭉해 화면이 흐트러져 보입니다.

   ■ 어떻게 고쳤나
     «모든 칸을 100%» 로 못박습니다. 폭은 감싼 칸(#bo_w)이 정합니다.
     총서는 두 칸이 나란히 놓이므로 «둘을 합쳐» 같은 폭이 되게 합니다.

   ■ 폭을 바꾸시려면
     이 규칙이 아니라 위쪽 --kk-board-w (1000px) 를 고치십시오.
     그러면 화면 전체가 함께 움직입니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content #bo_w .wrow input[type="text"],
.sub_content #bo_w .wrow input[type="url"],
.sub_content #bo_w .wrow input[type="email"],
.sub_content #bo_w .wrow input[type="tel"],
.sub_content #bo_w .wrow input[type="number"],
.sub_content #bo_w .wrow input[type="date"],
.sub_content #bo_w .wrow input[type="password"],
.sub_content #bo_w .wrow select,
.sub_content #bo_w .wrow textarea,
.sub_content #bo_w .wrow .series-pair,
.sub_content #bo_w .frm_input,
.sub_content #bo_w select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
/* 안내 문구와 안내 상자도 같은 폭으로
   ★ 이것만 640px 로 남아 있어 입력칸보다 좁았습니다.
     칸 아래 붙는 설명이 칸보다 좁으면 오른쪽 끝이 어긋나 보입니다. */
.sub_content #bo_w .wrow .whelp,
.sub_content #bo_w .wform .wnote,
.sub_content #bo_w .wnote{
  max-width:100%;
  box-sizing:border-box;
}

/* 총서 — 「고르는 칸 + 번호 칸」 이 합쳐서 한 칸 폭 */
.sub_content #bo_w .wrow-series .series-pair{
  max-width:100%;
}
.sub_content #bo_w .wrow-series .series-pair select,
.sub_content #bo_w .wrow-series .series-pair input{
  max-width:none;               /* 짝 안에서는 제한을 풉니다 */
}

/* ── 등록 화면 — 안내 문구·안내 상자도 같은 폭으로 (2026-08-05) ──────────
   ★ 입력칸은 720px 인데 안내 문구(.whelp)와 안내 상자(.wnote)만
     640px 로 남아, 회색 상자의 오른쪽 끝이 들쭉날쭉했습니다.
     옛 640px 제한(--kk-form-w)을 물고 있던 자리입니다.
   ★ 「본문」 위 안내처럼 상자 모양인 것은 어긋남이 특히 눈에 띕니다. */
.sub_content #bo_w .wrow .whelp,
.sub_content #bo_w .whelp,
.sub_content #bo_w .wform .wnote,
.sub_content #bo_w .wnote{
  max-width:100%;
  box-sizing:border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 모바일 메뉴 — 길어지면 «안에서» 움직이도록 (2026-08-05) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     작가의 방을 펼치면 메뉴 전체 높이가 1688px 이 되는데
     화면은 844px 뿐입니다. 그런데 서랍(.gnb_container)이 «화면에 붙박이»
     (position:fixed)로 놓이고 넘침 처리가 없어,
     아래쪽 「소식」 「문의」 가 화면 밖으로 밀려 볼 수가 없었습니다.

   ■ 어떻게 고쳤나
     서랍의 높이를 화면만큼으로 묶고, 넘치는 부분은 «서랍 안에서» 굴립니다.
     · 100dvh — 주소창이 나타났다 사라지는 것까지 헤아린 «실제» 화면 높이입니다.
       (옛 브라우저를 위해 100vh 를 먼저 적어 둡니다)
     · overscroll-behavior:contain — 메뉴 끝까지 내려도 뒤 화면이 따라 움직이지
       않게 막습니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  #header .gnb_container{
    /* ★ 원본은 높이를 «200vh»(화면 두 배)로 잡고 있었습니다.
         게다가 vh 는 아이폰에서 «주소창까지 포함한» 높이라
         실제 보이는 영역보다 큽니다.
         그래서 「스크롤할 것이 없다」고 판단해 손가락에 반응하지 않았고,
         아래쪽 메뉴는 화면 밖에 그대로 머물렀습니다.

       ■ 어떻게 고쳤나
         vh · dvh 같은 «계산값» 을 쓰지 않습니다.
         위(top:0)와 아래(bottom:0)를 «화면에 붙박아» 두면
         높이는 브라우저가 보이는 만큼 정확히 잡아 줍니다.
         주소창이 나타났다 사라져도 저절로 따라옵니다. */
    top:0;
    bottom:0;
    height:auto !important;
    max-height:none !important;

    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    /* 배경은 «굴러가지 않는» 이 상자에 둡니다.
       안쪽 nav 에 두면 메뉴와 함께 위로 올라가 아래로 뒤 화면이 비칩니다. */
    background:#fff !important;
  }
  /* 안쪽 nav — 내용만큼 늘어나되, 짧을 때도 «화면을 가득 채우게» 합니다.
     ★ min-height 를 0 으로 두었더니 메뉴를 굴렸을 때 흰 배경이 따라 올라가고
       아래로 뒤 화면(게시판 목록)이 비쳤습니다. */
  /* ★ 안쪽 nav — 여기가 진짜 걸림돌이었습니다.
       원본이 「height:100vh」 로 묶어 두어, 메뉴가 길어져도 이 상자는
       화면 높이 그대로였습니다. 넘치는 부분은 상자 «밖» 으로 흘러
       서랍은 「굴릴 것이 없다」고 판단했습니다. (넘침 0px)
       내용만큼 늘어나게 풀어 줍니다. */
  #header .gnb{
    height:auto !important;
    min-height:100% !important;
    box-sizing:border-box;
    background:none;              /* 배경은 위 .gnb_container 가 맡습니다 */
  }
  /* 안쪽 목록도 제 높이를 갖도록 — flex 안에서 눌리지 않게 */
  #header .gnb > ul{
    flex:0 0 auto;
    height:auto;
  }
  /* 맨 아래 항목이 화면 끝에 딱 붙지 않도록 숨 쉴 자리 */
  #header .gnb > ul{ padding-bottom:4rem; }
}

/* ── 게시판 본문 안의 소제목 (2026-08-05) ────────────────────────────────
   ★ 글이 길어지면 「어디서 이야기가 바뀌는지」 가 보여야 합니다.
     굵기만으로는 본문에 묻힙니다. 크기를 한 단계 올리고,
     «위 여백» 을 넉넉히 두어 앞 이야기와 끊어 줍니다.

   ■ 쓰시는 법 — 글쓰기에서 「html」 을 켜고 이렇게 적으십시오.
       <h3>어디로 보내나</h3>
     선이나 상자는 쓰지 않습니다. 여백과 크기만으로 나눕니다. */
#bo_v_con h3,
.sub_content #bo_v_con h3,
.news-body h3{
  margin:clamp(3.2rem,4vw,4rem) 0 1.2rem;
  font-size:1.8rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.03em;
  color:var(--body-color);
}
/* 맨 처음에 오는 소제목은 위 여백을 줄입니다 */
#bo_v_con h3:first-child,
.news-body h3:first-child{ margin-top:0; }

/* 소제목 바로 다음 문단은 바짝 붙입니다 */
#bo_v_con h3 + p,
.news-body h3 + p{ margin-top:0; }

@media (max-width:768px){
  #bo_v_con h3,
  .sub_content #bo_v_con h3,
  .news-body h3{ font-size:17px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 첨부 파일 — 보는 화면 · 고치는 화면 (2026-08-05) ★★
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 보는 화면 — 파일 그림과 글자를 «위아래 가운데» 로 ────────────────
   원본은 그림과 글자가 그냥 나란히 놓여, 그림이 위로 뜨고 글자가
   아래로 처져 보였습니다. 한 줄로 가지런히 맞춥니다. */
#bo_v_file a,
.sub_content #bo_v_file a{
  display:flex;
  align-items:center;           /* ★ 위아래 가운데 */
  gap:1rem;
  flex-wrap:wrap;
  padding:1rem 1.2rem;
}
#bo_v_file a svg,
#bo_v_file a i{
  flex:0 0 auto;
  width:1.8rem;
  height:1.8rem;
  opacity:.55;
}
#bo_v_file a strong{ font-weight:500; }
/* 「0회 다운로드 | DATE …」 는 곁들이는 말이라 한 걸음 물러섭니다 */
#bo_v_file .bo_v_file_cnt{
  font-size:1.2rem;
  color:var(--muted-color);
}

/* ── ② 고치는 화면 — 「파일 삭제」 가 아래로 밀리지 않게 ────────────────
   ■ 무엇이 어긋났나
     「파일 선택」 칸과 「○○.pdf 파일 삭제」 가 각각 제 줄을 차지해
     이름이 아래로 뚝 떨어졌습니다. 어느 칸에 딸린 파일인지 헷갈립니다.

   ■ 어떻게 고쳤나
     한 줄에 나란히 둡니다. 왼쪽에 고르는 칸, 오른쪽에 지금 붙어 있는 파일.
     좁은 화면에서는 저절로 아래로 접힙니다. */
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem 1.6rem;
}
.sub_content #bo_w .bo_w_flie .file_wr,
#bo_w .bo_w_flie .file_wr{
  flex:1 1 22rem;
  min-width:0;
}
.sub_content #bo_w .bo_w_flie .file_del,
#bo_w .bo_w_flie .file_del{
  /* ★ 0 0 auto 로 잠가 두었더니 이름이 길 때 칸 밖으로 넘쳤습니다.
       줄어들 수 있게 열어 둡니다. 넘치는 이름은 아래 규칙이 «…» 로 줄입니다. */
  flex:0 1 auto;
  box-sizing:border-box;
  padding-right:.2rem;          /* 오른쪽 테두리에 딱 붙지 않게 */
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  min-width:0;
  font-size:1.3rem;
  color:var(--muted-color);
  white-space:nowrap;
}
.sub_content #bo_w .bo_w_flie .file_del label,
#bo_w .bo_w_flie .file_del label{ cursor:pointer; margin:0; }

/* ── 첨부 파일칸 — 안쪽 여백을 다른 칸과 같게 (2026-08-05) ────────────────
   ■ 무엇이 어긋났나
     칸의 «폭» 은 다른 입력칸과 같았는데(244~1196) «안쪽 여백» 이 0 이었습니다.
     제목·링크 칸은 좌우 14px 씩 안쪽으로 들어가 있는데 파일칸만 0 이라,
     「파일 선택」 이 왼쪽 테두리에 붙고 파일 이름의 끝 글자가
     오른쪽 테두리에 물려 잘려 보였습니다.

   ■ 어떻게 고쳤나
     칸 자체에 좌우 14px 을 주어 다른 칸과 같은 자리에서 시작하게 합니다.
     ★ box-sizing:border-box — 여백을 넣어도 칸의 «바깥 폭» 은 그대로입니다. */
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie{
  box-sizing:border-box;
  padding:.6rem 1.4rem;
}
/* 안쪽 요소는 여백을 다시 주지 않습니다. 부모가 이미 맡았습니다. */
.sub_content #bo_w .bo_w_flie .frm_file,
#bo_w .bo_w_flie .frm_file{
  padding-left:0;
}
/* 파일 이름이 길면 «줄여서» 보여 줍니다. 밖으로 밀려 나가지 않게. */
.sub_content #bo_w .bo_w_flie .file_del,
#bo_w .bo_w_flie .file_del{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sub_content #bo_w .bo_w_flie .file_del label,
#bo_w .bo_w_flie .file_del label{
  /* ★ label 은 본디 «줄 안에 흐르는» 요소라 overflow 가 듣지 않습니다.
       블록으로 바꿔야 넘치는 글자를 «…» 로 줄일 수 있습니다. */
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── 첨부 파일칸 — 상자를 «칸 전체» 로 (2026-08-05) ──────────────────────
   ■ 무엇이 어긋났나
     눈에 보이는 흰 상자를 «파일 고르기 입력칸» 이 그리고 있었습니다.
     그 입력칸은 바깥 칸 안쪽에 놓이므로 상자가 258~1166 으로 좁아졌고,
     링크 칸(244~1196)보다 안으로 들어가 보였습니다.

   ■ 어떻게 고쳤나
     상자를 «바깥 칸(.bo_w_flie)» 이 그리게 합니다. 그러면 링크 칸과
     좌우 끝이 정확히 같아집니다.
     안쪽 입력칸은 테두리와 배경을 지워, 상자 안에 얹힌 모양이 됩니다. */
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie{
  border:1px solid var(--kk-fld-line, #e7e5e1);
  background:var(--kk-fld-bg, #f2f0ed);
  padding:.8rem 1.4rem;
}
/* 안쪽 「파일 선택」 칸 — 상자를 두 겹으로 그리지 않습니다 */
.sub_content #bo_w .bo_w_flie .frm_file,
#bo_w .bo_w_flie .frm_file,
.sub_content #bo_w .bo_w_flie input[type="file"],
#bo_w .bo_w_flie input[type="file"]{
  border:0 !important;
  background:none !important;
  padding:0 !important;
  height:auto;
  min-height:0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 단추 모양 통일 (2026-08-05) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나  재어 보니 네 가지가 섞여 있었습니다.
       작성완료    검정 채움 · 흰 글자 · 129×48 · 16px
       글쓰기      선 두름 · 먹색 · 121×46 · 14px
       댓글등록    선 두름 · 먹색 · 187×52 · 13px
       취소        아무것도 없음 · 49×48 · 14px
     화면을 옮길 때마다 단추가 달라 보였습니다.

   ■ 어떻게 맞췄나  두 급으로 나눕니다.
       ① «하는 단추» — 선 한 줄 두른 먹색 글자. 높이 48px, 글자 14px.
          작성완료 · 글쓰기 · 댓글등록 · 답변
          손이 닿으면 테두리와 글자가 테라코타로 물듭니다.
       ② «물러서는 단추» — 글자만. 취소처럼 되돌아가는 것.

     ★ 채움(검정 바탕)을 쓰지 않습니다. 이 사이트는 선과 여백으로 말합니다.
       그래서 「작성완료」가 전보다 덜 도드라집니다. 그것이 이 결의 값입니다.

   ■ 크기를 바꾸시려면 아래 48px · 14px 두 값을 고치십시오.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 하는 단추 ─────────────────────────────────────────────────────── */
.sub_content #bo_w .icon_btn_write,
#bo_w .icon_btn_write,
.sub_content #bo_list .icon_btn_write,
#bo_list .icon_btn_write,
.sub_content #bo_vc_w .btn_submit,
#bo_vc_w .btn_submit,
.sub_content #bo_vc_w .icon_btn,
#bo_vc_w .icon_btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:12rem;
  height:48px;
  padding:0 2.4rem;
  box-sizing:border-box;

  background:none !important;
  /* ★ 2026-08-05 — 먹색 테두리가 너무 도드라져 화면에서 튀었습니다.
       한 단계 여린 회색으로 낮춥니다. 손이 닿을 때만 또렷해집니다. */
  border:1px solid var(--line-color) !important;
  border-radius:0;

  /* ★ 「작성완료」 가 16px 로 남아 다른 단추보다 컸습니다. 못박습니다. */
  font-size:14px !important;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--body-color) !important;

  transition:color .2s, border-color .2s;
}
.sub_content #bo_w .icon_btn_write:hover,
#bo_w .icon_btn_write:hover,
.sub_content #bo_list .icon_btn_write:hover,
#bo_list .icon_btn_write:hover,
#bo_v .icon_btn_write:hover,
#bo_vc_w .btn_submit:hover,
#bo_vc_w .icon_btn:hover{
  background:none !important;
  border-color:var(--point-color) !important;
  color:var(--point-color) !important;
}

/* ── ② 물러서는 단추 — 글자만 ────────────────────────────────────────── */
.sub_content #bo_w .icon_btn_cancel,
#bo_w .icon_btn_cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 1.6rem;
  background:none;
  border:0;
  font-size:14px;
  letter-spacing:-.02em;
  color:var(--muted-color);
  transition:color .2s;
}
.sub_content #bo_w .icon_btn_cancel:hover,
#bo_w .icon_btn_cancel:hover{ color:var(--body-color); }

/* ★ 「댓글등록」 단추의 화살표 장식을 걷어냅니다.
     원본은 오른쪽에 88px 을 비워 화살표를 놓았는데, 여백을 다른 단추와
     같게 맞추자 화살표가 글자 위로 겹쳤습니다.
     장식 화살표는 이 사이트의 결에도 맞지 않습니다. 글자만 둡니다. */
.sub_content #bo_vc_w .icon_btn::after,
#bo_vc_w .icon_btn::after{ display:none; }

@media (max-width:768px){
  .sub_content #bo_w .icon_btn_write,
  #bo_w .icon_btn_write,
  #bo_list .icon_btn_write,
  #bo_vc_w .btn_submit,
  #bo_vc_w .icon_btn,
  .sub_content #bo_w .icon_btn_cancel,
  #bo_w .icon_btn_cancel{ height:48px; min-height:44px; }
}

/* ── 「끌림에 대하여」 의 걸어온 길 표 (2026-08-05) ───────────────────────
   ★ 연도와 내용 두 칸뿐입니다. 표 테두리를 두르지 않고
     가는 가로선으로만 나눕니다. 사이트의 다른 자리와 같은 결입니다. */
.kk-doc .kk-history{ margin:0; }
.kk-doc .kk-history th{
  font-weight:500;
  color:var(--muted-color);
  text-align:left;
  white-space:nowrap;
  vertical-align:top;
}
.kk-doc .kk-history td{ color:var(--body-color); }

@media (max-width:600px){
  /* 좁은 화면에서는 연도 칸을 줄여 내용이 눌리지 않게 합니다 */
  .kk-doc .kk-history col:first-child{ width:10rem; }
  .kk-doc .kk-history th,
  .kk-doc .kk-history td{ font-size:14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 챙기실 것 — 대표님께만 보이는 알림 (2026-08-05) ★★
   --------------------------------------------------------------------------
   제작 진행 화면 맨 위에 놓입니다. 손님에게는 나오지 않습니다.
   ★ 상자나 색 배경을 쓰지 않습니다. 위아래 선과 여백으로만 나눕니다.
     급한 것만 왼쪽에 가는 테라코타 선을 세워 눈에 걸리게 합니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-todo{
  margin:0 0 clamp(4rem,5vw,5.6rem);
  padding:clamp(2.4rem,3vw,3.2rem) 0;
  border-top:2px solid var(--rule, #202020);
  border-bottom:1px solid var(--line-color);
}
.kk-todo-h{
  margin:0 0 2rem;
  font-size:1.6rem;
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--body-color);
}
.kk-todo-g{ margin:0 0 2rem; }
.kk-todo-g:last-child{ margin-bottom:0; }

/* 갈래 이름 — 「답이 늦었습니다」 같은 */
.kk-todo-gt{
  margin:0 0 .8rem;
  font-size:1.3rem;
  font-weight:500;
  color:var(--muted-color);
}
.kk-todo ul{ margin:0; padding:0; list-style:none; }
.kk-todo li{
  position:relative;
  padding:.6rem 0 .6rem 1.6rem;
  font-size:var(--fs-body-sm);
  line-height:1.6;
}
/* 왼쪽 표시 — 급한 것만 테라코타 */
.kk-todo li::before{
  content:'';
  position:absolute;
  left:0; top:1.4rem;
  width:.5rem; height:.5rem;
  border-radius:50%;
  background:var(--line-color);
}
.kk-todo li.is-late::before{ background:var(--point-color); }

.kk-todo li a{ color:var(--body-color); }
.kk-todo li a:hover{ color:var(--point-color); text-decoration:underline; }
.kk-todo li.is-late a{ font-weight:500; }

/* 곁들이는 말 — 「4주 약속을 넘겼습니다」 */
.kk-todo-n{
  margin-left:.8rem;
  font-size:1.2rem;
  color:var(--muted-color);
}

@media (max-width:600px){
  .kk-todo-n{ display:block; margin-left:0; margin-top:.2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 일정 달력 (2026-08-05) ★★
   --------------------------------------------------------------------------
   스킨: /theme/kkeullim_theme/skin/board/kk_schedule/
   ★ 대표님만 보는 화면입니다. 손님에게는 메뉴도 나오지 않습니다.
   ★ 상자와 색 배경을 아끼고 «선» 으로 칸을 나눕니다.
     다만 달력은 칸이 나뉘어야 읽히므로 격자만은 선을 씁니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-cal-wrap{ max-width:var(--kk-board-w); margin-left:auto; margin-right:auto; }

/* ── 머리줄 ─────────────────────────────────────────────────────────────── */
.kk-cal-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.6rem;
  /* ★ 2026-08-06 — 아래 가로선을 걷어냈습니다.
       바로 밑에 요일 줄이 또 선을 긋고 있어 가는 줄이 둘로 겹쳤습니다. */
  margin:0 0 1.6rem;
}
.kk-cal-move{ display:flex; align-items:center; gap:1.2rem; }
.kk-cal-ym{ font-size:2rem; font-weight:600; letter-spacing:-.03em; }
.kk-cal-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:3.2rem; height:3.2rem; font-size:2rem; line-height:1;
  color:var(--muted-color);
}
.kk-cal-arrow:hover{ color:var(--point-color); }
.kk-cal-today{
  margin-left:.4rem; padding:.4rem 1rem;
  font-size:1.3rem; color:var(--muted-color);
  border:1px solid var(--line-color);
}
.kk-cal-today:hover{ color:var(--point-color); border-color:var(--point-color); }

.kk-cal-mode{ display:flex; gap:1.6rem; }
.kk-cal-mode a{ font-size:1.4rem; color:var(--muted-color); }
.kk-cal-mode a.on{ color:var(--body-color); font-weight:600; }

/* ── 달력 격자 ──────────────────────────────────────────────────────────── */
.kk-cal{ width:100%; table-layout:fixed; border-collapse:collapse; }
.kk-cal th{
  padding:.8rem 0; font-size:1.3rem; font-weight:400;
  color:var(--muted-color); border-bottom:1px solid var(--line-color);
}
.kk-cal th.w0, .kk-cal td.w0 .kk-cal-day{ color:var(--point-color); }
/* ★ 2026-08-06 — 달력의 «바깥 테두리» 를 살립니다.
     안쪽 칸만 선이 있고 좌우 끝이 트여 있어 격자가 흘러내려 보였습니다.
     달력은 «칸» 이 보여야 읽히므로 여기만은 상자를 두릅니다. */
.kk-cal{ border-left:1px solid var(--line-color); }
.kk-cal th{ border-top:1px solid var(--line-color); }
.kk-cal th:last-child,
.kk-cal td:last-child{ border-right:1px solid var(--line-color); }

.kk-cal td{
  height:11rem; padding:.6rem; vertical-align:top;
  border-bottom:1px solid var(--line-color);
  border-right:1px solid var(--line-color);
}
.kk-cal td.is-empty{ background:none; }
.kk-cal td.is-today{ background:var(--kk-fld-bg, #f2f0ed); }

.kk-cal-day{
  display:inline-block; min-width:2.2rem;
  font-size:1.3rem; color:var(--body-color);
}
.kk-cal-day:hover{ color:var(--point-color); }
.kk-cal td.is-today .kk-cal-day{ font-weight:600; }

/* 칸 안의 일정 */
.kk-cal-ev{ margin:.4rem 0 0; padding:0; list-style:none; }
.kk-cal-ev li{ margin:0 0 .3rem; }
/* ★ 2026-08-06 — 앞의 세로 막대를 «글자 높이만큼» 으로 줄였습니다.
     테두리(border-left)로 그리면 칸 전체 높이만큼 늘어나
     위아래로 삐져나와 보였습니다.
     ::before 로 따로 그려 글자 높이에 맞춥니다. */
.kk-cal-ev a{
  position:relative;
  display:block; padding:.2rem .4rem .2rem .9rem;
  font-size:1.2rem; line-height:1.4;
  color:var(--body-color);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kk-cal-ev a::before{
  content:'';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:2px;
  height:1.2rem;                /* 글자 크기만큼 */
  background:var(--point-color);
}
.kk-cal-ev a:hover{ background:var(--kk-fld-bg, #f2f0ed); }
.kk-cal-ev a i{ font-style:normal; margin-right:.4rem; color:var(--muted-color); }
/* 제작 진행에서 «저절로» 온 일정 — 한 걸음 물러섭니다 */
.kk-cal-ev .k-auto a{ color:var(--muted-color); }
.kk-cal-ev .k-auto a::before{ background:var(--line-color); }

/* ── 목록 모양 ──────────────────────────────────────────────────────────── */
.kk-cal-list{ margin:0; padding:0; list-style:none; }
.kk-cal-list > li{
  display:flex; gap:2.4rem;
  align-items:flex-start;       /* ★ 위를 기준으로 */
  padding:1.6rem 0; border-bottom:1px solid var(--line-color);
}
.kk-cal-list > li.is-none{
  display:block; padding:6rem 0; text-align:center;
  color:var(--muted-color); border-bottom:0;
}
/* ★ 2026-08-06 — 날짜와 내용을 «위를 기준으로» 맞춥니다.
     날짜 숫자(20px)와 내용 글자(14px)는 크기가 달라, 그냥 두면
     첫 줄이 6px 어긋나 보였습니다.
     숫자의 줄 높이를 내용의 첫 줄과 같게 맞춰 윗선을 나란히 합니다. */
.kk-cal-ld{
  flex:0 0 5rem;
  /* ★ margin:0 만으로는 아래 여백 24px 이 남았습니다.
       전역 문단 규칙이 더 세서 이깁니다. 넉넉히 짚어 줍니다. */
  margin:0 !important;
  text-align:center;
}
.kk-cal-ld b{
  display:block;
  font-size:2rem; font-weight:600;
  line-height:2.24rem;          /* 내용 첫 줄과 같은 높이 (14px × 1.6) */
}
.kk-cal-ld span{ font-size:1.2rem; color:var(--muted-color); }
.kk-cal-ld.is-today b, .kk-cal-ld.is-today span{ color:var(--point-color); }
.kk-cal-list ul{ flex:1 1 auto; margin:0; padding:0; list-style:none; min-width:0; }
.kk-cal-list ul li{ padding:0 0 .6rem; font-size:var(--fs-body-sm); line-height:1.6; }
.kk-cal-list ul li:last-child{ padding-bottom:0; }
.kk-cal-list ul a{ color:var(--body-color); }
.kk-cal-list ul a:hover{ color:var(--point-color); }
.kk-cal-list ul a i{ font-style:normal; margin-right:.8rem; color:var(--muted-color); }
.kk-cal-list .k-auto a{ color:var(--muted-color); }
.kk-cal-pl{ margin-left:.8rem; font-size:1.2rem; color:var(--muted-color); }

/* ── 아래 안내 ──────────────────────────────────────────────────────────── */
.kk-cal-foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.6rem; margin-top:2.4rem;
}
/* ★ 「일정 넣기」 — 다른 화면의 단추와 같은 모양으로.
     이 자리는 #bo_list 안이 아니라서 앞서 만든 통일 규칙이 닿지 않았습니다.
     (선 두른 먹색 글자 · 높이 48px · 글자 14px) */
.kk-cal-foot .icon_btn_write,
.sub_content .kk-cal-foot .icon_btn_write{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:12rem; height:48px; padding:0 2.4rem; box-sizing:border-box;
  background:none !important;
  border:1px solid var(--line-color) !important;
  border-radius:0;
  font-size:14px !important; font-weight:500; letter-spacing:-.02em;
  color:var(--body-color) !important;
  transition:color .2s, border-color .2s;
}
.kk-cal-foot .icon_btn_write:hover{
  background:none !important;
  border-color:var(--point-color) !important;
  color:var(--point-color) !important;
}
/* 연필 그림은 걷어냅니다 — 다른 단추와 같게 */
.kk-cal-foot .icon_btn_write::after{ display:none; }
.kk-cal-note{ margin:0; font-size:1.2rem; color:var(--muted-color); line-height:1.7; }
.kk-cal-auto-note{ display:block; }

/* ── 일정 넣는 화면 ─────────────────────────────────────────────────────── */
.kk-allday{ margin:0 0 1.2rem; display:flex; align-items:center; gap:.6rem; }
.kk-allday label{ margin:0; cursor:pointer; font-size:var(--fs-body-sm); }
.kk-when{ display:flex; align-items:center; gap:.8rem; margin:0 0 .8rem; }
.kk-when-l{ flex:0 0 3.2rem; font-size:1.3rem; color:var(--muted-color); }
.kk-when input[type="date"]{ flex:1 1 16rem; min-width:0; }
.kk-when input[type="time"]{ flex:0 0 12rem; }
#bo_w.is-allday .kk-when input[type="time"]{ opacity:.35; }

@media (max-width:768px){
  /* 좁은 화면 — 달력은 칸이 눌리므로 목록이 낫습니다.
     다만 억지로 바꾸지는 않고, 글자와 칸 높이만 줄입니다. */
  .kk-cal td{ height:8rem; padding:.4rem .3rem; }
  .kk-cal-ev a{ font-size:1.1rem; padding:.1rem .2rem; }
  .kk-cal-ym{ font-size:1.7rem; }
  .kk-when{ flex-wrap:wrap; }
  .kk-when input[type="time"]{ flex:1 1 10rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 제작 진행 — 넣기·고치기 화면 (2026-08-06) ★★
   --------------------------------------------------------------------------
   ■ 왜 따로 짚나
     이 화면만 «#bo_w» 가 아니라 «fieldset.wform» 으로 짜여 있습니다.
     그래서 지금까지 만든 「입력칸 폭 통일」 · 「단추 통일」 규칙이
     닿지 않았습니다. 칸마다 폭이 다르고 단추도 혼자 다른 모양이었습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 입력칸 폭을 하나로 ─────────────────────────────────────────────── */
.sub_content .wform .wrow input[type="text"],
.sub_content .wform .wrow input[type="date"],
.sub_content .wform .wrow input[type="number"],
.sub_content .wform .wrow input[type="url"],
.sub_content .wform .wrow select,
.sub_content .wform .wrow textarea,
.sub_content .wform .wrow .frm_input,
.wform .wrow input[type="text"],
.wform .wrow input[type="date"],
.wform .wrow select,
.wform .wrow textarea,
.wform .wrow .frm_input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
/* 안내 문구·안내 상자도 같은 폭으로 */
.sub_content .wform .wrow .whelp,
.sub_content .wform .wnote,
.wform .wrow .whelp,
.wform .wnote{
  max-width:100%;
  box-sizing:border-box;
}

/* ── ② 맨 아래 단추 — 다른 화면과 같게 ────────────────────────────────
   「저장」은 선 두른 먹색 글자, 「목록으로」는 글자만.
   다른 화면의 「작성완료 / 취소」와 같은 짝입니다. */
.sub_content .wform + .admin-bar .btn_submit,
.admin-bar .btn_submit,
.sub_content .admin-bar .btn_submit{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:12rem;
  /* ★ 다른 규칙이 min-height 를 물고 있어 52px 이 되었습니다. 못박습니다. */
  height:48px !important;
  min-height:48px !important;
  line-height:1;
  padding:0 2.4rem; box-sizing:border-box;
  border-radius:0;
  font-size:14px !important; font-weight:500; letter-spacing:-.02em;
  cursor:pointer;
  transition:background .2s, color .2s;
  /* ★ 2026-08-08 — 여기 있던 «색» 지정을 걷어냈습니다.
       background:none · border · color 를 !important 로 물고 있어서,
       아래쪽 「단추 색 통일」 규칙을 이기고 있었습니다.
       크기와 높이는 그대로 두고 «색만» 넘깁니다. */
}
/* 「목록으로」 — 물러서는 단추라 글자만 */
.admin-bar.is-center .btn-txt,
.sub_content .admin-bar.is-center .btn-txt{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 1.6rem;
  font-size:14px; letter-spacing:-.02em;
  color:var(--muted-color);
}
.admin-bar.is-center .btn-txt:hover{ color:var(--body-color); }
/* 두 단추를 가운데로 나란히 */
.admin-bar.is-center{
  display:flex; align-items:center; justify-content:center;
  gap:1.2rem;
  margin-top:clamp(3.2rem,4vw,4.8rem);
}

@media (max-width:768px){
  .admin-bar.is-center .btn_submit,
  .admin-bar.is-center .btn-txt{ height:48px; min-height:44px; }
}

/* ── 메인 표지 슬라이드 — 그림자를 걷어냅니다 (2026-08-06) ────────────────
   ■ 무엇이 보였나
     표지 좌우에 «희미한 세로선과 음영» 이 남아 있었습니다.
     표지 그림에 그림자(box-shadow)가 걸려 있어,
     그림 가장자리를 따라 회색 띠가 그려진 것이었습니다.
     표지 파일에 흰 여백이 있는 책은 그 여백 경계에 선처럼 보입니다.

   ■ 왜 걷어내나
     처음에 「과도한 그림자를 쓰지 않는다」고 정하셨습니다.
     책을 띄우려던 뜻은 알겠으나, 표지마다 다르게 보여 되레 지저분합니다.
     그림자 없이 표지 자체로 서게 둡니다. */
#main_showroom .con .main_showroom_slide img,
#main_showroom .con .slide_wrap:hover img{
  box-shadow:none !important;
}
/* 손이 닿았을 때의 «떠오름» 은 남깁니다 — 그림자 없이 움직임만 */
#main_showroom .con .slide_wrap:hover img{
  transform:translateY(-.6rem);
}

/* ── 메인 표지 — 좁은 화면에서 «세로» 를 기준으로 (2026-08-06) ────────────
   ■ 무엇이 어긋났나
     표지는 «높이를 맞추고 가로는 비율대로» 놓이도록 짜여 있습니다.
     그런데 좁은 화면에서 슬라이드 칸이 화면의 72% 뿐이라,
     세로를 채우기 전에 «가로가 먼저» 꽉 찼습니다.
     그래서 가로가 고정되고 세로가 책마다 달라졌습니다.

   ■ 어떻게 고쳤나
     칸을 넓히고(90%) 높이를 조금 낮춰(52vh) 가로에 여유를 둡니다.
     그러면 «높이» 가 먼저 걸려 표지들의 세로가 나란해집니다.
     ※ 표지가 작아 보이시면 52vh 를 56vh 쯤으로 올리십시오.
       다만 너무 올리면 다시 가로에 걸립니다. */
@media (max-width:768px){
  #main_showroom .con_wrap .con{ width:90%; }
  #main_showroom .con .slide_wrap{
    height:52vh;
    max-height:52vh;
  }
}

/* ── 메인 표지 — 그림이 세로로 늘어나던 것 (2026-08-06) ────────────────────
   ■ 무엇이 어긋났나
     화면에 값을 찍어 재어 보니, 표지 «다섯 장이 모두» 295×524 로
     똑같이 그려지고 있었습니다. 그런데 원본 비율은 제각각입니다.
         410×600(0.68) · 400×600(0.67) · 371×600(0.62)
     즉 그림 상자는 같은데 그 «안에서» 비율대로 줄어들다 보니
     표지의 실제 크기가 책마다 달라 보였습니다.

   ■ 왜 그랬나
     그림에 「가로는 비율대로(width:auto)」 를 주었는데,
     다른 규칙이 «가로 100%» 를 물려 그 뜻이 지워졌습니다.

   ■ 어떻게 고쳤나
     가로를 «내용에 맡기고», 높이만 맞춥니다.
     그러면 세로가 나란해지고 가로가 책마다 달라집니다. 본디 뜻대로입니다. */
#main_showroom .con .main_showroom_slide img,
#main_showroom .main_showroom_slide img{
  width:auto !important;
  max-width:100%;
  height:100% !important;
  object-fit:contain;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 메뉴가 열리면 헤더의 «흐림» 을 끕니다 (2026-08-06) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 문제였나
     메인에서 «섹션1 은 메뉴가 열리는데 섹션2 부터는 아이콘만 X 로 바뀌고
     메뉴가 나오지 않았습니다».

     화면을 내리면 헤더가 줄면서 «.scr» 이 붙고, 그때 헤더에
     backdrop-filter(뒤 배경 흐림)가 걸립니다.
     그런데 이 흐림 효과에는 잘 알려지지 않은 성질이 하나 있습니다.
     «그 안의 붙박이(fixed) 요소를 자기 안에 가둡니다».

     그래서 화면 전체를 덮어야 할 메뉴 서랍이
     헤더 높이(53px)로 쪼그라들었습니다. 열리기는 열렸는데 안 보인 것입니다.
       재어 본 값 —  섹션1 서랍 높이 766px  /  섹션3 서랍 높이 52.6px

   ■ 어떻게 고쳤나
     메뉴가 열린 «동안만» 흐림을 끕니다. (custom.js 가 menu-open 을 붙입니다)
     메뉴가 열리면 어차피 서랍이 화면을 덮으므로 흐림은 보이지 않습니다.
     닫으면 다시 흐려집니다.
   ══════════════════════════════════════════════════════════════════════════ */
#header.menu-open,
#header.scr.menu-open{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* ── 소식 분류 줄 — 한 줄로 (2026-08-06) ──────────────────────────────────
   ■ 무엇이 어긋났나
     좁은 화면에서 「전체 / 언론보도 / 서평」이 위아래로 흩어졌습니다.
     줄바꿈이 허용되어 있어(flex-wrap:wrap) 칸이 모자라면 아래로 접힙니다.

   ■ 어떻게 고쳤나
     접지 않고 «한 줄» 로 둡니다. 분류가 늘어 폭을 넘으면
     손가락으로 옆으로 밀어 볼 수 있게 합니다.
     ※ 도서 목록의 분류 줄과 같은 결입니다. */
nav.frow[aria-label="분류"]{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:.4rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;             /* 밀대는 감춥니다 */
}
nav.frow[aria-label="분류"]::-webkit-scrollbar{ display:none; }
nav.frow[aria-label="분류"] .ftab{
  flex:0 0 auto;                    /* 눌려서 두 줄이 되지 않게 */
  white-space:nowrap;
}

/* ── 분류 줄 — 밑줄을 «글자 폭에» 맞춥니다 (2026-08-06) ────────────────────
   ■ 무엇이 어긋났나
     고른 분류의 밑줄이 글자보다 넓게 그어졌습니다.
       390px  글자 25.5px  /  밑줄 48.1px   (22.5px 넓음)
       1440px 글자 29.1px  /  밑줄 61.1px   (32.0px 넓음)
     밑줄을 box-shadow 로 그리다 보니 «손가락 자리(좌우 여백)» 까지
     함께 그어진 것입니다.

   ■ 어떻게 고쳤나
     그림자 대신 «글자 아래에만» 선을 놓습니다.
     여백은 그대로라 손가락 자리는 좁아지지 않습니다.
     ※ 자주 묻는 질문의 분류 탭에서 쓴 것과 같은 방식입니다. */
nav.frow[aria-label="분류"] .ftab{
  position:relative;
  box-shadow:none !important;
}
nav.frow[aria-label="분류"] .ftab[aria-current="true"]::after{
  content:'';
  position:absolute;
  left:var(--kk-tab-pad, 1.128rem);
  right:var(--kk-tab-pad, 1.128rem);
  bottom:.6rem;
  height:2px;
  background:var(--body-color);
}
@media (min-width:1025px){
  nav.frow[aria-label="분류"] .ftab[aria-current="true"]::after{
    left:1.6rem; right:1.6rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 게시판 분류 줄 — 좁은 화면에서도 «한 줄» 로 (2026-08-06) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     문의하기·소식 등에서 「전체 / 공지 / 질문 / 답변」이 위아래로 흩어졌습니다.
     원본 테마(css/modify.css 181줄)가 768px 이하에서
     «세로로 세우도록» 정해 두었기 때문입니다.
         .sub_content #bo_cate ul { flex-direction: column; }

   ■ 어떻게 고쳤나
     가로로 되돌리고, 분류가 많아 폭을 넘으면 손가락으로 밀어 보게 합니다.
     ★ modify.css 는 «원본 테마 파일» 이라 건드리지 않았습니다.
       나중에 테마를 새로 받으셔도 이 파일만 올리면 그대로 유지됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .sub_content #bo_cate ul,
  #bo_list #bo_cate ul{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sub_content #bo_cate ul::-webkit-scrollbar,
  #bo_list #bo_cate ul::-webkit-scrollbar{ display:none; }

  .sub_content #bo_cate li,
  #bo_list #bo_cate li{ flex:0 0 auto; }

  /* 세로로 세울 때 쓰던 «앞의 짧은 세로선» 은 가로줄에서 군더더기입니다 */
  .sub_content #bo_cate li + li a::before{ display:none; }

  .sub_content #bo_cate a,
  #bo_list #bo_cate a{
    white-space:nowrap;
    padding:.9rem 1.2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 자동등록방지(캡차) — 좁은 화면 배치 (2026-08-06) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     숫자 그림이 한가운데 떠 있고, 아래 입력칸과 오른쪽 끝이 맞지 않았습니다.
     그림·입력칸·새로고침·소리 단추가 «놓인 차례대로» 흘러가다 보니
     좁은 화면에서 줄이 제멋대로 나뉜 탓입니다.

   ■ 어떻게 고쳤나
     차례를 다시 정합니다.
         첫 줄 :  숫자 그림  ―  입력칸  ―  새로고침
         둘째 줄:  소리 듣기  ―  안내 문구
     그러면 그림과 입력칸이 «같은 줄» 에 놓여 오른쪽 끝이 저절로 맞습니다.
     ★ 소리 듣기 단추는 없애지 않고 아래로 내렸습니다.
       눈으로 숫자를 읽기 어려운 분께 필요한 것입니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .sub_content #captcha,
  #captcha{
    display:flex !important;
    align-items:center;
    flex-wrap:wrap;
    gap:.8rem;
  }
  /* ★ 숫자 그림과 「숫자음성듣기」 단추의 «가로폭을 같게» 둡니다.
       위아래로 놓이는 두 칸이라 폭이 다르면 왼쪽 줄이 어긋나 보입니다.
       그림은 늘어나지 않도록 contain 으로 담습니다. */
  .sub_content #captcha #captcha_img,  #captcha #captcha_img{
    order:1;
    flex:0 0 11.2rem;
    width:11.2rem !important;
    object-fit:contain;
    object-position:center;
  }
  /* ★ 최소 폭 10rem 으로는 360px 기기에서 새로고침이 아래로 밀렸습니다.
       6rem 으로 낮춰 셋이 한 줄에 들어가게 합니다. 남는 자리는 입력칸이 갖습니다. */
  .sub_content #captcha #captcha_key,  #captcha #captcha_key{ order:2; flex:1 1 6rem; min-width:0; }
  .sub_content #captcha #captcha_reload,#captcha #captcha_reload{ order:3; flex:0 0 auto; }
  .sub_content #captcha #captcha_mp3,  #captcha #captcha_mp3{
    order:4;
    flex:0 0 11.2rem;
    width:11.2rem;
    justify-content:center;
  }
  .sub_content #captcha #captcha_info,  #captcha #captcha_info{ order:5; flex:1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 달력 — 출간 예정일 고치는 작은 창 (2026-08-06) ★★
   --------------------------------------------------------------------------
   달력에서 「『○○』 출간 예정」을 누르면 뜹니다.
   날짜만 바꾸고 저장하면 «제작 진행» 에 그대로 들어갑니다.
   ★ 상자와 색을 아끼고 선과 여백으로만 세웁니다. 사이트의 다른 자리와 같습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-bd[hidden]{ display:none; }
.kk-bd{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
.kk-bd-back{
  position:absolute; inset:0;
  background:rgba(28,27,25,.38);
}
.kk-bd-box{
  position:relative;
  width:100%; max-width:36rem;
  padding:clamp(2.4rem,4vw,3.2rem);
  background:var(--white-color,#fff);
  border:1px solid var(--line-color);
}
.kk-bd-t{
  margin:0 0 .6rem;
  font-size:1.3rem; color:var(--muted-color);
  letter-spacing:-.02em;
}
.kk-bd-name{
  margin:0 0 1.6rem;
  font-size:1.8rem; font-weight:600;
  letter-spacing:-.03em; line-height:1.4;
  color:var(--body-color);
}
.kk-bd input[type="date"]{
  width:100%; box-sizing:border-box;
  height:4.8rem; padding:0 1.4rem;
}
.kk-bd-help{
  margin:1rem 0 0;
  font-size:1.2rem; line-height:1.7;
  color:var(--muted-color);
}
.kk-bd-help b{ color:var(--body-color); font-weight:500; }

.kk-bd-msg{ margin:1.2rem 0 0; font-size:1.3rem; min-height:1.8rem; color:var(--muted-color); }
.kk-bd-msg.is-ok{ color:var(--point-color); }
.kk-bd-msg.is-bad{ color:var(--point-color); font-weight:500; }

.kk-bd-btn{
  display:flex; align-items:center; justify-content:flex-end;
  gap:1.2rem; margin-top:2rem;
}
.kk-bd-btn button{
  height:48px; padding:0 2.4rem; box-sizing:border-box;
  font-size:14px; letter-spacing:-.02em; cursor:pointer;
  background:none; border-radius:0;
  transition:color .2s, border-color .2s;
}
.kk-bd-cancel{ border:0; color:var(--muted-color); padding:0 1.6rem; }
.kk-bd-cancel:hover{ color:var(--body-color); }
.kk-bd-save{
  min-width:12rem;
  border:1px solid var(--line-color);
  color:var(--body-color); font-weight:500;
}
.kk-bd-save:hover{ border-color:var(--point-color); color:var(--point-color); }
.kk-bd-save:disabled{ opacity:.5; cursor:default; }

/* 달력에서 «고칠 수 있는» 일정임을 살짝 알려 줍니다 */
.kk-cal-ev a.kk-book-date,
.kk-cal-list a.kk-book-date{ cursor:pointer; }

@media (max-width:768px){
  .kk-bd-btn button{ min-height:44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ PDF 뷰어 (2026-08-08) ★★
   --------------------------------------------------------------------------
   스킨: /theme/kkeullim_theme/skin/board/kk_pdf/
   ★ 안드로이드에서 「PDF 가 안 열려요」 하시던 분들을 위한 화면입니다.
     브라우저가 스스로 그리므로 앱이 없어도 읽힙니다.
   ══════════════════════════════════════════════════════════════════════════ */
.kk-pdf-wrap{ max-width:var(--kk-board-w); margin-left:auto; margin-right:auto; }

/* ── 글 머리 ─────────────────────────────────────────────────────────────── */
.kk-pdf-head{ padding-bottom:1.6rem; border-bottom:2px solid var(--rule,#202020); }
.kk-pdf-title{
  margin:0 0 .8rem; font-size:clamp(2rem,3vw,2.4rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.4; color:var(--body-color);
}
.kk-pdf-meta{ margin:0; font-size:1.3rem; color:var(--muted-color); }
.kk-pdf-meta span + span::before{ content:'·'; margin:0 .8rem; }

.kk-pdf-none{ padding:8rem 0; text-align:center; color:var(--muted-color); }

/* ── 문서 고르는 줄 ──────────────────────────────────────────────────────── */
.kk-pdf-tabs{
  display:flex; flex-wrap:nowrap; gap:.4rem;
  margin:2rem 0 0; overflow-x:auto; scrollbar-width:none;
}
.kk-pdf-tabs::-webkit-scrollbar{ display:none; }
.kk-pdf-tab{
  flex:0 0 auto; padding:.9rem 1.4rem;
  background:none; border:1px solid var(--line-color); border-radius:0;
  font-size:1.3rem; color:var(--muted-color); cursor:pointer;
  white-space:nowrap; transition:color .2s, border-color .2s;
}
.kk-pdf-tab.on{ color:var(--body-color); border-color:var(--body-color); font-weight:500; }
.kk-pdf-tab:hover{ color:var(--point-color); border-color:var(--point-color); }

/* ── 뷰어 ────────────────────────────────────────────────────────────────── */
.kk-pdf{ margin:2rem 0 0; }

.kk-pdf-bar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.2rem;
  padding:1.2rem 0; border-bottom:1px solid var(--line-color);
}
.kk-pdf-page, .kk-pdf-zoom{ display:flex; align-items:center; gap:.8rem; }
.kk-pdf-bar button{
  width:4rem; height:4rem; min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-color); border-radius:0;
  font-size:1.8rem; line-height:1; color:var(--body-color); cursor:pointer;
  transition:color .2s, border-color .2s;
}
.kk-pdf-bar button:hover{ color:var(--point-color); border-color:var(--point-color); }
.kk-pdf-num, .kk-pdf-scale{ font-size:1.3rem; color:var(--muted-color); min-width:5rem; text-align:center; }
.kk-pdf-num b{ color:var(--body-color); font-weight:500; }
.kk-pdf-down{
  display:inline-flex; align-items:center; gap:.6rem;
  height:44px; padding:0 1.6rem;
  font-size:1.3rem; color:var(--body-color); border:1px solid var(--line-color);
}
.kk-pdf-down:hover{ color:var(--point-color); border-color:var(--point-color); }
/* 파일 크기 — 곁들이는 말이라 한 걸음 물러섭니다 */
.kk-pdf-size{ font-style:normal; font-size:1.1rem; color:var(--muted-color); }

/* ── 문서가 그려지는 자리 ────────────────────────────────────────────────── */
/* ★ 2026-08-08 — 문서 칸이 «페이지 스크롤을 가로채던» 문제
   ■ 무엇이 일어났나
     문서 칸에 높이 제한(80vh)과 넘침 처리를 두었더니,
     마우스가 그 위를 지날 때 «칸 안» 이 먼저 움직이고
     끝에 닿아야 페이지가 다시 움직였습니다.
     그것이 「스크롤이 간헐적으로 끊긴다」로 느껴졌습니다.

   ■ 어떻게 고쳤나
     평소에는 «높이를 묶지 않습니다». 문서가 길면 그대로 길게 두고
     페이지 스크롤로 읽습니다. 끊길 일이 없습니다.
     ★ 크게(+) 하셨을 때만 칸 안에서 굴러가게 합니다. (아래 .is-zoom) */
.kk-pdf-stage{
  position:relative;
  display:flex; align-items:flex-start; justify-content:center;
  min-height:20rem; padding:1.2rem;
  background:var(--kk-fld-bg,#f2f0ed);
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}
/* 크게 보실 때만 — 그때는 칸 안에서 굴리는 것이 자연스럽습니다 */
.kk-pdf-stage.is-zoom{
  overflow:auto;
  max-height:80vh;
}
.kk-pdf-canvas{
  display:block;
  background:#fff;
  box-shadow:0 1px 4px rgba(28,27,25,.10);
  /* ★ 2026-08-08 — 문서 그림이 큽니다. 「이 안쪽은 따로 칠하라」고 일러 두어
       스크롤할 때 바깥까지 다시 칠하지 않게 합니다.
       ※ 그림자를 걷어내 보기도 했으나 튐과는 무관했으므로 되돌렸습니다. */
  contain:paint;
  will-change:transform;
}
.kk-pdf-load{
  margin:0; padding:8rem 0; font-size:1.4rem; color:var(--muted-color);
}
/* ★ 2026-08-08 — 문서와 안내 글 사이에 «숨 쉴 자리» 를 두고,
     안내가 끝나는 곳에 가는 선을 그어 본문과 나눕니다.
     앞서는 문서 바로 밑에 글자가 붙어 어디까지가 안내인지 흐렸습니다. */
.kk-pdf-help{
  /* ★ margin 만으로는 문서에 바짝 붙었습니다(사이 0px).
       위쪽 여백을 안쪽 여백(padding)으로 두어 확실히 띄웁니다. */
  margin:0;
  padding:1.6rem 0 2rem;
  border-bottom:1px solid var(--line-color);
  font-size:1.2rem; line-height:1.7; color:var(--muted-color);
}
.kk-pdf-help b{ color:var(--body-color); }

.kk-pdf-con{ margin:clamp(2.4rem,3vw,3.2rem) 0 0; }
.kk-pdf-foot{ margin-top:clamp(3.2rem,4vw,4.8rem); display:flex; justify-content:center; }

@media (max-width:768px){
  .kk-pdf-stage{ padding:.8rem; min-height:30rem; max-height:70vh; }
  .kk-pdf-bar{ gap:.8rem; }
  .kk-pdf-down{ order:3; }
  .kk-pdf-num, .kk-pdf-scale{ min-width:4rem; font-size:1.2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 게시판 — 검색창·관리 메뉴는 «닫힌 채로» 시작 (2026-08-08) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     게시판에 들어가면 «검색창과 관리 메뉴가 펼쳐진 채» 나왔습니다.
     목록을 가려 무슨 글이 있는지 보이지 않았습니다.

   ■ 왜 그랬나
     이 둘은 단추를 눌러야 열리는 것인데,
     «처음에 닫아 두는 규칙» 이 어디에도 없었습니다.
     kk_ 스킨을 만들면서 원본 스킨의 CSS 를 함께 가져오지 않은 탓입니다.
     자바스크립트는 «여닫기(toggle)» 만 하므로, 시작 모습은 CSS 가 정해야 합니다.

   ■ 어떻게 고쳤나
     둘 다 처음에는 감춥니다.
     단추를 누르면 자바스크립트가 인라인 스타일로 열어 주는데,
     인라인이 더 세므로 여기 규칙과 부딪히지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.bo_sch_wrap,
#bo_list .bo_sch_wrap,
.sub_content .bo_sch_wrap{
  display:none;
}
.more_opt,
#bo_list .more_opt,
.sub_content .more_opt{
  display:none;
}

/* ── 글쓰기 — 「임시 저장된 글 목록」은 닫힌 채로 시작 (2026-08-08) ────────
   ■ 무엇이 어긋났나
     글쓰기 화면에 들어가면 「임시 저장된 글 목록 / 닫기」 상자가
     제목 칸 아래에 «펼쳐진 채» 나왔습니다.

   ■ 왜 그랬나
     검색창과 같은 까닭입니다.
     이 상자는 「임시 저장된 글 (0)」 단추를 눌러야 열리는 것인데,
     «처음에 닫아 두는 규칙» 이 없었습니다.
     그누보드의 autosave.js 는 «여닫기» 만 하므로
     시작 모습은 CSS 가 정해야 합니다.

   ■ 어떻게 고쳤나
     처음에는 감춥니다. 단추를 누르면 자바스크립트가 인라인으로 열어 주는데,
     인라인이 더 세므로 이 규칙과 부딪히지 않습니다. */
#autosave_pop,
#bo_w #autosave_pop,
.sub_content #bo_w #autosave_pop{
  display:none;
}

/* ── 「임시 저장된 글」 단추 — 제자리로 (2026-08-08) ──────────────────────
   ■ 무엇이 어긋났나
     제목 칸 오른쪽 «바깥» , 본문에서 237px 나간 자리에 떠 있었습니다.

   ■ 왜 그랬나
     단추가 「띄워 놓는 자리(absolute)」로 되어 있는데
     그 «기준이 될 상자» 가 없어, 화면 전체를 기준으로 삼았습니다.
     그래서 오른쪽 끝으로 밀려났습니다.

   ■ 어떻게 고쳤나
     띄우지 않고 «제목 칸 아래 오른쪽» 에 놓습니다.
     여기서는 겹칠 일이 없고, 눈에도 자연스럽게 들어옵니다. */
/* ★ 2026-08-08 — 감싼 칸을 «위에서 아래로 쌓는» 방식으로 바꿉니다.
     앞서는 단추를 띄우거나 여백으로 밀어 보았는데,
     제목 칸과 8px 겹치고 아래로는 40px 이 비었습니다.
     쌓는 방식에서는 겹칠 수가 없고, 사이 여백도 한 값으로 정해집니다. */
/* ★ 2026-08-08 — 「임시 저장된 글」 단추를 «제목 칸 안» 오른쪽으로 넣습니다.
     앞서는 제목 칸 아래에 두었는데, 한 줄을 통째로 차지해 화면이 성겼습니다.
     제목 칸 오른쪽에 «단추가 앉을 자리» 를 비워 두고 그 위에 얹습니다.
     제목 글자가 단추 밑으로 숨지 않도록 오른쪽 여백을 넉넉히 둡니다. */
.sub_content #bo_w #autosave_wrapper,
#bo_w #autosave_wrapper{
  position:relative;
  display:block;
  margin-bottom:1.6rem;
}
/* ★ 2026-08-08 — 제목 칸 오른쪽에 «빈 네모» 가 하나 더 그려지고 있었습니다.
     원본이 「띄워 놓기」 시절에 단추 자리를 미리 비워 두려고
     제목 칸에 오른쪽 여백과 테두리를 함께 넣어 둔 흔적입니다.
     이제 단추가 «아래» 로 내려왔으니 그 자리는 필요 없습니다. */
.sub_content #bo_w #autosave_wrapper #wr_subject,
#bo_w #autosave_wrapper #wr_subject{
  padding-right:1.4rem;
  background-image:none;
}
.sub_content #bo_w #autosave_wrapper::after,
#bo_w #autosave_wrapper::after{ display:none; }
.sub_content #bo_w #btn_autosave,
#bo_w #btn_autosave{
  /* 제목 칸 안 오른쪽에 «세로 가운데» 로 앉힙니다 */
  position:absolute !important;
  top:50% !important;
  right:.8rem !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  width:auto;
  z-index:2;
}
/* 제목 칸 — 오른쪽에 단추가 앉을 자리를 비웁니다 */
.sub_content #bo_w #autosave_wrapper #wr_subject,
#bo_w #autosave_wrapper #wr_subject{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding-right:14rem;          /* 단추 자리 — 단추가 커지면 함께 키우십시오 */
}



/* 임시 저장 목록 상자도 본문 폭 안에 */
.sub_content #bo_w #autosave_pop,
#bo_w #autosave_pop{
  box-sizing:border-box;
  max-width:100%;
}

/* ── 길잡이(PDF) 아래 단추 줄 (2026-08-08) ────────────────────────────────
   다른 화면의 단추와 같은 모양입니다.
   「고치기」는 선 두른 먹색, 「목록으로·지우기」는 글자만. */
.kk-pdf-foot{ display:flex; align-items:center; justify-content:center; gap:1.2rem; }
.kk-pdf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:12rem; height:48px; padding:0 2.4rem; box-sizing:border-box;
  border:1px solid var(--line-color);
  font-size:14px; font-weight:500; letter-spacing:-.02em;
  color:var(--body-color);
  transition:color .2s, border-color .2s;
}
.kk-pdf-btn:hover{ border-color:var(--point-color); color:var(--point-color); }
.kk-pdf-btn.is-quiet{
  min-width:0; padding:0 1.6rem; border:0; color:var(--muted-color); font-weight:400;
}
.kk-pdf-btn.is-quiet:hover{ color:var(--body-color); }

@media (max-width:768px){
  .kk-pdf-btn{ min-height:44px; }
}

/* ── 목록 — 넓은 화면에서 겹쳐 나오던 정보 줄 (2026-08-08) ────────────────
   ■ 무엇이 어긋났나
     제목 아래에 「name : 최고관리자  hit : 1  data : 17:50」이 나오는데,
     같은 화면 오른쪽에 «글쓴이 · 조회 · 날짜» 칸이 이미 있습니다.
     한 줄에 같은 말이 두 번 적힌 셈입니다.

   ■ 왜 있는 줄인가
     좁은 화면에서는 오른쪽 칸들이 숨겨지므로 «그때를 위한» 줄입니다.
     넓은 화면에서만 감춥니다. 휴대폰에서는 그대로 둡니다. */
@media (min-width:769px){
  #bo_list .m_con,
  .sub_content #bo_list .m_con{ display:none; }
}


/* ── 비회원 글쓰기 — 이름·비밀번호·전자우편·홈페이지 칸 폭 (2026-08-08) ────
   ■ 무엇이 어긋났나
     네 칸이 서로 폭도 다르고, 시작하는 자리도 10px 씩 어긋나 있었습니다.
     원본이 「반 칸(half_input)」 으로 두 개씩 나란히 놓으려 한 흔적입니다.

   ■ 어떻게 고쳤나
     제목·본문과 «같은 폭, 같은 자리» 로 맞춥니다.
     한 줄에 하나씩 놓이니 좁은 화면에서도 눌리지 않습니다. */
.sub_content #bo_w .half_input,
#bo_w .half_input,
.sub_content #bo_w #wr_name,
.sub_content #bo_w #wr_password,
.sub_content #bo_w #wr_email,
.sub_content #bo_w #wr_homepage{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
  float:none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 단추 — 눈에 띄게 (2026-08-08) ★★
   --------------------------------------------------------------------------
   ■ 왜 다시 손대나
     앞서 테두리를 여린 회색으로 낮췄더니 이번에는 «너무 묻혔습니다».
     화면에서 「무엇을 눌러야 하는지」가 보이지 않았습니다.

   ■ 어떻게 했나
     · 테두리를 «먹색» 으로 또렷하게
     · 배경에 «아주 옅은 회색» 을 깔아 종이에서 살짝 떠오르게
     · 글자를 한 단계 굵게
     채우지는 않습니다. 검은 덩어리는 「잘 정리된 서가」의 결에서 벗어납니다.

   ■ 손이 닿으면
     먹색 → 테라코타. 테두리·글자·배경이 함께 물듭니다.

   ■ 여기 한 곳만 고치면 «모든 화면» 의 단추가 함께 바뀝니다
     글쓰기 · 작성완료 · 댓글등록 · 저장 · 고치기 · 일정 넣기 · 목록으로 · 답변
     ※ 「취소 · 지우기」처럼 물러서는 단추는 글자만 두었습니다.
       그래야 «지금 눌러야 할 것» 이 구별됩니다.
   ══════════════════════════════════════════════════════════════════════════ */
.sub_content #bo_w .icon_btn_write,
#bo_w .icon_btn_write,
.sub_content #bo_list .icon_btn_write,
#bo_list .icon_btn_write,
#bo_v .icon_btn_write,
.sub_content #bo_vc_w .btn_submit,
#bo_vc_w .btn_submit,
.sub_content #bo_vc_w .icon_btn,
#bo_vc_w .icon_btn,
.admin-bar .btn_submit,
.sub_content .admin-bar .btn_submit,
.kk-cal-foot .icon_btn_write,
.sub_content .kk-cal-foot .icon_btn_write,
.kk-pdf-btn:not(.is-quiet),
.kk-bd-save,
/* ★ 목록 위의 「새 도서 등록」·「새 진행 등록」 도 같은 모양으로.
     이 둘만 다른 자리에 있어 빠져 있었습니다. */
.admin-bar > a.btn,
.sub_content .admin-bar > a.btn,
/* ★ 도서 등록의 「등록」, 제작 진행의 「저장」 도 여기에 듭니다.
     이 둘은 class="btn_submit btn" 을 써서 앞서 빠졌습니다. */
#bo_w .btn_submit,
.sub_content #bo_w .btn_submit,
#bo_w input#btn_submit,
.sub_content #bo_w input#btn_submit,
.wform .btn_submit,
.sub_content .wform .btn_submit,
/* ★ 제작 진행의 「저장」, 소식의 「올리기」 처럼
     «#bo_w 밖» 에 있는 것들까지 한 번에 담습니다.
     이 사이트에서 .btn_submit 은 «보내는 단추» 를 뜻합니다. */
button.btn_submit,
input.btn_submit,
.sub_content button.btn_submit,
.sub_content input.btn_submit{
  /* ★★ 2026-08-08 — 「동인지 제작 문의하기」와 «같은 색» 으로 통일합니다.
       그 단추가 화면에서 「지금 누를 것」임을 가장 잘 알려 주었습니다.
         배경 테라코타 · 흰 글자 · 테두리 없음
       ※ 글자 크기와 높이는 «건드리지 않습니다». 색만 바꿉니다. */
  border:0 !important;
  background:var(--point-color) !important;
  color:#fff !important;
  font-weight:500;
}
.sub_content #bo_w .icon_btn_write:hover,
#bo_w .icon_btn_write:hover,
.sub_content #bo_list .icon_btn_write:hover,
#bo_list .icon_btn_write:hover,
#bo_v .icon_btn_write:hover,
#bo_vc_w .btn_submit:hover,
#bo_vc_w .icon_btn:hover,
.admin-bar .btn_submit:hover,
.sub_content .admin-bar .btn_submit:hover,
.kk-cal-foot .icon_btn_write:hover,
.kk-pdf-btn:not(.is-quiet):hover,
.kk-bd-save:hover,
.admin-bar > a.btn:hover,
.sub_content .admin-bar > a.btn:hover,
#bo_w .btn_submit:hover,
.sub_content #bo_w .btn_submit:hover,
.wform .btn_submit:hover,
.sub_content .wform .btn_submit:hover,
button.btn_submit:hover,
input.btn_submit:hover,
.sub_content button.btn_submit:hover,
.sub_content input.btn_submit:hover{
  /* 손이 닿으면 한 톤 짙어집니다 — 「동인지 제작 문의하기」와 같습니다 */
  border:0 !important;
  background:var(--point-dark, #b8543f) !important;
  color:#fff !important;
}

/* ── 보기 화면의 「관련링크」 줄 — 고리 그림과 주소를 나란히 (2026-08-08) ──
   ■ 무엇이 어긋났나
     고리 그림이 위로 솟고 주소가 아래로 처져, 한 줄인데 층이 졌습니다.

   ■ 어떻게 고쳤나
     첨부 파일 줄에서 쓴 것과 같은 방식입니다.
     한 줄 안에서 «세로 가운데» 로 맞춥니다. */
#bo_v_link a,
.sub_content #bo_v_link a{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
#bo_v_link a i,
#bo_v_link a svg{
  flex:0 0 auto;
  width:1.6rem; height:1.6rem;
}
#bo_v_link a strong{
  font-weight:400;
  word-break:break-all;
  min-width:0;
}
#bo_v_link .bo_v_link_cnt{
  flex:0 0 auto;
  font-size:1.2rem;
  color:var(--muted-color);
}

/* ── 글쓰기 링크 칸 — 「링크 1 / 링크 2」를 «글자로» 세웁니다 (2026-08-08) ──
   ■ 무엇이 어긋났나
     주소가 «이미 들어 있는» 칸은 무엇을 넣는 칸인지 알 수 없었습니다.
     안내 글자(placeholder)는 칸이 «비었을 때만» 나오기 때문입니다.

   ■ 왜 그랬나
     원래 라벨이 있었지만
       · 글자는 「스크린리더에만 읽히도록」 감춰져 있었고
       · 옆의 고리 그림은 앞서 걷어냈습니다
     그래서 아무 표시도 남지 않았습니다.

   ■ 어떻게 고쳤나
     라벨의 감춘 글자를 «눈에 보이게» 되살립니다.
     다른 칸(도서명·지은이·발행일)과 같은 모양의 작은 이름표가 됩니다.
     ★ 칸이 비었든 찼든 늘 보입니다. */
/* ★ 2026-08-08 — 「링크 1 / 링크 2」를 «칸 안 왼쪽» 에 앉힙니다.
     칸 위에 따로 세우니 줄이 두 배로 늘어 화면이 성겼습니다.
     「임시 저장된 글」 단추를 제목 칸 안에 넣은 것과 같은 방식입니다.
     ★ 주소가 이름표 밑으로 숨지 않도록 왼쪽에 자리를 비웁니다. */
.sub_content #bo_w .bo_w_link label,
#bo_w .bo_w_link label{
  position:absolute !important;
  left:1.4rem;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  z-index:2;
  font-size:1.3rem;
  color:var(--muted-color);
  letter-spacing:-.02em;
  pointer-events:none;          /* 이름표를 눌러도 칸이 눌립니다 */
}
.sub_content #bo_w .bo_w_link input[type="text"],
#bo_w .bo_w_link input[type="text"]{
  padding-left:7.2rem;          /* 이름표 자리 */
  box-sizing:border-box;
}
/* 라벨 «안» 의 감춘 글자를 되살립니다 */
.sub_content #bo_w .bo_w_link label .sound_only,
#bo_w .bo_w_link label .sound_only{
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  white-space:normal !important;
  font-size:inherit; color:inherit;
}

/* ── 목록 제목 옆의 고리·자물쇠 그림 — 세로 가운데로 (2026-08-08) ──────────
   ■ 무엇이 어긋났나
     제목 옆의 고리 그림이 «위로 솟아» 글자와 층이 졌습니다.

   ■ 왜 그랬나
     그림이 «글자의 밑선(baseline)» 에 걸려 있었습니다.
     글자는 밑선 위로 올라앉으므로, 네모난 그림은 그보다 위로 뜹니다.

   ■ 어떻게 고쳤나
     밑선 대신 «글자 한가운데» 에 맞춥니다.
     ★ 목록·본문 어디서든 제목 옆에 붙는 작은 그림에 함께 듭니다. */
#bo_list .td_subject svg,
#bo_list .td_subject i,
#bo_list .bo_tit svg,
#bo_list .bo_tit i,
.sub_content #bo_list .td_subject svg,
.sub_content #bo_list .bo_tit svg{
  vertical-align:middle;
  position:relative;
  top:-0.1em;                  /* 글자 한가운데에 정확히 오도록 미세 조정 */
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 자주 묻는 질문 — 네 곳 손봄 (2026-08-09) ★★
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 분류 탭 — 밑줄 대신 «상자» 로 ─────────────────────────────────────
   고른 분류를 밑줄로 알렸는데, 바로 아래 머리줄의 가는 선과 겹쳐
   어느 것이 무엇인지 흐렸습니다.
   옅은 상자를 깔아 «지금 보고 있는 갈래» 를 한눈에 보이게 합니다. */
.kk-faq #bo_cate a#bo_cate_on::after,
.sub_content .kk-faq #bo_cate a#bo_cate_on::after{
  display:none;                    /* 밑줄을 걷어냅니다 */
}
/* ★ 2026-08-09 — «모든 탭이 상자» 를 갖고, 고른 것만 짙게 채웁니다.
     갈래가 몇이고 지금 어디에 있는지 한눈에 들어옵니다. */
.kk-faq #bo_cate a,
.sub_content .kk-faq #bo_cate a,
.kk-faq #bo_cate li:first-child a,
.sub_content .kk-faq #bo_cate li:first-child a{
  display:block;
  padding:.9rem 1.8rem !important;
  border:1px solid var(--line-color);
  border-radius:0;
  background:var(--white-color, #fff);
  color:var(--muted-color);
  /* ★ 2026-08-09 — 18px 은 상자 안에서 너무 큽니다.
       분류 이름은 «길잡이» 이지 본문이 아니므로 한 단계 줄입니다. */
  font-size:1.5rem !important;
  font-weight:400;
  line-height:1.4;
  white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
/* 탭 사이 틈 — 한 줄로 늘어세웁니다 */
.kk-faq #bo_cate ul,
.sub_content .kk-faq #bo_cate ul{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start;
  align-items:stretch;
  gap:.6rem;
  margin-left:0;
  overflow-x:auto;
  scrollbar-width:none;
  /* ★ 옆으로 밀 수 있게 하면 브라우저가 «세로도» 잘라 냅니다.
       그래서 상자의 아래 선 1px 이 깎여 보였습니다.
       아래에 여유를 두어 선이 온전히 나오게 합니다. */
  padding-bottom:2px;
}
.kk-faq #bo_cate ul::-webkit-scrollbar{ display:none; }
.kk-faq #bo_cate li,
.sub_content .kk-faq #bo_cate li{ flex:0 0 auto; }
/* 손이 닿으면 */
.kk-faq #bo_cate a:hover,
.sub_content .kk-faq #bo_cate a:hover{
  border-color:var(--body-color);
  color:var(--body-color);
}
/* 지금 보고 있는 갈래 — 먹색으로 채웁니다 */
.kk-faq #bo_cate a#bo_cate_on,
.sub_content .kk-faq #bo_cate a#bo_cate_on{
  background:var(--body-color) !important;
  border-color:var(--body-color) !important;
  color:#fff !important;
  font-weight:600;
}

/* ── ② 분류 줄과 질문 목록 사이의 가로선 지우기 ─────────────────────────
   탭이 상자가 되었으니 그 아래 선은 군더더기입니다. */
.kk-faq #bo_cate,
.sub_content .kk-faq #bo_cate,
.kk-faq #bo_cate ul,
.sub_content .kk-faq #bo_cate ul{
  border-bottom:0 !important;
}
.kk-faq .faq-head,
.sub_content .kk-faq .faq-head{
  border-bottom:0 !important;
}

/* ── ③ 「찾기」 칸 — 글자와 밑줄 사이를 좁힙니다 ────────────────────────── */
.kk-faq .faq-sch,
.sub_content .kk-faq .faq-sch{
  padding-bottom:0;                /* .4rem → 0 */
}

/* ── ④ 질문과 답 사이를 좁힙니다 ────────────────────────────────────────
   답이 펼쳐질 때 질문에서 너무 멀리 떨어져 한 짝으로 보이지 않았습니다. */
.kk-faq .faq-a,
.sub_content .kk-faq .faq-a{
  padding-top:0;
  margin-top:-0.4rem;              /* 질문 쪽으로 살짝 당깁니다 */
}

/* ── 임시 저장 목록의 「삭제」 단추 (2026-08-09) ──────────────────────────
   ■ 무엇이 어긋났나
     지우는 단추가 «있는데 보이지 않았습니다».
     20×20 짜리 네모에 「삭제」 두 글자를 넣으려니 넘쳐서 잘렸고,
     빛깔도 여려 그 자리에 무엇이 있는지조차 몰랐습니다.

   ■ 어떻게 고쳤나
     글자가 온전히 들어가도록 넓히고, 손이 닿으면 테라코타로 물듭니다.
     ★ 잘못 눌러 글이 사라지지 않도록 «작게, 오른쪽 끝» 에 둡니다. */
#autosave_pop .autosave_del,
.sub_content #autosave_pop .autosave_del{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  height:auto;
  margin-left:.8rem;
  padding:.3rem .8rem;
  background:none;
  border:1px solid var(--line-color);
  border-radius:0;
  font-size:1.1rem;
  line-height:1.2;
  color:var(--muted-color);
  white-space:nowrap;
  overflow:visible;
  text-indent:0;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
#autosave_pop .autosave_del:hover{
  color:var(--point-color);
  border-color:var(--point-color);
}
/* 제목과 날짜·단추가 한 줄에서 세로 가운데로 */
#autosave_pop li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
}
/* 제목이 길면 «한 줄로 줄이고» 뒤를 … 로 맺습니다.
   세 줄로 접히면 목록이 아니라 글처럼 보입니다. */
#autosave_pop li .autosave_load,
#autosave_pop li > a{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#autosave_pop li > span{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

/* ── 비밀글 확인 화면의 비밀번호 칸 (2026-08-09) ──────────────────────────
   ■ 무엇이 어긋났나
     칸이 «있는데 보이지 않았습니다».
     배경이 흰색이고 테두리가 투명이라 종이에 그대로 묻혔습니다.
       재어 본 값 —  260×46  배경 흰색  테두리 rgba(0,0,0,0)

   ■ 어떻게 고쳤나
     다른 화면의 입력칸과 «같은 결» 로 맞춥니다.
     옅은 회색 바탕에, 손이 닿으면 아래 선이 진해집니다. */
#captcha_html + form .frm_input,
.mbskin .frm_input,
.sub_content .mbskin .frm_input,
#password_wr_password,
.sub_content #password_wr_password{
  width:100%;
  max-width:32rem;
  box-sizing:border-box;
  height:4.8rem;
  padding:0 1.4rem;
  background:var(--kk-fld-bg, #f2f0ed) !important;
  border:0 !important;
  border-bottom:1px solid var(--line-color) !important;
  border-radius:0;
  font-size:var(--fs-body-sm);
  color:var(--body-color);
}
/* ★ 원본 테마가 «#pw_confirm fieldset .frm_input» 으로
     흰 배경을 못박고 있었습니다. 같은 무게로 되받습니다. */
#pw_confirm fieldset .frm_input,
#pw_confirm fieldset #password_wr_password,
.sub_content #pw_confirm fieldset .frm_input{
  background:var(--kk-fld-bg, #f2f0ed) !important;
  background-color:var(--kk-fld-bg, #f2f0ed) !important;
  border:0 !important;
  border-bottom:1px solid var(--line-color) !important;
  /* 아래 「확인」 단추와 «같은 폭» 으로. 두 칸이 한 기둥으로 섭니다. */
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}
#password_wr_password:focus,
.sub_content #password_wr_password:focus,
#pw_confirm fieldset .frm_input:focus{
  outline:none;
  border-bottom-color:var(--body-color) !important;
}

/* ── 「비밀번호 확인」 알림 (2026-08-09) ──────────────────────────────────
   두 칸이 같은지 «치시는 동안» 곁에서 알려 줍니다.
   저장 단추를 누르고 나서야 알면 늦습니다. */
.kk-pw-msg{
  /* ★ 2026-08-09 — «비어 있을 때는 자리를 갖지 않게» 합니다.
       min-height 로 자리를 잡아 두었더니, 아무 말이 없는 평소에도
       33px 을 차지해 「비밀번호 확인」과 「이메일」 사이만 벌어졌습니다.
       네 칸의 사이가 모두 10px 로 고르게 섭니다. */
  margin:0;
  height:0;
  overflow:hidden;
  font-size:1.2rem;
  line-height:1.6;
  color:var(--muted-color);
  transition:height .15s;
}
/* 할 말이 생기면 그때 자리를 냅니다 */
.kk-pw-msg.is-ok,
.kk-pw-msg.is-bad{
  height:auto;
  margin:.6rem 0 0;
}
.kk-pw-msg.is-ok{ color:var(--muted-color); }
.kk-pw-msg.is-bad{ color:var(--point-color); font-weight:500; }

/* ── 글쓰기 — 비회원 칸과 「html」 줄의 여백을 고르게 (2026-08-09) ─────────
   ■ 무엇이 어긋났나
     스킨마다 칸 사이가 제각각이었습니다.
       kk_basic 계열   10px
       kk_pdf 계열      0px   ← 회색 칸들이 한 덩어리로 붙어 보였습니다
     그러다 보니 「이름·비밀번호·비밀번호 확인·이메일·html」의
     위아래 숨결이 화면마다 달랐습니다.

   ■ 어떻게 고쳤나
     한 값(1rem)으로 못박습니다. 어느 게시판에서 쓰시든 같은 간격입니다.
     ※ 좁히거나 넓히시려면 여기 «한 곳» 만 고치시면 됩니다. */
.sub_content #bo_w .write_div > .frm_input,
#bo_w .write_div > .frm_input,
.sub_content #bo_w .half_input,
#bo_w .half_input{
  margin-bottom:1rem !important;
}
/* 「html · 답변메일받기」 줄도 같은 숨결로 */
.sub_content #bo_w .bo_v_option,
#bo_w .bo_v_option{
  margin-top:0 !important;
  margin-bottom:1rem !important;
}

/* ── 글쓰기 — 아래쪽 칸들의 여백도 고르게 (2026-08-09) ────────────────────
   ■ 무엇이 어긋났나
     본문 아래의 칸들이 제각각이었습니다.
       본문→링크1  24px    링크1→링크2  12px
       링크2→파일1 21px    파일1→파일2  30px    파일2→캡차  21px
     칸마다 숨결이 달라 화면이 들쭉날쭉해 보였습니다.

   ■ 어떻게 고쳤나
     위쪽 칸(이름·비밀번호·이메일)과 «같은 10px» 로 못박습니다.
     ★ 「본문 앞」과 「캡차 뒤」만 조금 넓게 둡니다.
       거기서 «구역이 바뀌기» 때문입니다.
         누가 쓰는가 → 무엇을 쓰는가 → 곁들이는 것 → 사람 확인
   ══════════════════════════════════════════════════════════════════════ */
.sub_content #bo_w .bo_w_link,
#bo_w .bo_w_link,
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie{
  margin-top:0 !important;
  margin-bottom:1rem !important;
}
/* ★ 파일 칸은 «두 겹» 으로 감싸여 있습니다. (.bo_w_flie 안에 .file_wr)
     둘 다 아래 여백을 갖고 있어 10+8+10+8 = 38px 이 되었습니다.
     안쪽 것은 0 으로 두어 «한 번만» 띄웁니다. */
.sub_content #bo_w .bo_w_flie .file_wr,
#bo_w .bo_w_flie .file_wr{
  margin:0 !important;
}
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
/* 링크 칸 — 안쪽에도 여백이 있어 첫 링크 앞만 20px 이 되었습니다 */
.sub_content #bo_w .bo_w_link .write_div,
#bo_w .bo_w_link .write_div{
  margin:0 !important;
}
/* 본문 칸 — 여기서 구역이 바뀌므로 조금 넓게 */
.sub_content #bo_w .write_div:has(#wr_content),
#bo_w .write_div:has(#wr_content){
  margin-bottom:2rem !important;
}
/* 캡차 — 마지막 구역이라 앞을 조금 띄웁니다 */
.sub_content #bo_w #captcha,
#bo_w #captcha{
  margin-top:2rem !important;
  margin-bottom:0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 글쓰기 — 링크·파일 칸 세 가지 (2026-08-09) ★★
   --------------------------------------------------------------------------
   재어 본 값
     링크 상자 높이 56px  ·  칸 높이 46px   → 상자에 10px 군더더기
     파일 칸 높이 21px                      → 링크(46px)의 절반도 안 됨
     이름표 가운데 787  ·  칸 가운데 782    → 5px 어긋남
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 링크 상자의 군더더기 10px 걷어내기 ────────────────────────────── */
.sub_content #bo_w .bo_w_link,
#bo_w .bo_w_link{
  padding:0 !important;
  line-height:0;                  /* 칸 아래 «글자 밑선» 만큼 남던 틈 */
}
.sub_content #bo_w .bo_w_link input[type="text"],
#bo_w .bo_w_link input[type="text"]{
  display:block;                  /* 인라인일 때 생기는 아래 틈을 없앱니다 */
  /* 칸 안의 글자도 같은 방법으로 가운데에 세웁니다 */
  height:4.6rem;
  line-height:4.6rem;
}

/* ── ② 이름표를 칸 한가운데로 ──────────────────────────────────────────
   ★ line-height 를 1 로 낮췄더니 이번엔 위로 붙었습니다.
     「위에서 절반 내린 뒤 자기 키의 절반만큼 올린다」로 바로잡습니다.
     글자 크기가 바뀌어도 늘 한가운데에 섭니다. */
.sub_content #bo_w .bo_w_link label,
#bo_w .bo_w_link label{
  /* ★ 2026-08-09 — 픽셀로 재어 보니 이름표만 8px 위에 붙어 있었습니다.
         이름표   위 13 / 아래 21
         안내글자 위 18 / 아래 16
       flex 로 세워도 «글꼴 자체의 위쪽 여백» 때문에 어긋납니다.
       파일 칸에서 쓴 것과 같은 방법 — «줄 높이를 칸 높이와 같게» 둡니다.
       글자가 그 줄 안에서 저절로 가운데에 섭니다. */
  top:0 !important;
  bottom:0 !important;
  transform:none !important;
  display:block !important;
  height:4.6rem;
  line-height:4.6rem !important;
}

/* ── ③ 파일 칸 높이를 링크 칸과 같게 ─────────────────────────────────── */
.sub_content #bo_w .bo_w_flie,
#bo_w .bo_w_flie,
.sub_content #bo_w .file_wr,
#bo_w .file_wr{
  line-height:0;
  /* 감싼 칸도 «세로 가운데» 로 세워 둡니다 */
  display:flex;
  align-items:center;
}
/* ★ 뒤쪽의 «.bo_w_flie .frm_file» 규칙이 height:auto 와 padding:0 을
     못박고 있어 22px 로 눌려 있었습니다. 같은 자리를 짚어 되받습니다. */
.sub_content #bo_w .bo_w_flie .frm_file,
#bo_w .bo_w_flie .frm_file,
.sub_content #bo_w input[type="file"],
#bo_w input[type="file"],
.sub_content #bo_w .frm_file,
#bo_w .frm_file{
  display:flex;
  align-items:center;             /* 안의 「파일 선택」 단추를 세로 가운데로 */
  width:100%;
  box-sizing:border-box;
  height:4.6rem !important;       /* 링크 칸과 같은 높이 */
  padding:0 1.4rem !important;
  background:var(--kk-fld-bg, #f2f0ed);
  border:0;
  font-size:var(--fs-body-sm);
  /* ★ 2026-08-09 — 파일 칸은 «브라우저가 스스로 그리는» 칸이라
       align-items:center 가 듣지 않습니다.
       (재어 보니 내용이 맨 위에 붙어 위 0 / 아래 24px 이었습니다)
       줄 높이를 칸 높이와 같게 두면 그 안에서 «저절로» 가운데에 섭니다. */
  line-height:4.6rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 댓글 — 비회원 입력칸 (2026-08-09) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     로그인하지 않고 댓글을 다는 자리에서
     「이름·비밀번호·캡차」가 서로 겹치고 폭도 제각각이었습니다.

   ■ 어떻게 고쳤나
     이름 → 비밀번호 → 비밀번호 확인 → 자동등록방지 를
     «한 기둥으로, 같은 간격» 으로 세웁니다.
     글쓰기 화면의 칸들과 같은 결입니다.
   ══════════════════════════════════════════════════════════════════════════ */
#bo_vc_w .wr_content + *,
#bo_vc_w #wr_name,
#bo_vc_w #wr_password,
#bo_vc_w #wr_password_re,
.sub_content #bo_vc_w #wr_name,
.sub_content #bo_vc_w #wr_password,
.sub_content #bo_vc_w #wr_password_re{
  display:block;
  width:100% !important;
  /* ★ 2026-08-09 — 「댓글 내용」 칸과 «같은 폭» 으로 둡니다.
       앞서 36rem 으로 줄여 두었는데, 위 칸과 나란하지 않아
       한 덩어리로 보이지 않았습니다. */
  max-width:100% !important;
  box-sizing:border-box;
  height:4.6rem;
  line-height:4.6rem;
  padding:0 1.4rem;
  margin:0 0 1rem !important;
  background:var(--kk-fld-bg, #f2f0ed);
  border:0;
  float:none !important;
}
/* ★ 칸을 100% 로 두어도 674px 에 머물렀습니다.
     «감싼 칸(.bo_vc_w_info)» 자체가 674px 이었기 때문입니다.
     그 칸부터 넓혀야 안의 칸들이 「댓글 내용」과 나란해집니다. */
#bo_vc_w .bo_vc_w_info,
.sub_content #bo_vc_w .bo_vc_w_info{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
}

/* 「비밀번호가 다릅니다」 알림 */
#bo_vc_w .kk-pw-msg{ max-width:100%; }

/* 자동등록방지 — 위 칸들과 같은 간격으로 */
#bo_vc_w #captcha,
.sub_content #bo_vc_w #captcha{
  margin:0 0 1rem !important;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem;
}
#bo_vc_w #captcha #captcha_img{ order:1; flex:0 0 auto; }
#bo_vc_w #captcha #captcha_key{ order:2; flex:1 1 12rem; min-width:0; margin:0 !important; }
#bo_vc_w #captcha #captcha_reload{ order:3; flex:0 0 auto; }
#bo_vc_w #captcha #captcha_mp3{ order:4; flex:0 0 auto; }
#bo_vc_w #captcha #captcha_info{ order:5; flex:1 1 100%; margin:.4rem 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 견주는 표 — 좁은 화면에서 「어느 쪽」인지 밝히기 (2026-08-09) ★★
   --------------------------------------------------------------------------
   ■ 무엇이 어긋났나
     좁은 화면에서는 표가 «세로로 쌓입니다».
     그러면 머리줄(자비 출판 / 기획 출판)이 사라져
       원고 심사
        – 없음 — 상담 후 진행     ← 어느 쪽?
        – 있음 — 검토 4주         ← 어느 쪽?
     처럼 어느 쪽 이야기인지 알 수 없었습니다.

   ■ 어떻게 고쳤나
     칸마다 data-label 로 이름표를 달고, «좁은 화면에서만» 그것을 보입니다.
       원고 심사
         자비 출판   없음 — 상담 후 진행
         기획 출판   있음 — 검토 4주
     ★ 넓은 화면에서는 머리줄이 제 몫을 하므로 이름표를 감춥니다.
     ※ 두 칸을 합친 줄(유통·저작권)에는 이름표가 없어 그대로 나옵니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 넓은 화면 — 이름표를 감춥니다 */
.cmp3 td[data-label]::before{ display:none; }

@media (max-width:768px){
  .cmp3 td[data-label]{
    display:flex !important;
    align-items:baseline;
    gap:1rem;
    padding-left:0 !important;
  }
  /* ★ 뒤쪽의 «.kk-doc table.tbl tbody td::before» 가 content 를 «빈 값» 으로
       덮고 있었습니다. 그보다 촘촘히 짚어 되받습니다. */
  .kk-doc table.tbl.cmp3 tbody td[data-label]::before,
  .cmp3 td[data-label]::before{
    content:attr(data-label) !important;
    display:block !important;
    /* ★ 원본이 이름표를 «띄워 놓아»(position:absolute) 글자 위에 얹혔습니다.
         흐름에 내려놓아 글자와 «나란히» 서게 합니다. */
    position:static !important;
    top:auto !important;
    left:auto !important;
    /* ★ 원본은 이 자리에 «높이 1px 짜리 회색 띠» 를 그려 놓았습니다.
         (원래는 항목 앞의 짧은 줄 표시였습니다)
         이제 글자가 들어가므로 띠는 걷어냅니다. */
    height:auto !important;
    background:none !important;
    /* ★ 이름표 자리 — 가장 긴 이름에 맞춥니다.
         「손대지 않는 것」처럼 길어지면 여기를 키우십시오. */
    flex:0 0 8.8rem;
    font-size:1.2rem;
    color:var(--muted-color);
    letter-spacing:-.02em;
    white-space:nowrap;
  }
  /* 앞에 붙던 「–」 표시는 이름표가 대신하므로 걷어냅니다 */
  .cmp3 td[data-label]{ list-style:none; }
  .cmp3 tbody td[data-label]::marker{ content:''; }
}

/* ── 비밀글 안내 문구 가운데 정렬 (2026-08-10) ──────────────────────────────
   비밀번호 칸과 「확인」 단추는 가운데 서는데
   위의 안내 글(「비밀글 기능으로 보호된 글입니다.」와 두 줄)만
   왼쪽에 붙어 있어 화면의 축이 어긋났습니다.
   원본 회원 스킨(style.css)은 손대지 않고 여기서 덮어씁니다.
   글 수정·삭제 때 뜨는 같은 화면의 안내 글도 함께 가운데로 섭니다. */
#pw_confirm h1,
#pw_confirm p{
  text-align:center;
}
/* 안내 두 줄(「작성자와 관리자만…」 「본인이라면…」)은 명조체로.
   --serif-font 는 테마의 명조 변수입니다 (css/layout.css 에 정의).
   ★ 크기·자간을 고치실 일이 생기면 아래 두 값만 만지십시오. (2026-08-10)
     명조는 자간을 좁히면(-값) 답답해 보여, 여기서는 살짝 벌립니다. */
#pw_confirm p{
  font-family:var(--serif-font);
  font-size:1em;          /* 안내 두 줄 크기 — 원래 1.083em 에서 줄임 */
  letter-spacing:.02em;   /* 안내 두 줄 자간 — 0 이 보통, 키우면 더 벌어짐 */
}
/* 첫 줄 「비밀글 기능으로 보호된 글입니다.」 는 크기도 서체도 원래대로 둡니다.
   strong 이 p 의 명조를 물려받으므로 서체만 되돌립니다.
   ★ p 를 1em 으로 줄인 만큼 배수(1.167em)를 올려 원래 크기를 지킵니다.
     (원래: p 1.083em × strong 1.167em ≒ 1.264em) */
#pw_confirm p strong{
  font-family:var(--kk-sans);
  font-size:1.264em;
  letter-spacing:normal;
}

/* ── 로그인 화면 — 입력칸과 단추의 가로폭 통일 (2026-08-14) ─────────────────
   아이디·비밀번호 칸에는 글쓰기 폼용 «최대 640px» 제한이 얹혀
   「로그인」 단추보다 좁게 서 있었습니다.
   로그인 화면에서는 셋 다 칸 전체 폭으로 나란히 세웁니다. */
.sub_content #mb_login #login_fs .frm_input,
#mb_login #login_fs .frm_input,
#mb_login #login_fs .btn_submit{
  width:100%;
  max-width:none;
}

/* ── 로그인 화면 — 이름표와 칸을 나란히 (2026-08-14) ────────────────────────
   「아이디 [칸] / 비밀번호 [칸] / 로그인」 꼴로 바꿉니다.
   격자(grid) 두 세로줄: 왼쪽은 이름표, 오른쪽은 칸.
   이름표 줄의 너비는 긴 쪽(비밀번호)에 맞춰 저절로 정해지므로
   두 칸의 시작점과 가로폭이 언제나 같습니다.
   ★ 줄 사이 간격을 바꾸시려면 row-gap, 이름표와 칸 사이는 column-gap. */
.sub_content #mb_login #login_fs,
#mb_login #login_fs{
  display:grid;
  grid-template-columns:auto 1fr;   /* 왼줄 이름표 · 오른줄 칸 */
  align-items:center;
  column-gap:1.6rem;
  row-gap:1.4rem;
}
#mb_login #login_fs .fld-lb{ margin:0; }
.sub_content #mb_login #login_fs .frm_input,
#mb_login #login_fs .frm_input{ margin:0; }
/* 「로그인」 단추와 자동로그인 줄은 두 세로줄을 가로질러 통으로 */
#mb_login #login_fs .btn_submit,
#mb_login #login_fs #login_info{
  grid-column:1 / -1;
}
#mb_login #login_fs .btn_submit{ margin:.6rem 0 0; }
.sub_content #mb_login #login_fs #login_info,
#mb_login #login_fs #login_info{ margin:0; }

/* ── 회원가입 약관 상자 — 제목·항목·설명 구분 (2026-08-14) ──────────────────
   약관 문안의 모든 줄이 같은 모양으로 서서 읽기 어려웠습니다.
   설정 파일의 변환 규칙(kk_terms_html)과 짝을 이룹니다:
     tm-h   「제5조 …」 큰 제목
     tm-s   「■ 」 로 표시한 작은 제목
     tm-li  「· 」 항목 — 앞에 점을 찍고 들여쓰기
     tm-def 「이름  설명」 짝 — 이름은 굵게, 설명과 나란히
     tm-p   본문
   ★ 이름 칸의 너비를 바꾸시려면 아래 tm-def b 의 min-width 만. */
.reg-box .tm-h{
  margin:1.4rem 0 .5rem;
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--body-color);
}
.reg-box .tm-s{
  margin:1.2rem 0 .4rem;
  font-size:var(--fs-body-sm);
  font-weight:600;
  color:var(--body-color);
}
.reg-box .tm-h:first-child,
.reg-box .tm-s:first-child{ margin-top:0; }
.reg-box .tm-p{ margin:0 0 .4rem; line-height:1.45; }
.reg-box .tm-li{
  position:relative;
  margin:0 0 .2rem;
  line-height:1.45;
  padding-left:1.4rem;
}
.reg-box .tm-li::before{
  content:"·";
  position:absolute;
  left:.3rem;
  color:var(--muted-color);
}
.reg-box .tm-def{
  display:flex;
  gap:1.2rem;
  margin:0 0 .3rem;
  line-height:1.45;
}
.reg-box .tm-def b{
  flex:none;
  min-width:9rem;        /* 이름 칸 너비 — 짝끼리 세로로 줄이 맞습니다 */
  font-weight:600;
  color:var(--body-color);
}
.reg-box .tm-def span{ flex:1; }
.reg-box .tm-gap{ height:.3rem; }
.reg-box .tm-gap + .tm-gap{ height:.5rem; }   /* 빈 줄 둘 = 단락 크게 쉼 */
/* ★ 2026-08-14 줄간격 축소 — 답답하면 위 margin·height 를 조금씩 키우십시오 */

/* ── 게시판 바닥 고정 안내문 상자 (2026-08-14) ──────────────────────────────
   설정 파일의 kk_board_notice() 가 붙이는 안내문의 옷입니다.
   (지금은 작가 마당의 무단 전재 금지 문구가 입고 있습니다) */
.kk-fixed-notice{
  margin:2.4rem 0 0;
  padding:1.4rem 1.8rem;
  border-left:3px solid var(--point-color, #CE6455);
  background:#F8F0EE;
  color:#A44A3C;
  line-height:1.7;
}