/* Grace 50+ 화면 스타일 — 색은 아래 M3 역할 토큰으로만 쓴다(htdocs/grace50plus/design-rules-m3.md, Lee님 확정 2026-10-11)
   범위 Grace 50+ · 본문 대비 7:1(AAA) · 표준 대비 1단계·라이트만 · 목록은 baseline
   배경 #fcf2f2·#f1f1f1 은 Lee님 지정, 글꼴·글자색은 마이니치 신문(mainichi.jp) 기준.
   대비 실측(WCAG, 10/11): primary 7.47(배경)/7.26(구역)·흰 글자 8.21, on-surface-variant 8.33/8.10, outline 4.07/3.96, on-primary-container 9.44
   톤(L*) 대조 — M3 baseline(https://m3.material.io/styles/color/static/baseline) 과 같은 단계: on-surface-variant 30, outline 50, container 90대, outline-variant 80, inverse-surface 20.
   일부러 다른 것: primary 톤 34(기본 40 이면 7:1 미달), surface #fcf2f2 톤 96(Lee님 지정, 기본 98) */
:root {
    /* 색 역할 (M3 이름 그대로) — 짝: X 위 글자는 on-X 만 */
    --md-sys-color-primary: #7a3e30;                 /* 강조·채움 버튼·링크. 예전 #a8624e 는 배경 위 글자 4.23 으로 미달 */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #f7e3e3;       /* 마우스 올림 채움·표 머리. 글자·아이콘에 쓰지 않음 */
    --md-sys-color-on-primary-container: #5c2a1f;
    --md-sys-color-surface: #fcf2f2;                 /* 기본 배경 (Lee님 지정) */
    --md-sys-color-surface-container: #f1f1f1;       /* 구역 구분 배경 (Lee님 지정) */
    --md-sys-color-surface-container-lowest: #ffffff;/* 입력칸·카드 */
    --md-sys-color-on-surface: #222222;              /* 제목 (마이니치 제목색) */
    --md-sys-color-on-surface-variant: #484848;      /* 본문·보조 글자 (마이니치 본문색). 예전 보조색 #5a5a5a 는 6.1 로 7:1 미달 → 통일 */
    --md-sys-color-outline: #857373;                 /* 중요한 경계: 입력칸·취소 버튼 (3:1 이상) */
    --md-sys-color-outline-variant: #cfc4c4;         /* 장식: 구분선. M3 기본 톤 80 에 맞춤(예전 #e5e5e5 는 톤 91 로 너무 연함) */
    --md-sys-color-inverse-surface: #322f2f;         /* 업체 상담 구역·선택된 언어 버튼. M3 기본 톤 20 */
    --md-sys-color-inverse-on-surface: #f1f1f1;
    /* 오류: M3 기본(baseline) 고정값 그대로. error 글자는 배경 위 5.95 로 7:1 미달 → 오류 문구는 error-container 바탕 + on-error-container 글자(7.17)로만 */
    --md-sys-color-error: #b3261e;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #f9dedc;
    --md-sys-color-on-error-container: #8c1d18;
    --md-sys-color-shadow: #000000;
    /* 상태 레이어 (M3: 마우스 올림 8%) */
    --grace-state-hover: 8%;
    --grace-primary-hover: color-mix(in srgb, var(--md-sys-color-on-primary) var(--grace-state-hover), var(--md-sys-color-primary));

    /* 글꼴·간격 */
    --g-serif-latin: 'Cormorant Garamond', serif; /* 로고 'Grace 50+' 전용 */
    /* 마이니치와 같은 기기 내장 일본어 고딕(웹폰트 없음). 한글은 뒤쪽 한국어 글꼴로 */
    --g-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', Meiryo, 'Yu Gothic UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --g-serif: var(--g-sans); /* 예전 제목용 명조 토큰. 모두 고딕으로 통일하면서 같은 값으로 둠 */
    --g-radius: 2px;
    --g-gutter: clamp(16px, 4vw, 40px);
    --g-section: clamp(56px, 8vw, 112px);
    --g-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body { background: var(--md-sys-color-surface); }
#hd_login_msg { display: none; } /* 그누보드 기본 '로그인 중' 문구(한국어) 대신 헤더 링크로 상태를 보여 준다 */

.grace { color: var(--md-sys-color-on-surface-variant); font-family: var(--g-sans); font-size: 16px; line-height: 1.75; background: var(--md-sys-color-surface); }
.grace *, .grace *::before, .grace *::after { box-sizing: border-box; }
.grace a { color: inherit; text-decoration: none; }
.grace img { max-width: 100%; height: auto; display: block; }
.grace ul, .grace ol { margin: 0; padding: 0; list-style: none; }
.grace h1, .grace h2, .grace p { margin: 0; }
/* 테마 default.css 의 p { word-break: break-all } 이 영어 단어를 "manage/ment" 로 자르던 것을 되돌림. 한국어는 어절 단위 */
.grace p, .grace li { word-break: normal; overflow-wrap: break-word; }
.grace:lang(ko) p, .grace:lang(ko) li { word-break: keep-all; }
.g-wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--g-gutter); }

