/* 뇌와 마음 알아보기 — 공개 페이지 (gen_brain_pages.js 가 만든다. 손으로 고치지 말고 생성기를 고칠 것) */
/* 머리말·꼬리말은 메인 홈페이지(index.html)와 같은 색·글꼴·크기다 — 다른 사이트로 보이면 안 된다.
   값(파랑 #2563eb · 먹남색 #1a2a4a · 회색 #64748b · 테두리 #e2e8f0)은 index.html 의 :root 와 같은 것이다. */
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#f4f3ef;font-family:'Noto Sans KR','Segoe UI',sans-serif;min-height:100vh;color:#1c1c1a;}
a{color:inherit;}
.pnav{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,.8);position:sticky;top:0;z-index:50;padding:0 5%;}
/* 머리말은 메인 홈페이지 다섯 페이지와 **같은 짜임·같은 치수**다(2026-09-21).
   로고와 단추는 양끝, 메뉴는 화면 가운데에 띄운다. 가운데에 띄운 메뉴는 좁아지면 단추와 겹칠 수 있어서,
   메인과 똑같이 1200px 아래에서 간격을 좁히고 1080px 아래에서는 햄버거(☰)로 접는다 — 이 폭은 재서 정한 값이다. */
.pnav-in{max-width:1200px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;position:relative;}
.plogo{font-size:22px;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.plogo .b{color:#2563eb;}
.plogo .t{color:#1a2a4a;}
.plinks{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:32px;white-space:nowrap;}
.plinks a{font-size:14px;color:#64748b;text-decoration:none;font-weight:500;white-space:nowrap;transition:color .2s;}
.plinks a:hover{color:#2563eb;}
.plinks a.on{color:#2563eb;font-weight:700;}   /* 메인의 켜진 메뉴와 같은 파랑 */
.pcta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* 「로그인」(로그인 뒤엔 「마이페이지」)은 메인과 같은 테두리 단추 */
.plogin{padding:8px 20px;border:1.5px solid #2563eb;border-radius:8px;color:#2563eb;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .2s;}
.plogin:hover{background:#2563eb;color:#fff;}
.btn-fill{padding:8px 20px;background:#2563eb;border:1.5px solid #2563eb;border-radius:8px;color:#fff;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .2s;}
/* 햄버거 — 메인은 자바스크립트로 여닫지만 이 페이지들은 스크립트 없이 돌아야 해서 체크 상자로 여닫는다 */
.pnav-t{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.pburger{display:none;width:40px;height:40px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center;font-size:20px;color:#1a2a4a;margin-left:8px;flex-shrink:0;user-select:none;}
@media (max-width:1200px){ .plinks{gap:22px;} }
@media (max-width:1080px){
  .pburger{display:inline-flex;}
  .plinks{display:none;position:absolute;top:64px;left:-5vw;right:-5vw;transform:none;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 12px 30px rgba(0,0,0,.08);padding:8px 0;}
  .pnav-t:checked ~ .plinks{display:flex;}
  .plinks a{padding:13px 5%;font-size:15px;border-top:1px solid #f1f5f9;}
  .plinks a:first-child{border-top:none;}
}
.btn-fill:hover{background:#1d4ed8;border-color:#1d4ed8;}
.wrap{max-width:820px;margin:0 auto;padding:22px 16px 70px;font-family:'Noto Serif KR',serif;}
.wrap.wide{max-width:900px;}
.crumb{font-family:'Noto Sans KR',sans-serif;font-size:12px;color:#8a8478;display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.crumb a{color:#0f6070;text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
.mast{background:#fff;border:1px solid #ddd9cf;padding:30px 34px 26px;}
.mast .kicker{font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:.18em;color:#1c1c1a;font-weight:700;text-transform:uppercase;}
.kb{color:#0f6070;}
.mast h1{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:9px;line-height:1.25;}
.mast .s{font-size:16px;color:#3e3e39;line-height:1.95;margin-top:13px;max-width:60ch;}
.mast .rule{height:1px;background:#e6e2d8;margin:20px 0 16px;}
.mast .meta{font-family:'Segoe UI',sans-serif;display:flex;gap:26px;flex-wrap:wrap;font-size:12px;color:#6d6d66;font-variant-numeric:tabular-nums;}
.mast .meta b{color:#1c1c1a;font-weight:700;font-size:15px;margin-right:3px;}
.mast .note{font-size:13.5px;color:#6d6d66;line-height:1.85;margin-top:14px;max-width:60ch;}
.sectitle{font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:.18em;color:#8a8478;font-weight:700;text-transform:uppercase;margin:32px 0 10px;display:flex;gap:10px;align-items:baseline;scroll-margin-top:70px;}
.sectitle .num{color:#0f6070;}
.sectitle .sub{font-weight:400;letter-spacing:0;text-transform:none;font-size:12px;color:#a09a8e;}
.list{border-top:1px solid #ddd9cf;}
.item{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:baseline;border-bottom:1px solid #e6e2d8;padding:16px 6px;text-decoration:none;color:inherit;}
.item:hover{background:#fbfaf7;}
.item .num{font-family:'Segoe UI',sans-serif;font-size:12px;color:#0f6070;font-weight:700;font-variant-numeric:tabular-nums;}
.item .t{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;}
.item .d{display:block;font-size:13.5px;color:#6d6d66;margin-top:4px;line-height:1.7;}
.item .rn{font-family:'Segoe UI',sans-serif;font-size:11.5px;color:#8a8478;white-space:nowrap;font-variant-numeric:tabular-nums;}
.art{background:#fff;border:1px solid #ddd9cf;padding:38px 48px 42px;}
.runhead{font-family:'Segoe UI',sans-serif;display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.14em;color:#8a8478;text-transform:uppercase;border-bottom:1px solid #e6e2d8;padding-bottom:9px;margin-bottom:22px;font-weight:700;}
.runhead .r{color:#0f6070;}
.art h1{font-size:28px;font-weight:700;line-height:1.35;letter-spacing:-.02em;text-wrap:balance;}
.artmeta{font-family:'Segoe UI',sans-serif;font-size:11.5px;color:#8a8478;margin-top:11px;display:flex;gap:16px;flex-wrap:wrap;font-variant-numeric:tabular-nums;}
.lead{font-size:17.5px;line-height:1.95;color:#2e2e2a;margin-top:20px;padding-left:16px;border-left:2px solid #0f6070;max-width:66ch;}
.art h2{font-size:19px;font-weight:700;margin:34px 0 4px;letter-spacing:-.01em;display:flex;gap:11px;align-items:baseline;scroll-margin-top:70px;}
.art h2 .n{font-family:'Segoe UI',sans-serif;font-size:11.5px;color:#0f6070;font-weight:700;font-variant-numeric:tabular-nums;flex:none;}
.art p{font-size:17px;line-height:2.02;color:#242421;margin-top:12px;max-width:66ch;}
.art ul{margin:12px 0 0 6px;max-width:66ch;list-style:none;}
.art li{font-size:17px;line-height:1.97;color:#242421;margin-top:8px;padding-left:18px;position:relative;}
.art li:before{content:'';position:absolute;left:0;top:.85em;width:7px;height:1px;background:#0f6070;}
.art b{font-weight:700;color:#0a0a09;}
.art .warnbox{margin-top:20px;padding:15px 18px;background:#fdf6ec;border-left:3px solid #b45309;max-width:66ch;}
.art .warnbox p{margin-top:8px;color:#3a2f22;}
.art .warnbox p:first-child{margin-top:0;}
.art .warnbox b{color:#8a4a08;}
.refs{margin-top:36px;padding-top:15px;border-top:1px solid #e6e2d8;}
.refs .h{font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:.16em;color:#8a8478;font-weight:700;text-transform:uppercase;}
.refs ol{margin:12px 0 0 0;list-style:none;counter-reset:r;}
.refs li{font-family:'Segoe UI',sans-serif;font-size:12px;color:#4a4a45;line-height:1.72;margin-top:9px;padding-left:24px;position:relative;counter-increment:r;}
.refs li:before{content:counter(r) '.';position:absolute;left:0;color:#0f6070;font-weight:700;font-variant-numeric:tabular-nums;}
.refs a{color:#0f6070;word-break:break-all;text-decoration:none;border-bottom:1px solid #cfe0e3;}
.refs .m{color:#77726a;}
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:24px;flex-wrap:wrap;}
.pager a{flex:1 1 250px;text-align:left;background:#fff;border:1px solid #ddd9cf;padding:12px 15px;font-size:13.5px;color:#262623;text-decoration:none;}
.pager a:hover{border-color:#0f6070;}
.pager small{display:block;font-family:'Segoe UI',sans-serif;color:#8a8478;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;}
/* 회원 안내 — 서재의 먹색·청록과 따로 놀지 않게 조용히. 광고처럼 튀면 글의 신뢰를 깎는다. */
.joinbox{margin-top:26px;background:#fff;border:1px solid #ddd9cf;border-left:3px solid #0f6070;padding:20px 24px;}
.joinbox.end{margin-top:32px;}
.jb-t{font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;color:#0f6070;letter-spacing:-.01em;}
.joinbox p{font-size:15px;line-height:1.9;color:#3e3e39;margin-top:8px;max-width:62ch;}
.joinbox b{font-weight:700;color:#1c1c1a;}
.jb-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;font-family:'Noto Sans KR',sans-serif;}
.jb-go{display:inline-block;padding:9px 20px;background:#2563eb;border:1.5px solid #2563eb;border-radius:8px;color:#fff;font-size:13px;font-weight:600;text-decoration:none;}
.jb-go:hover{background:#1d4ed8;border-color:#1d4ed8;}
.jb-sub{display:inline-block;padding:9px 18px;border:1px solid #d7e5e7;border-radius:8px;color:#0f6070;font-size:13px;font-weight:600;text-decoration:none;background:#fff;}
.jb-sub:hover{background:#f7fafa;}
/* 회원 서재에만 있는 글 — 표지 맨 아래. 목록과 같은 괘선 짜임이되 바탕을 살짝 눕혀 「여기는 다르다」를 준다. */
.moreblk{margin-top:40px;background:#fbfaf7;border:1px solid #ddd9cf;padding:24px 26px 22px;}
.mb-h{display:flex;align-items:baseline;gap:10px;font-family:'Noto Sans KR',sans-serif;font-size:14px;font-weight:700;color:#1c1c1a;}
.mb-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:#0f6070;color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums;}
.mb-s{font-size:14px;color:#6d6d66;line-height:1.85;margin-top:9px;max-width:60ch;}
.mb-list{margin-top:14px;border-top:1px solid #e6e2d8;}
/* 쪽 넘김 — 라디오는 눈에 보이지 않게 두고(지우면 안 된다, 키보드로 고를 수 있어야 한다) 쪽 하나만 보인다.
   자바스크립트가 없어도 돌고, 막혀 있어도 첫 쪽은 늘 보인다. 쪽별 규칙은 표지 <head> 에 따로 들어간다. */
.pg-r{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.pg-page{display:none;}
.pg-page:first-child{display:block;}
.pg-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;font-family:'Noto Sans KR',sans-serif;}
.pg-nav label{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 9px;border:1px solid #ddd9cf;border-radius:8px;background:#fff;color:#4a4a45;font-size:12.5px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;}
.pg-nav label:hover{border-color:#0f6070;color:#0f6070;}
.pg-cnt{margin-left:6px;font-size:11.5px;color:#8a8478;}
.mb-item{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:baseline;padding:12px 2px;border-bottom:1px solid #e6e2d8;}
.mb-cat{font-family:'Noto Sans KR',sans-serif;font-size:11px;color:#0f6070;font-weight:700;}
.mb-t{font-size:16px;font-weight:600;color:#1c1c1a;letter-spacing:-.01em;}
.mb-m{font-family:'Noto Sans KR',sans-serif;font-size:11.5px;color:#8a8478;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mb-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;font-family:'Noto Sans KR',sans-serif;}
/* 앞부분만 공개하는 글 — 목록의 작은 표와 글 안의 끊는 자리. 끊는 자리는 아래로 흐려지며 끝나는 느낌을 준다. */
.item .tag{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid #d7e5e7;border-radius:10px;font-family:'Noto Sans KR',sans-serif;font-size:10.5px;font-weight:600;color:#0f6070;vertical-align:2px;letter-spacing:0;}
/* 흐린 다음 절 — 제목은 살짝, 글줄 막대는 더 흐리게. 아래로 갈수록 바탕에 녹아들고 그 위에 끊는 상자가 겹친다. */
.ghost{position:relative;margin-top:30px;user-select:none;pointer-events:none;}
.ghost .g-h{font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;gap:11px;align-items:baseline;color:#242421;filter:blur(1.4px);opacity:.75;}
.ghost .g-h .n{font-family:'Segoe UI',sans-serif;font-size:11.5px;color:#0f6070;font-weight:700;flex:none;}
.ghost .g-p{margin-top:16px;max-width:66ch;}
.ghost .g-p i{display:block;height:12px;margin-top:21px;border-radius:6px;background:#cfcabd;filter:blur(3.2px);opacity:.8;}
.ghost .g-p i:first-child{margin-top:12px;}
.ghost:after{content:'';position:absolute;left:0;right:0;top:30%;bottom:-2px;background:linear-gradient(rgba(255,255,255,0),#fff 88%);}
.cut{position:relative;z-index:1;margin-top:-90px;padding:22px 24px 20px;background:#fbfaf7;border:1px solid #ddd9cf;border-left:3px solid #0f6070;box-shadow:0 -6px 24px rgba(255,255,255,.9);}
.cut-t{font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;color:#0f6070;}
.art .cut p{font-size:15px;line-height:1.85;color:#3e3e39;margin-top:6px;}
.cut-list{list-style:none;margin:12px 0 0;border-top:1px solid #e6e2d8;}
.cut-list li{display:flex;gap:11px;align-items:baseline;padding:9px 0;border-bottom:1px solid #e6e2d8;font-size:15.5px;font-weight:600;color:#8a8478;margin:0;line-height:1.6;}
.cut-list li:before{display:none;}
.cut-list .n{font-family:'Segoe UI',sans-serif;font-size:11px;color:#0f6070;font-weight:700;font-variant-numeric:tabular-nums;flex:none;}
.fnote{font-family:'Segoe UI',sans-serif;margin-top:24px;font-size:11.5px;color:#8a8478;line-height:1.8;}
/* 꼬리말도 메인과 같은 먹남색 바탕 */
.pfoot{background:#1a2a4a;color:#94a3b8;padding:48px 5%;}
.pfoot-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:14px;font-size:13px;}
.pfoot-logo{font-size:20px;font-weight:700;}
.pfoot-logo .b{color:#2563eb;}
.pfoot-logo .t{color:#fff;}
.pfoot-links{display:flex;gap:24px;flex-wrap:wrap;}
.pfoot-links a{font-size:13px;color:#64748b;text-decoration:none;}
.pfoot-links a:hover{color:#fff;}
.pfoot-note{color:#94a3b8;line-height:1.7;font-size:12.5px;}
.pfoot-copy{color:#475569;font-size:12px;}
@media (max-width:420px){
  .plogo{font-size:20px;}
  .plogin,.btn-fill{padding:7px 12px;}
}
@media (max-width:600px){
  .mast{padding:22px 20px;}
  .art{padding:24px 20px 28px;}
  .joinbox{padding:16px 18px;}
  .joinbox p{font-size:14.5px;}
  .jb-btns a{flex:1 1 auto;text-align:center;}
  .moreblk{padding:18px 18px 16px;}
  .mb-item{grid-template-columns:1fr;gap:3px;}
  .mb-m{display:none;}
  /* 쪽 단추가 열 개를 넘어가도 줄만 늘고 화면은 밀리지 않게 (폰은 360~390px 이고 헤드리스 크롬으로는
     500px 아래를 찍을 수 없어 눈으로 확인이 안 된다 — 그래서 넉넉히 작게 잡는다) */
  .pg-nav{gap:5px;}
  .pg-nav label{min-width:26px;height:27px;padding:0 6px;font-size:12px;}
  .pg-cnt{width:100%;margin-left:0;}
  .mb-btns a{flex:1 1 auto;text-align:center;}
  .mast h1{font-size:24px;}
  .art h1{font-size:22px;}
  .art p,.art li{font-size:16px;}
  .item{grid-template-columns:34px 1fr;gap:12px;}
  .item .rn{display:none;}
  .pfoot{padding:36px 5%;}
}