@charset "UTF-8";
/* 팔자마을 공통 레이아웃/컴포넌트 (변수는 tokens.css) */

/* 그누위즈 기본 스타일 중 충돌하는 것만 중화 */
html body { font-family: var(--pm-font-body); color: var(--pm-ink); background: linear-gradient(180deg, var(--pm-sky-top), var(--pm-sky-bottom)) fixed; overflow-x: hidden; }
html body #wrapper { padding-top: 0; }
html body #container_wr { background: transparent; }
html body a { color: inherit; }
:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }

/* 접근성 보조 */
.pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--pm-r-pill); background: var(--pm-cream); color: var(--pm-ink); }
.pm-skip:focus { top: 12px; box-sizing: border-box; display: inline-flex; align-items: center; min-height: var(--pm-tap); }

/* ---------- 헤더 ---------- */
.pm-hd { position: sticky; top: 0; z-index: 50; padding: 14px 14px 0; pointer-events: none; }
.pm-hd-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pm-hd .pm-pill { pointer-events: auto; }
.pm-brand { font-family: var(--pm-font-head); font-size: 20px; padding: 6px 16px 6px 6px; }
.pm-brand img { display: block; width: 30px; height: 30px; }
.pm-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 알약 ---------- */
.pm-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--pm-tap); padding: 8px 16px; border-radius: var(--pm-r-pill); background: var(--pm-card); box-shadow: var(--pm-shadow); color: var(--pm-ink); font-size: 14px; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
a.pm-pill:hover { background: var(--pm-cream); }
.pm-pill--accent { background: var(--pm-fire); color: var(--pm-ink); font-weight: 700; }
a.pm-pill--accent:hover { background: var(--pm-fire-hover); }
.pm-pill--admin { background: var(--pm-soft2); }
.pm-pill--hub { background: #ffe7a3; font-weight: 700; }
a.pm-pill--hub:hover { background: #ffdf85; }

/* ---------- 페이지/카드 ---------- */
/* 콘텐츠 열 폭 정본: 모든 페이지의 직계 자식은 같은 --pm-page-w. 페이지 CSS 는 열 폭(max-width)을 따로 정하지 않는다.
   (.pm-page.pm-page 로 올려 페이지 CSS 의 한 클래스 max-width 가 이기지 못하게 한다.)
   --wide 가 없는 페이지(입력 폼·긴 글)는 카드 바깥 틀은 같고, 카드 안쪽 여백만 늘려 내용이 가운데 단일 읽기 열(--pm-read-w)에 서게 한다. --wide 는 안쪽도 틀 폭 전체를 쓴다. */
.pm-page { min-height: 60vh; padding: 28px 16px 56px; display: flex; flex-direction: column; align-items: center; gap: var(--pm-gap-section); container-type: inline-size; }
/* reset.css(display none)·그누보드 default.css(font-size 0·text-indent) 가 legend 를 모두 숨긴다. 화면의 입력 묶음 제목(방향·성별·기간·누구의 날 등)은 보여야 해서 특이도 0 으로 풀고, 제목 크기는 각 화면 클래스가 정한다. 로그인 화면(--auth)은 숨김 legend 를 그대로 둔다 */
:where(.pm-page:not(.pm-page--auth)) legend { display: block; position: static; width: auto; max-width: 100%; margin: 0; padding: 0; font-size: inherit; line-height: inherit; text-indent: 0; overflow: visible; }
.pm-page.pm-page > * { width: 100%; max-width: var(--pm-page-w); box-sizing: border-box; }
/* 읽기형(2026-10-08 번복): 카드 안 모든 직계 요소(머리·그림·칩·버튼·폼)가 가운데 한 열을 같은 폭·같은 시작선으로 쓴다. 열 폭 = min(카드 폭, --pm-read-w), 모자라는 만큼을 좌우 안쪽 여백으로 줘서 요소마다 폭이 달라지지 않는다. */
:root { --pm-card-px: 24px; }
.pm-page:not(.pm-page--wide):not(.pm-page--auth):not(.pm-page--msg) :is(.pm-card, .nm-card):not(:is(.pm-card, .nm-card) :is(.pm-card, .nm-card)) { padding-left: max(var(--pm-card-px), calc((min(100cqw, var(--pm-page-w)) - var(--pm-read-w)) / 2)); padding-right: max(var(--pm-card-px), calc((min(100cqw, var(--pm-page-w)) - var(--pm-read-w)) / 2)); }
.pm-card { padding: 28px 24px; border-radius: var(--pm-r-panel); background: var(--pm-card); box-shadow: var(--pm-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* 페이지 직계 자식 사이의 세로 간격은 .pm-page 의 gap(--pm-gap-section) 하나로만 준다(카드가 아닌 격자·section·ul 래퍼도 똑같이 뜬다).
   그래서 직계 자식의 위아래 margin 은 0 으로 고정한다. 새 페이지에서 margin-top 으로 섹션 간격을 주지 않는다(design-rules §2-2).
   카드 안·래퍼 안에서 카드가 연달아 놓이는 곳은 아래 규칙이 --pm-gap-section 을 준다. */
html body .pm-page.pm-page > * { margin-top: 0 !important; margin-bottom: 0 !important; }
:not(.pm-page) > .pm-card ~ .pm-card { margin-top: var(--pm-gap-section); }
.pm-card--sm { border-radius: var(--pm-r-card); padding: 20px; }
.pm-eyebrow { display: inline-block; padding: 4px 12px; border-radius: var(--pm-r-pill); margin-bottom: 10px; background: var(--pm-soft); color: var(--pm-fire-deep); font-size: 13px; font-weight: 700; }
.pm-title { font-family: var(--pm-font-head); font-weight: 400; font-size: 28px; line-height: 1.25; margin: 0 0 8px; color: var(--pm-ink); }
.pm-lead { margin: 0 0 20px; color: var(--pm-sub-text); font-size: 15px; line-height: 1.7; }

/* ---------- 버튼 ---------- */
.pm-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--pm-tap); padding: 10px 22px; border: 0; border-radius: var(--pm-r-input); background: var(--pm-fire); color: var(--pm-ink); font-family: var(--pm-font-head); font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: var(--pm-shadow-sm); transition: transform .15s, background .15s; }
.pm-btn:hover { background: var(--pm-fire-hover); transform: translateY(-1px); }
.pm-btn:active { transform: none; }
.pm-btn--block { display: flex; width: 100%; }
input.pm-btn, button.pm-btn { text-align: center; -webkit-appearance: none; appearance: none; }
input.pm-btn--block { display: block; }
.pm-btn--sub { background: var(--pm-soft); color: var(--pm-ink); box-shadow: none; }
.pm-btn--sub:hover { background: var(--pm-soft2); }
.pm-btn--text { background: transparent; box-shadow: none; color: var(--pm-sub-text); font-family: var(--pm-font-body); font-size: 14px; text-decoration: underline; padding: 8px 10px; }
.pm-btn--text:hover { background: transparent; color: var(--pm-ink); transform: none; }
.pm-btn[disabled], .pm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- 입력 ---------- */
.pm-field { margin: 0 0 16px; }
.pm-field > label, .pm-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--pm-ink); }
.pm-field .pm-req { color: var(--pm-fire-deep); margin-left: 2px; }
.pm-field input[type="text"], .pm-field input[type="password"], .pm-field input[type="email"], .pm-field input[type="tel"], .pm-field input[type="url"], .pm-field input[type="number"], .pm-field input[type="date"], .pm-field select, .pm-field textarea {
  all: unset; box-sizing: border-box; display: block; width: 100%; min-height: var(--pm-tap); padding: 10px 14px;
  border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink);
  font: 16px/1.4 var(--pm-font-body); transition: border-color .15s, box-shadow .15s;
}
.pm-field textarea { min-height: 120px; }
.pm-field input:focus, .pm-field select:focus, .pm-field textarea:focus { border-color: var(--pm-water); box-shadow: 0 0 0 3px var(--pm-focus-ring); outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.pm-field input::placeholder { color: var(--pm-sub); opacity: 1; }
.pm-field input[readonly] { background: var(--pm-soft); }
.pm-field.is-error input, .pm-field.is-error select, .pm-field.is-error textarea { border-color: var(--pm-error); }
.pm-help { margin: 6px 2px 0; font-size: 13px; color: var(--pm-sub-text); line-height: 1.5; }
.pm-error { margin: 6px 2px 0; font-size: 13px; color: var(--pm-error); font-weight: 700; }
.pm-row { display: flex; gap: 8px; align-items: stretch; }
.pm-row > .pm-btn { flex: none; }

/* ---------- 체크박스 ---------- */
.pm-check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: var(--pm-tap); padding: 10px 4px; cursor: pointer; font-size: 15px; line-height: 1.5; }
.pm-check input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-check .pm-box { flex: none; width: 28px; height: 28px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-check); background: var(--pm-cream); display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.pm-check input:checked + .pm-box { background: var(--pm-wood); border-color: var(--pm-wood); }
.pm-check input:checked + .pm-box::after { content: ''; width: 7px; height: 13px; margin-top: -3px; border: solid var(--pm-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.pm-check input:focus-visible + .pm-box { outline: 3px solid var(--pm-focus); outline-offset: 2px; }


.pm-check + .pm-btn, .pm-check + .pm-btn--block { margin-top: 12px; }

/* ---------- 알림 ---------- */
.pm-alert { padding: 14px 16px; border-radius: var(--pm-r-input); margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; background: var(--pm-info-bg); color: var(--pm-info-ink); }
:not(.pm-page) > .pm-card + .pm-alert { margin-top: var(--pm-gap-section); }
.pm-alert--error { background: var(--pm-error-bg); color: var(--pm-error); }

/* ---------- 푸터 ---------- */
.pm-ft { margin-top: 24px; padding: 28px 16px 36px; background: var(--pm-soft); color: var(--pm-sub-text); text-align: center; font-size: 13.5px; }
.pm-ft-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.pm-ft-links a { color: var(--pm-ink); text-decoration: underline; display: inline-flex; align-items: center; min-height: var(--pm-tap); padding: 0 6px; }
.pm-ft p { margin: 0; }

@media (max-width: 480px) {
  .pm-page { padding: 16px 12px 40px; }
  :root { --pm-card-px: 18px; }
  .pm-card { padding: 22px 18px; border-radius: var(--pm-r-panel-sm); }
  .pm-title { font-size: 24px; }
  .pm-brand { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pm-btn { transition: none; } }

/* ---------- 자동등록방지(kcaptcha) — 전 페이지 공통 ---------- */
/* 한 줄: [숫자 그림 ······ 음성 새로고침] / 아래 줄: 입력칸 전폭(폼의 다른 입력칸과 같은 폭·왼쪽 선) / 도움말. 그림 크기·폭이 달라도 어느 화면에서든 같은 모양. */
html body #captcha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; }
html body #captcha > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body #captcha #captcha_img { grid-row: 1; grid-column: 1; justify-self: start; max-width: 100%; height: 48px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: #fff; }
html body #captcha #captcha_mp3 { grid-row: 1; grid-column: 2; }
html body #captcha #captcha_reload { grid-row: 1; grid-column: 3; }
html body #captcha #captcha_key { grid-row: 2; grid-column: 1 / -1; box-sizing: border-box; display: block; width: 100%; min-width: 0; max-width: 100%; height: var(--pm-tap); margin: 0; padding: 8px 14px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink); font: 16px var(--pm-font-body); }
html body #captcha #captcha_audio { grid-row: 4; grid-column: 1 / -1; width: 100%; }
html body #captcha #captcha_mp3,
html body #captcha #captcha_reload { width: var(--pm-tap); height: var(--pm-tap); margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--pm-soft); color: var(--pm-ink); font-size: 0; text-indent: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html body #captcha #captcha_mp3 span, html body #captcha #captcha_reload span { display: none; }
html body #captcha #captcha_mp3::before,
html body #captcha #captcha_reload::before { font: normal 18px/1 FontAwesome; }
html body #captcha #captcha_mp3::before { content: "\f028"; }
html body #captcha #captcha_reload::before { content: "\f021"; }
html body #captcha #captcha_mp3:hover, html body #captcha #captcha_reload:hover { background: var(--pm-line); }
html body #captcha #captcha_info { grid-row: 3; grid-column: 1 / -1; margin: 0; color: var(--pm-sub-text); font-size: 13px; }
html { background: var(--pm-sky-bottom); }

/* 모바일 헤더: 로고 원형 + 핵심 알약 1~2개 + "메뉴" 버튼 한 줄(2026-10-07). 나머지 링크는 아래에서 올라오는 메뉴 시트로.
   데스크톱(641px~)은 알약 전체를 그대로 보여 주고 메뉴 버튼·시트는 숨긴다. */
.pm-menu-btn { display: none; font: inherit; font-size: 13px; cursor: pointer; border: 0; }
@media (max-width: 640px) {
  .pm-hd { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0; }
  .pm-hd-in { flex-wrap: nowrap; gap: 8px; }
  .pm-hd .pm-brand { flex: none; font-size: 0; gap: 0; padding: 6px; min-width: 44px; min-height: 44px; justify-content: center; }
  .pm-hd .pm-brand img { width: 32px; height: 32px; }
  .pm-nav { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; pointer-events: auto; }
  .pm-nav .pm-pill { flex: none; min-height: 44px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .pm-nav .pm-x { display: none; }
  .pm-menu-btn { display: inline-flex; gap: 6px; padding: 0 12px; }
  .pm-menu-ic { display: block; flex: none; }
}
/* 메뉴 시트(아래에서 올라오는 링크 목록)는 palja/assets/ui/menu-sheet.css 공용(메인 3D 와 함께 쓴다) */

/* 알림 센터: 내 사주 알약 안의 안 읽은 알림 점 */
.pm-dot { display: inline-block; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--pm-fire); box-shadow: 0 0 0 2px var(--pm-card); align-self: flex-start; }

/* 한글 줄바꿈: 그누보드 default.css 의 p{word-break:break-all} 이 낱말 가운데를 끊어서 읽기 어려웠다 (2026-10-07 디자인 감수).
   낱말 단위로 줄을 바꾸고, 제목은 마지막 줄에 한 글자만 남지 않게 고르게 나눈다. 아주 긴 줄(주소 등)은 넘치지 않게 끊는다. */
body p, body li, body dd, body dt, body label, body small, body h1, body h2, body h3, body h4 { word-break: keep-all; overflow-wrap: break-word; }
body h1, body h2, body h3 { text-wrap: balance; }

/* ---------- 디자인 감수 후속 (2026-10-07) ---------- */
/* 짧은 페이지도 화면을 채워 바닥(크림 영역)이 중간에서 끊기지 않게: 푸터를 아래로 민다 */
html body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
html body #wrapper { flex: 1 0 auto; }

/* 카드 머리글 공용 규칙: 카드 맨 위의 알약(eyebrow)·제목·한 줄 설명은 항상 왼쪽 정렬 */
.pm-card > .pm-eyebrow, .pm-card > .pm-title, .pm-card > .pm-lead, .pm-card > div > .pm-eyebrow, .pm-card > div > .pm-title, .pm-card > div > .pm-lead { text-align: left; }
/* 알약(eyebrow)은 inline-block 이라 부모가 text-align:center 면 가운데로 갔다(제목은 왼쪽, 배지만 가운데). display:table 은 블록이라 부모 정렬과 무관하게 왼쪽에 놓인다.
   페이지 CSS 의 .me-hero .pm-title { text-align:center } 같은 한 단계 센 규칙도 이기도록 html body 로 올렸다. */
html body .pm-card > .pm-eyebrow, html body .pm-card > div > .pm-eyebrow { display: table; margin-left: 0; margin-right: auto; }
html body .pm-card > .pm-title, html body .pm-card > .pm-lead, html body .pm-card > div > .pm-title, html body .pm-card > div > .pm-lead { text-align: left; }
/* 머리 카드(알약이 맨 앞인 카드)의 글줄·칩 줄은 전부 왼쪽 시작: 배지는 왼쪽인데 요약 글만 가운데로 흩어지던 것을 한 규칙으로 */
html body .pm-card:has(> .pm-eyebrow) > :is(h1, h2, h3, p, ul, nav) { text-align: left; justify-content: flex-start; margin-left: 0; margin-right: auto; }

/* 안내(로그인·오류) 카드: 왼쪽 정렬 머리글 + 화면 세로 가운데 */
.pm-page--msg { justify-content: center; min-height: calc(100vh - 280px); min-height: calc(100dvh - 280px); padding-bottom: 80px; }
.pm-msg-card .pm-msg-logo { display: block; margin: 0 0 12px; }

/* 접근성: 동작 줄이기를 켠 사용자에게는 모든 화면의 움직임·부드러운 스크롤을 끈다(상태 변화는 그대로 즉시 반영) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* 게시판(모든 스킨) 터치 영역 44px: 검색 돋보기 버튼·임시 저장 글 버튼이 작았다(실측 19x20·130x36) */
#gw-bo-list .search-container .sch_btn { display: inline-flex; align-items: center; justify-content: center; right: 4px; min-width: var(--pm-tap, 44px); min-height: var(--pm-tap, 44px); padding: 0; border: 0; background: transparent; cursor: pointer; }
#autosave_wrapper .gw-btn03, #gw-bo-w .gw-btn03 { min-height: var(--pm-tap, 44px); }

/* 그누보드 필수 표시(입력칸 오른쪽 위 빨간 점 이미지)는 라벨의 * 와 겹쳐 지저분해 끈다. 필수는 라벨 * + required/aria-required 로만 알린다(2026-10-08). */
html body .required, html body textarea.required, html body input.required { background-image: none !important; }

/* ---------- 단일 목적 화면(인증·계정): 로그인·가입·계정 찾기·비밀번호 확인·재설정 (2026-10-08) ----------
   카드 폭 --pm-auth-w(520). 카드는 가운데, 머리(로고·배지·제목·설명)·링크 줄은 가운데 정렬, 폼은 카드 안 전폭, 주 버튼 전폭.
   (일반 페이지의 960 틀·왼쪽 정렬 머리 규칙의 예외. 근거: 03-결정기록 "단일 목적 화면 폭", design-rules §1-4) */
.pm-page.pm-page.pm-page--auth > * { max-width: var(--pm-auth-w); }
.pm-page--auth { min-height: auto; padding-top: 32px; }
.pm-page--auth:not(.pm-page--wide) .pm-card:not(.pm-card .pm-card) > * { max-width: none; }
html body .pm-page--auth .pm-card { padding: 32px 28px; }
html body .pm-page--auth .pm-card .pm-eyebrow { display: table; margin-left: auto; margin-right: auto; }
html body .pm-page--auth .pm-card :is(.pm-title, .pm-lead), html body .pm-page--auth .pm-card:has(> .pm-eyebrow) > :is(h1, h2, h3, p.pm-lead) { text-align: center; margin-left: auto; margin-right: auto; }
html body .pm-page--auth .pm-card .pm-lead { margin-bottom: 22px; }
html body .pm-page--auth .pm-login-head .pm-lead { margin-bottom: 0; }
.pm-page--auth .pm-login-logo img, .pm-page--auth img.pm-login-logo { margin-left: auto; margin-right: auto; }
.pm-page--auth form .pm-btn--block { margin-top: 8px; }
/* 링크 줄: 로그인의 [찾기·가입], 계정 찾기의 [로그인으로], 가입 취소 모두 같은 줄 모양(가운데, 같은 간격) */
html body .pm-page--auth .pm-login-links, html body .pm-page--auth .pm-acc-links { margin: 14px 0 0; padding: 0; text-align: center; font-size: 14px; }
.pm-page--auth #sns_login, .pm-page--auth #sns_register { text-align: center; }
@media (max-width: 480px) { html body .pm-page--auth .pm-card { padding: 26px 18px; } }

/* ---------- 그누보드 일반 화면: 검색·새글·FAQ 스킨을 팔자마을 톤으로 (2026-10-08) ----------
   그누위즈 원본의 회색 바탕(#f8f8f8)·검정 굵은 선·파란 글자·1200 폭을 크림 카드·--pm-line·960 틀로 맞춘다. 게시판(gw_basic·gw_gallery)은 각 스킨 CSS 가 이미 맞춰 둠. */
html body #container { background: transparent; padding-bottom: 72px; }
html body #gw-all-search.gw-bbs-con, html body #gw-new_sch.gw-bbs-con, html body #faq_sch, html body #sch_result, html body #gw-faq-wrap, html body .gw-bbs-con { box-sizing: border-box; width: 100%; max-width: var(--pm-page-w); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
html body #gw-all-search .search-container, html body #gw-new_sch .search-container, html body #faq_sch .faq-search-container { box-sizing: border-box; width: 100%; max-width: 720px; padding: 28px 0 20px; gap: 10px; }
html body :is(#gw-all-search, #gw-new_sch, #faq_sch) :is(.sch_input, .frm_input, select) { box-sizing: border-box; min-height: var(--pm-tap); height: 52px; padding: 8px 16px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink); font: 16px var(--pm-font-body); }
html body :is(#gw-all-search, #gw-new_sch, #faq_sch) :is(.sch_input, .frm_input, select):focus { border-color: var(--pm-focus); outline: 3px solid var(--pm-focus); outline-offset: 1px; }
html body :is(.switch_field, .gw-tabs, #bo_cate ul) { background: var(--pm-soft); border-radius: var(--pm-r-card); }
html body .gw-box02 { background: var(--pm-soft); border-radius: var(--pm-r-card); color: var(--pm-ink); }
html body .switch_field label { min-height: var(--pm-tap); box-sizing: border-box; border-radius: var(--pm-r-pill); color: var(--pm-sub-text); }
html body .switch_field input:checked + label, html body .gw-tabs > li > a.active { background: var(--pm-fire); color: var(--pm-ink); font-weight: 700; box-shadow: var(--pm-shadow-sm); }
html body #sch_result, html body #gw-faq-wrap { border-top: 0; }
html body .empty_list { padding: 36px 16px; text-align: center; }
html body .empty_list > h3, html body .empty_list h3 { font-family: var(--pm-font-head); font-weight: 400; font-size: 22px; color: var(--pm-ink); }
html body .empty_list p { color: var(--pm-sub-text); }
html body #sch_res_board a { min-height: var(--pm-tap); display: inline-flex; align-items: center; box-sizing: border-box; border: 2px solid var(--pm-line); color: var(--pm-ink); background: var(--pm-cream); }
html body #sch_res_board a:hover { background: var(--pm-soft); color: var(--pm-ink); border-color: var(--pm-line); }
html body #sch_res_board .sch_on { background: var(--pm-fire); color: var(--pm-ink); border-color: var(--pm-fire); }
html body .sch_res_list li { border: 2px solid var(--pm-line); border-radius: var(--pm-r-card); background: var(--pm-cream); }
html body .sch_res_list ul { border-top: 0; }
html body .sch_more { color: var(--pm-info-ink); }
html body .pg_current { border-bottom: 3px solid var(--pm-fire); color: var(--pm-ink); }
html body .pg_page, html body .pg_current { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pm-tap); min-height: var(--pm-tap); height: auto; }
html body .pg_page { color: var(--pm-sub-text) !important; }
html body #gw-faq-con > ul > li { border-bottom: 1px solid var(--pm-line); }
html body #gw-faq-con .con_inner { background: var(--pm-soft); color: var(--pm-ink); }
html body #gw-faq-con > ul > li > a { font-family: var(--pm-font-body); font-weight: 700; }
html body #gw-faq-con > ul > li .faq-arrow.active { color: var(--pm-ink); }
@media (max-width: 480px) { html body #gw-all-search .search-container, html body #gw-new_sch .search-container { flex-wrap: wrap; } }
html body :is(#gw-all-search, #gw-new_sch) .search-container { max-width: 880px; }
html body :is(#gw-all-search, #gw-new_sch, #faq_sch) select { padding: 0 36px 0 16px; line-height: 1.2; text-overflow: ellipsis; }
html body .gw-tabs { padding: 8px; }
html body .gw-tabs > li, html body .gw-tabs > li > a { border-radius: var(--pm-r-pill); }
html body .gw-tabs > li > a { display: flex; align-items: center; justify-content: center; min-height: var(--pm-tap); font-family: var(--pm-font-body); }
/* 버튼(그누위즈 gw-btn*): 모든 스킨에서 .pm-btn 톤(살구 보조·코랄 주). 게시판 스킨이 이미 같은 값을 쓰는 곳은 그대로다. */
html body .gw-btn01, html body .gw-btn0102 { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: var(--pm-tap); height: auto; line-height: 1.2; padding: 10px 22px; border: 0; border-radius: var(--pm-r-input); background: var(--pm-soft); color: var(--pm-ink); font-family: var(--pm-font-head); font-weight: 400; font-size: 17px; text-transform: none; text-decoration: none; cursor: pointer; overflow: visible; box-shadow: none; }
html body .gw-btn01::before { display: none; }
html body .gw-btn01:hover { background: var(--pm-soft2); color: var(--pm-ink); border-color: transparent; }
html body .gw-btn0102 { background: var(--pm-fire); box-shadow: var(--pm-shadow-sm); }
html body .gw-btn02 { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--pm-tap); border-radius: var(--pm-r-input); background: var(--pm-soft2); color: var(--pm-ink); font-family: var(--pm-font-head); cursor: pointer; }
html body .empty_table { color: var(--pm-sub-text); text-align: center; }
html body #container :is(th, .tbl_head01 thead th) { border-top-color: var(--pm-line); border-bottom-color: var(--pm-line); }
html body :is(#gw-all-search, #gw-new_sch, #faq_sch) .search-container > * { flex: 1 1 260px; width: auto; min-width: 0; }
html body :is(#gw-all-search, #gw-new_sch) .search-container > :first-child { flex: 1 1 300px; }
html body .bo_sch :is(select, .sch_input, .frm_input) { box-sizing: border-box; min-height: var(--pm-tap); border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink); font: 16px var(--pm-font-body); }
html body .gw-tabs > li.active, html body .gw-tabs > li.on, html body .gw-tabs > li:has(> a.active) { background: var(--pm-fire); }
html body #container table { border-color: var(--pm-line); }

/* 읽기형 페이지(2026-10-08): 카드 밖 직계 요소(폼 하단 버튼 줄·알림 등)도 같은 읽기 열에 선다. 카드 안 내용과 좌우 선이 같다. */
.pm-page:not(.pm-page--wide):not(.pm-page--auth):not(.pm-page--msg) > :not(.pm-card):not(.nm-card):not(link):not(script):not(style):not(:has(.pm-card, .nm-card)) { max-width: var(--pm-read-w); }
/* 같이 보면 좋아요(palja/me/_related.php)는 .pm-page 밖의 같은 960 틀 카드다. 읽기형 화면 아래에서는 안쪽 여백을 같게 해 글 시작선을 맞춘다. */
body:has(.pm-page:not(.pm-page--wide):not(.pm-page--auth):not(.pm-page--msg)) .rl-card { padding-left: max(var(--pm-card-px), calc((min(100cqw, var(--pm-page-w)) - var(--pm-read-w)) / 2)); padding-right: max(var(--pm-card-px), calc((min(100cqw, var(--pm-page-w)) - var(--pm-read-w)) / 2)); }

/* 카드가 가로로 나란히 놓이는 격자(풍수 방·소품, 부적 만들기)에서는 형제 간격 margin 을 빼서 윗선이 같다(2026-10-08: 오른쪽 카드가 16px 내려앉던 것). */
.fg-cards > .pm-card.pm-card, .fg-items > .pm-card.pm-card, .wt-grid > .pm-card.pm-card { margin-top: 0; }

/* 카드 없이 하늘 위에 놓이던 머리(친구·서신함·기록·캐릭터 꾸미기)를 머리 카드와 같은 모양으로(design-rules §2-1). */
.pm-page > .me-top, .pm-page > .av-head { box-sizing: border-box; padding: 28px 24px; border-radius: var(--pm-r-panel); background: var(--pm-card); box-shadow: var(--pm-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pm-page > .me-top { align-items: center; }
.pm-page > .me-top .pm-title, .pm-page > .av-head .pm-title { text-align: left; }
@media (max-width: 480px) { .pm-page > .me-top, .pm-page > .av-head { padding: 22px 18px; border-radius: var(--pm-r-panel-sm); } }