/* 헤더 */
.g-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.g-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.g-logo { font-family: var(--g-serif-latin); font-size: 30px; font-weight: 600; color: var(--md-sys-color-primary); letter-spacing: 0.01em; line-height: 1; }
.g-logo { gap: 0.25em; } /* inline-flex 로 바꾸며 'Grace 50+' 사이 공백이 사라져 'Grace50+' 로 붙던 것(휴대폰 캡처 실측) */
.g-logo span { font-style: italic; }
.g-logo-sm { font-size: 24px; margin-bottom: 8px; }
.g-util { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.g-lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px; background: var(--md-sys-color-surface-container-lowest); }
.g-lang a { display: block; padding: 4px 12px; border-radius: 999px; color: var(--md-sys-color-on-surface-variant); transition: background var(--duration, 150ms), color 150ms; }
.g-lang a:hover { color: var(--md-sys-color-on-surface); }
.g-lang a[aria-current="true"] { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }
.g-link { color: var(--md-sys-color-on-surface-variant); border-bottom: 1px solid transparent; transition: color 150ms, border-color 150ms; }
.g-link:hover { color: var(--md-sys-color-primary); border-color: currentColor; }

/* 버튼 */
.g-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 1px solid var(--md-sys-color-primary); border-radius: 999px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary) !important; font-weight: 500; letter-spacing: 0.04em; transition: transform 300ms var(--g-ease), background 150ms, box-shadow 300ms var(--g-ease); }
.g-btn:hover { background: var(--grace-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent); }
.g-btn:active { transform: translateY(0); box-shadow: none; }
.g-btn:focus-visible, .g-lang a:focus-visible, .g-cats a:focus-visible, .g-posts a:focus-visible, .g-link:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 3px; } /* 포커스: 금색(2.55:1 미달) → primary */
.g-btn-sm { min-height: 48px; padding: 0 20px; }
.g-btn-ghost { background: transparent; color: var(--md-sys-color-primary) !important; }
.g-btn-ghost:hover { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container) !important; }
.g-btn-light { background: var(--md-sys-color-surface); border-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface) !important; }
.g-btn-light:hover { background: var(--md-sys-color-surface-container-lowest); }

/* 첫 화면 */
.g-hero { padding: clamp(48px, 7vw, 96px) 0 var(--g-section); }
.g-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.g-eyebrow { font-size: 13px; letter-spacing: 0.12em; color: var(--md-sys-color-primary); margin-bottom: 20px; }
.g-display { font-family: var(--g-serif); font-weight: 600; color: var(--md-sys-color-on-surface); font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem); line-height: 1.2; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; } /* 「あなた」가 「あな/た」로 끊기던 것 방지, 문장부호에서만 줄바꿈 */
.g-lead { margin-top: 24px; max-width: 34em; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--md-sys-color-on-surface-variant); }
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.g-hero-figure { position: relative; margin: 0; }
.g-hero-figure::before { content: ''; position: absolute; inset: 24px -18px -18px 24px; border: 1px solid var(--md-sys-color-outline); z-index: 0; } /* 장식선: 금색 → outline */
.g-hero-figure img { position: relative; z-index: 1; width: 100%; aspect-ratio: 426 / 300; object-fit: cover; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent); }

/* 구역 공통 */
.g-section { padding: var(--g-section) 0; }
.g-section-tint { background: var(--md-sys-color-surface-container); border-top: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.g-title { font-family: var(--g-serif); font-weight: 600; color: var(--md-sys-color-on-surface); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.3; margin-bottom: 32px; }
.g-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* 분야 6개: 번호 + 영문 이름(세리프) + 언어별 설명 */
.g-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--md-sys-color-on-surface); }
.g-cats li { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.g-cats li:nth-child(3n+2), .g-cats li:nth-child(3n+3) { border-left: 1px solid var(--md-sys-color-outline-variant); }
.g-cats a { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 28px 24px; transition: background 300ms var(--g-ease); }
.g-cats a:hover { background: var(--md-sys-color-primary-container); }
.g-cat-no { grid-row: span 2; font-family: var(--g-sans); font-size: 13px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); padding-top: 6px; } /* 번호 글자: 금색(글자 미달) → 본문색 */
.g-cat-name { font-family: var(--g-sans); font-size: 22px; font-weight: 600; color: var(--md-sys-color-on-surface); letter-spacing: 0.08em; line-height: 1.2; transition: color 150ms; }
.g-cats a:hover .g-cat-name { color: var(--md-sys-color-on-primary-container); } /* primary-container 위 글자 짝 */
.g-cat-desc { font-size: 14px; color: var(--md-sys-color-on-surface-variant); }

/* 새 글 */
.g-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.g-posts a { display: block; }
.g-post-img { display: block; aspect-ratio: 4 / 5; background: var(--md-sys-color-surface-container); overflow: hidden; margin-bottom: 12px; }
.g-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--g-ease); }
.g-posts a:hover .g-post-img img { transform: scale(1.04); }
.g-post-cat { display: block; font-family: var(--g-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--md-sys-color-primary); }
.g-post-title { display: block; font-weight: 500; line-height: 1.5; }
.g-post-meta { display: block; font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.g-empty { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px; border: 1px dashed var(--md-sys-color-primary); background: var(--md-sys-color-surface); }
.g-empty p { font-family: var(--g-serif); font-size: 1.15rem; }

/* 올리는 방법 + 약속 */
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.g-steps { counter-reset: step; }
.g-steps li { counter-increment: step; display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); font-size: 1.05rem; }
.g-steps li::before { content: counter(step); flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--md-sys-color-primary); color: var(--md-sys-color-primary); font-family: var(--g-sans); font-size: 17px; font-weight: 500; }
.g-rules { padding: 32px; background: var(--md-sys-color-surface-container-lowest); border-left: 3px solid var(--md-sys-color-primary); }
.g-rules .g-title { margin-bottom: 20px; }
.g-rules li { position: relative; padding-left: 20px; margin-bottom: 12px; color: var(--md-sys-color-on-surface-variant); font-size: 15px; }
.g-rules li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--md-sys-color-primary); }

/* 업체 상담 */
.g-partner { padding: var(--g-section) 0; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }
.g-partner .g-title { color: var(--md-sys-color-inverse-on-surface); }
.g-partner p { color: var(--md-sys-color-inverse-on-surface); max-width: 36em; }
.g-partner-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.g-partner-side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.g-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.g-tags li { padding: 6px 16px; border: 1px solid var(--md-sys-color-inverse-on-surface); border-radius: 999px; font-size: 14px; } /* inverse-surface 위라 outline 은 2.97 → inverse-on-surface */

/* 하단 */
.g-footer { padding: 48px 0 64px; font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.g-footer p { margin-bottom: 8px; }
.g-biz { font-size: 13px; line-height: 1.8; }

/* 로그인 카드 (bbs/login.php 는 헤더 없이 단독 화면) */
.g-auth { min-height: 100vh; display: grid; place-items: center; padding: 48px var(--g-gutter); }
.g-auth-card { width: 100%; max-width: 400px; padding: 40px 36px; background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent); display: flex; flex-direction: column; gap: 18px; }
.g-auth-card .g-logo { align-self: center; }
.g-auth-card .g-title { margin: 8px 0 4px; text-align: center; font-size: 1.5rem; }
.g-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.g-field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--g-radius); background: var(--md-sys-color-surface); font: inherit; font-size: 16px; color: var(--md-sys-color-on-surface); }
.g-field input:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: 1px; background: var(--md-sys-color-surface-container-lowest); }
.g-check { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.g-auth-card .g-btn { width: 100%; }
.g-auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.g-auth-links .g-link { display: inline-flex; align-items: center; min-height: 48px; }

/* 가입·정보수정 등 회원 화면: 기본 회원 스킨 위에 Grace 글꼴·색만 입힌다 */
.g-board .g-form-page, .g-board #register_form, .g-board #reg_result { max-width: 720px; margin: 48px auto; }
.g-board #fregister h2, .g-board #register_form h2, .g-board #reg_result h2 { font-family: var(--g-serif); font-size: 1.25rem; margin: 32px 0 12px; }
.g-board #fregister textarea { width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface-container-lowest); font: inherit; font-size: 14px; }
.g-board #fregister table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
.g-board #fregister th, .g-board #fregister td { border: 1px solid var(--md-sys-color-outline-variant); padding: 10px; text-align: left; vertical-align: top; }
.g-board #fregister th { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.g-board .btn_confirm { margin: 32px 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.g-board .btn_submit { min-height: 48px; padding: 0 28px; border: 1px solid var(--md-sys-color-primary); border-radius: 999px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 500; cursor: pointer; }
.g-board .btn_submit:hover { background: var(--grace-primary-hover); }
.g-board .btn_cancel { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border: 1px solid var(--md-sys-color-outline); border-radius: 999px; }

/* 투고 게시판 스킨(skin/board/grace/style.css, 그누보드 갤러리 원본)의 색을 M3 역할로 덮는다.
   AAA 점검(10/11 실측)에서 원본 색이 미달: 파랑 #3497d9 3.15, 회색 #777 4.14·#888 3.54, 분홍 #ed6478 3.14.
   또 .grace a{color:inherit} 가 버튼 흰 글자를 덮어 어두운 바탕에 어두운 글자(1.16)가 됐던 것도 여기서 바로잡는다.
   원본이 ID 선택자(#bo_gall a.btn_b01 등)라 같은 ID 앞에 .g-board 를 붙여 우선한다. 관리자 전용 버튼(.btn_admin)은 범위 밖 */
.g-board { color: var(--md-sys-color-on-surface-variant); }
/* 버튼: 주 행동 = 채움(primary), 나머지 = 테두리형(outline 테두리 + primary 글자) — M3 filled / outlined */
.g-board #bo_gall a.btn_b02, .g-board #bo_v a.btn_b02, .g-board #bo_w .btn_submit, .g-board #bo_vc_w .btn_submit, .g-board #bo_sch .sch_btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; height: auto; line-height: 1.2; padding: 0 20px;
    border: 1px solid var(--md-sys-color-primary); border-radius: 999px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.g-board #bo_gall a.btn_b02:hover, .g-board #bo_v a.btn_b02:hover, .g-board #bo_w .btn_submit:hover, .g-board #bo_vc_w .btn_submit:hover, .g-board #bo_sch .sch_btn:hover {
    background: var(--grace-primary-hover); color: var(--md-sys-color-on-primary); }
.g-board #bo_gall a.btn_b01, .g-board #bo_v a.btn_b01, .g-board #bo_w .btn_cancel {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; height: auto; line-height: 1.2; padding: 0 20px;
    border: 1px solid var(--md-sys-color-outline); border-radius: 999px; background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-primary); }
.g-board #bo_gall a.btn_b01:hover, .g-board #bo_v a.btn_b01:hover, .g-board #bo_w .btn_cancel:hover {
    background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
/* 분야 버튼(M3 filter chip): 고른 것 = primary, 나머지 = 테두리형. 누르는 영역 48 */
.g-board #bo_cate a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px;
    background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface-variant); }
.g-board #bo_cate a:hover, .g-board #bo_cate a:focus { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.g-board #bo_cate #bo_cate_on { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
/* 카드·글 보기의 분야 표시, 댓글 수 */
.g-board .bo_cate_link, .g-board #bo_gall .bo_cate_link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 999px;
    background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container) !important; } /* 원본이 color:#3598db !important 라 같은 수준으로 덮음(2.56 실측) */
.g-board #bo_v_title .bo_v_cate { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.g-board #bo_gall .bo_tit .cnt_cmt, .g-board #bo_list .cnt_cmt { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
/* 날짜·조회 등 보조 글자: 회색(#777·#888·#666) → on-surface-variant */
.g-board #bo_gall .gall_info, .g-board #bo_gall .gall_info strong, .g-board #bo_gall .gall_info .gall_date,
.g-board #bo_v_info, .g-board #bo_v_info strong, .g-board #bo_v_info .if_date,
.g-board #bo_v .nb_date, .g-board #bo_vc_empty, .g-board #bo_vc .bo_vc_hdinfo { color: var(--md-sys-color-on-surface-variant); }
.g-board #bo_v .nb_tit, .g-board .cmt_btn { color: var(--md-sys-color-primary); }
.g-board #bo_list_total, .g-board #bo_list_total span { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
.g-board #bo_gall .gall_img .no_image { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }

/* 글 보기·글쓰기의 작은 누르는 영역 → 48 (점검 도구 실측: 좋아요 21, 保存 32, 이전·다음 글 21, コメント 45, 下書き 30, html 체크 13) */
.g-board #bo_v_act a, .g-board #bo_v_act .bo_v_good { min-width: 72px; min-height: 72px; }
.g-board #bo_v_share .btn { display: inline-flex; align-items: center; min-height: 48px; height: auto; line-height: 1.2; padding: 0 16px 0 0;
    border: 1px solid var(--md-sys-color-outline); border-radius: 999px; background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface-variant); }
.g-board #bo_v_share .btn i { background: transparent; color: var(--md-sys-color-on-surface-variant); }
.g-board #bo_v .bo_v_nb li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 0 16px 0 16px; border-color: var(--md-sys-color-outline-variant); }
.g-board #bo_v .bo_v_nb li a { display: inline-flex; align-items: center; min-height: 48px; flex: 1; color: var(--md-sys-color-on-surface); }
.g-board #bo_v .bo_v_nb li:hover { background: var(--md-sys-color-primary-container); }
.g-board #bo_v .bo_v_nb li:hover a, .g-board #bo_v .bo_v_nb li:hover .nb_tit, .g-board #bo_v .bo_v_nb li:hover .nb_date { color: var(--md-sys-color-on-primary-container); }
.g-board .cmt_btn { min-height: 48px; }
.g-board #bo_w a.btn_frmline, .g-board #bo_w button.btn_frmline { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
    border: 1px solid var(--md-sys-color-outline); border-radius: 999px; background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-primary); }
.g-board #bo_w input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--md-sys-color-primary); }
.g-board #bo_w input[type=checkbox] + label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px 0 6px; }

.g-board #bo_v_info a { display: inline-flex; align-items: center; min-height: 48px; } /* 댓글 수 링크 21 → 48 */
.g-check input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--md-sys-color-primary); }
/* 약관 동의(skin/member/grace/style.css 원본): 분홍 안내문 #c7254e 5.01, 표 회색 #666 5.74, 체크 영역 28 → M3 역할·48 */
.g-board #fregister p { color: var(--md-sys-color-on-surface-variant); background: transparent; }
.g-board #fregister td, .g-board #fregister th { color: var(--md-sys-color-on-surface-variant); }
.g-board #fregister th { color: var(--md-sys-color-on-primary-container); }
.g-board #fregister input[type=checkbox], .g-board #register_form input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--md-sys-color-primary); }
.g-board #fregister label, .g-board #register_form .frm_label { display: inline-flex; align-items: center; min-height: 48px; }

/* 가입 입력 화면: 안내문 파랑 #3497d9 3.19, 취소 버튼 회색 바탕 3.09, 캡차 버튼 40 → M3 역할·48 */
.g-board .frm_info, .g-board #register_form .frm_info { color: var(--md-sys-color-on-surface-variant); }
.g-board .btn_confirm .btn_cancel, .g-board .btn_confirm a.btn_cancel, .g-board #fregisterform .btn_confirm .btn_cancel { /* 원본 #fregisterform … 이 ID 선택자 */ background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-primary); }
.g-board .btn_confirm .btn_cancel:hover, .g-board #fregisterform .btn_confirm .btn_cancel:hover { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.grace #captcha #captcha_mp3, .grace #captcha #captcha_reload { min-height: 48px; min-width: 48px; }

/* 약관·처리방침 공개 페이지(terms.php)·하단 링크 */
.g-doc { max-width: 760px; margin: 48px auto; }
.g-doc-text { white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; font-family: var(--g-sans); font-size: 16px; line-height: 1.9;
    color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); padding: 32px; margin: 0; }
.g-footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }

.g-board .g-leave { margin: 8px 0 48px; text-align: center; } /* 회원정보 수정 화면 맨 아래 탈퇴 링크 */

/* 비밀번호 재확인(bbs/member_confirm.php — 단독 화면) */
.g-auth-card#mb_confirm fieldset { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.g-auth-card#mb_confirm .frm_input { min-height: 48px; padding: 0 14px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--g-radius); font-size: 16px; }
.g-auth-card#mb_confirm .btn_submit { min-height: 48px; border: 0; border-radius: 999px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 500; cursor: pointer; }
.g-auth-card#mb_confirm .btn_submit:hover { background: var(--grace-primary-hover); }
.g-auth-card#mb_confirm p, .g-auth-card#mb_confirm .confirm_id, .g-auth-card#mb_confirm #mb_confirm_id { color: var(--md-sys-color-on-surface-variant); }
.g-auth-card#mb_confirm p strong { display: block; color: var(--md-sys-color-on-surface); font-size: 1.1rem; } /* 원본 파랑 #3ca1ff 2.72 미달 */

/* 태블릿·휴대폰 */
@media (max-width: 960px) {
    .g-hero-grid, .g-two, .g-partner-grid { grid-template-columns: 1fr; }
    .g-hero-figure { max-width: 520px; }
    .g-posts { grid-template-columns: repeat(2, 1fr); }
    .g-cats { grid-template-columns: repeat(2, 1fr); }
    .g-cats li:nth-child(n) { border-left: 0; }
    .g-cats li:nth-child(2n) { border-left: 1px solid var(--md-sys-color-outline-variant); }
}
/* 누르는 영역 48×48 (M3 목록·버튼 기준, htdocs/grace50plus/design-rules-m3.md). 예전 모바일 기준 40px 보다 엄격해 화면 크기와 관계없이 적용.
   실측(10/11 점검 도구): 언어 버튼 33, 로그아웃 25, '모두 보기' 29, 작은 버튼 40 → 48 */
.g-logo, .g-lang a, .g-util > .g-link, .g-title-row .g-link, .g-auth-links .g-link, .g-footer .g-link { display: inline-flex; align-items: center; min-height: 48px; }
.g-btn-sm { min-height: 48px; }
.g-check { min-height: 48px; }
/* 모바일 메뉴 기준(Lee님 2026-09-15): 720px 이하 글자 15px (터치 높이는 위 48 규칙이 우선) */
@media (max-width: 720px) {
    .g-util { font-size: 15px; }
    .g-lang a, .g-util > .g-link { display: inline-flex; align-items: center; min-height: 48px; } /* 예전 40 → M3 48 (뒤에 있어 위 48 규칙을 덮던 것, 실측) */
    .g-lang a { padding: 0 14px; }
}
@media (max-width: 560px) {
    .g-header-row { padding-top: 10px; padding-bottom: 10px; }
    .g-util { gap: 12px; width: 100%; justify-content: space-between; }
    .g-cats { grid-template-columns: 1fr; }
    .g-cats li:nth-child(2n) { border-left: 0; }
    .g-cats a { padding: 22px 8px; }
    .g-hero-figure::before { inset: 16px -10px -10px 16px; }
    .g-empty { padding: 28px 20px; }
    .g-rules { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .grace * { transition: none !important; }
}