@charset "utf-8";

/* ============================================================================
   placehazy 브랜드 스킨 — 시각 아이덴티티 (brand-guide §5, 라이트 테마)
   - runwayml 라이트 테마 각색: 종이/잉크, 그림자 금지, 둥근 알약 금지, 단일 서체
   - 이 파일은 head.def.php 에서 custom.css 다음에 로드된다.
   - @font-face 와 :root 토큰은 "전역 정의"(다른 영역에서도 재사용 가능).
     단, 이번 작업의 실제 시각 변경은 NAV(.ph-nav) 스코프에 한정한다.
   ============================================================================ */

/* ── 브랜드 서체: 리디바탕(Ridibatang) — 단일 굵기(normal) woff ─────────────── */
@font-face {
    font-family: 'Ridibatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* ── 브랜드 팔레트 토큰(전역 정의) — 순백 배경 + 잉크 (phase 05, 재작업 1회차) ──────
   기본 배경은 순백(#ffffff)으로 확정. 웜 아이보리 종이 톤(#f5f1e8)은 폐기.
   토큰 사용 원칙(재작업 1회차): "그냥 흰색" 기조.
   - --ph-paper (#fff): 모든 표면(NAV·드롭다운·폼입력·모달·카드·댓글·리스트)의 기본 배경.
     표면 간 구분은 배경색이 아니라 얇은 잉크 헤어라인 보더로만 한다.
   - --ph-paper-hi (#faf8f4): 잉크 채움 위에 얹는 텍스트/요소 색(버튼 라벨·활성 페이지·리본).
     표면 배경으로는 더 이상 쓰지 않는다.
   - --ph-paper-lo (#f2efe9): 극미한 웜 뉴트럴 층. hover/focus 상태와 활성 표시(공지행)에만
     최소로 남긴다 — 정적 표면에는 쓰지 않는다. (제안) 값 조정 가능. */
:root {
    --ph-paper:    #ffffff;   /* 기본 배경 — 순백 (모든 정적 표면) */
    --ph-paper-hi: #faf8f4;   /* 잉크 채움 위 텍스트/요소 색 (표면 배경 아님) */
    --ph-paper-lo: #f2efe9;   /* 극미 층 — hover/활성 표시 전용 */
    --ph-ink-rgb:  43, 38, 32; /* 잉크(본문색) RGB */
}

/* ============================================================================
   NAV — 상단 내비게이션 브랜드 스킨
   Bootstrap navbar 의 JS 동작(collapse/dropdown)은 유지하고 시각만 덮어쓴다.
   위계는 굵기가 아니라 크기·색·자간으로 만든다(리디바탕 단일 굵기).
   ============================================================================ */
.ph-nav {
    background-color: var(--ph-paper);
    /* border-bottom: 얇은 잉크 선으로 층을 구분(그림자 아님) */
    border-bottom: 1px solid rgba(var(--ph-ink-rgb), 0.14);
    font-family: 'Ridibatang', 'Noto Serif KR', serif;
    letter-spacing: 0.01em;
}

/* ── [작업1] 로고 + 메뉴 데스크톱 중앙 정렬 ─────────────────────────────────────
   데스크톱(lg, ≥992px)에서만 워드마크(navbar-brand)와 메뉴(navbar-collapse 안의 nav)를
   한 묶음으로 가로 중앙에 오게 한다.
   - .container-fluid: 기본 space-between → center 로. (브랜드+메뉴 그룹을 가운데로)
   - .navbar-collapse: Bootstrap 이 lg 에서 flex-grow:1 로 폭을 다 차지해 브랜드를 왼쪽으로
     밀어내므로, flex-grow:0 으로 되돌려 메뉴 폭을 내용만큼으로 줄인다.
   모바일(<992px)은 건드리지 않는다 → 브랜드 왼쪽 / 토글 오른쪽(기본 space-between)과
   collapse 세로 스택 동작이 그대로 유지된다. (head.php 에서 me-auto 는 이미 제거) */
@media (min-width: 992px) {
    .ph-nav .container-fluid { justify-content: center; }
    .ph-nav .navbar-collapse { flex-grow: 0; flex-basis: auto; }
}

/* ── 브랜드/워드마크 ──────────────────────────────────────────────────────── */
.ph-nav .navbar-brand {
    padding-top: 4px;
    padding-bottom: 4px;
}
.ph-nav .navbar-brand img {
    display: block;
}
/* 로고 이미지 로드 실패 시 노출되는 텍스트 워드마크 (대문자 워드마크로 확정) */
.ph-nav .ph-wordmark {
    font-family: 'Ridibatang', 'Noto Serif KR', serif;
    font-size: 1.55rem;
    letter-spacing: 0.02em;
    line-height: 1;
    color: rgb(var(--ph-ink-rgb));
    text-transform: uppercase;
}

/* ── 메뉴 링크 ────────────────────────────────────────────────────────────── */
.ph-nav .nav-link {
    color: rgba(var(--ph-ink-rgb), 0.72);
    font-size: 1.02rem;
}
.ph-nav .nav-link:hover,
.ph-nav .nav-link:focus,
.ph-nav .nav-link.active,
.ph-nav .navbar-nav .show > .nav-link {
    color: rgb(var(--ph-ink-rgb));
}

/* ── 드롭다운(2뎁스) — 종이 층차, 그림자 없음, 절제된 radius ─────────────────── */
.ph-nav .dropdown-menu {
    background-color: var(--ph-paper);   /* 표면=순백, 구분은 잉크 헤어라인 보더로만 */
    border: 1px solid rgba(var(--ph-ink-rgb), 0.14);
    border-radius: 6px;
    box-shadow: none;
}
.ph-nav .dropdown-item {
    color: rgba(var(--ph-ink-rgb), 0.78);
}
.ph-nav .dropdown-item:hover,
.ph-nav .dropdown-item:focus {
    background-color: var(--ph-paper-lo);
    color: rgb(var(--ph-ink-rgb));
}
/* 활성 메뉴 항목 — Bootstrap 기본 .dropdown-item.active 는 primary 파랑(#0d6efd)으로 칠해진다.
   게시판 페이지에서 현재 게시판이 "게시판" 드롭다운의 활성 하위 항목이 되어 파란 배경으로 노출되던 문제 수정.
   활성 표시는 파랑 대신 극미 종이 톤 + 잉크로. (.ph-nav 스코프로 특이도를 높여 Bootstrap 을 덮는다) */
.ph-nav .dropdown-item.active,
.ph-nav .dropdown-item:active,
.ph-nav .dropdown-item.active:hover,
.ph-nav .dropdown-item.active:focus {
    background-color: var(--ph-paper-lo);
    color: rgb(var(--ph-ink-rgb));
}
/* 드롭다운 토글/메뉴 링크 포커스 — Bootstrap 파란 포커스 링(box-shadow) 제거.
   키보드 접근성은 잉크 아웃라인(:focus-visible)으로 대체한다. */
.ph-nav .nav-link:focus,
.ph-nav .dropdown-toggle:focus,
.ph-nav .dropdown-item:focus {
    box-shadow: none;
}
.ph-nav .nav-link:focus-visible,
.ph-nav .dropdown-toggle:focus-visible,
.ph-nav .dropdown-item:focus-visible {
    outline: 2px solid rgba(var(--ph-ink-rgb), 0.35);
    outline-offset: 2px;
    box-shadow: none;
}
.ph-nav .dropdown-divider {
    border-top-color: rgba(var(--ph-ink-rgb), 0.12);
}

/* ── 검색 폼 — 알약 금지(radius 4px), 그림자 금지, 회색(bg) 제거 ───────────────── */
.ph-nav .form-control {
    background-color: var(--ph-paper);   /* 검색 입력 표면=순백 */
    border: 1px solid rgba(var(--ph-ink-rgb), 0.22);
    border-radius: 4px;
    color: rgb(var(--ph-ink-rgb));
    box-shadow: none;
}
.ph-nav .form-control::placeholder {
    color: rgba(var(--ph-ink-rgb), 0.4);
}
.ph-nav .form-control:focus {
    background-color: var(--ph-paper);
    border-color: rgba(var(--ph-ink-rgb), 0.5);
    box-shadow: none;
}
/* 검색 버튼 — bg-secondary 회색 제거, 잉크 아웃라인 */
.ph-nav .btn,
.ph-nav .btn-secondary {
    background-color: transparent;
    border: 1px solid rgba(var(--ph-ink-rgb), 0.3);
    border-left: 0; /* input-group 인접 테두리 겹침 정리 */
    border-radius: 4px;
    color: rgb(var(--ph-ink-rgb));
    box-shadow: none;
}
.ph-nav .btn:hover,
.ph-nav .btn:focus,
.ph-nav .btn-secondary:hover,
.ph-nav .btn-secondary:focus {
    background-color: var(--ph-paper-lo);
    border-color: rgba(var(--ph-ink-rgb), 0.5);
    color: rgb(var(--ph-ink-rgb));
    box-shadow: none;
}

/* ── 모바일 토글 버튼 — 잉크 선, 그림자/알약 없음, 잉크색 햄버거 아이콘 ─────────── */
.ph-nav .navbar-toggler {
    border: 1px solid rgba(var(--ph-ink-rgb), 0.25);
    border-radius: 4px;
    box-shadow: none;
    color: rgb(var(--ph-ink-rgb));
}
.ph-nav .navbar-toggler:focus {
    box-shadow: none;
}
.ph-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43,38,32,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================================
   BOARD — 게시판 스킨 브랜드 (basic 목록/보기/쓰기 + gallery 공용)
   .ph-board 스코프: 각 스킨 최상위 <div> 에 부여 → 게시판 페이지에서만 적용.
   Bootstrap 및 스킨 custom.css 보다 높은 특이도(복합 선택자)로 "시각만" 덮어쓴다.
   폼/JS/모달/드롭다운/페이징/체크박스 선택삭제 등 기능은 손대지 않는다.
   위계는 굵기가 아니라 크기·색·자간으로 만든다(리디바탕 단일 굵기 → 합성볼드 지양).
   ============================================================================ */
.ph-board {
    font-family: 'Ridibatang', 'Noto Serif KR', serif;
    color: rgb(var(--ph-ink-rgb));
    background-color: var(--ph-paper);   /* 밝은 종이 위에 글이 놓인 캔버스 */
    padding: 32px clamp(16px, 4vw, 40px);
    border-radius: 8px;                  /* 알약 금지, 절제된 radius */
    letter-spacing: 0.01em;
    /* 그림자 금지 — 깊이는 여백·종이 층차·얇은 잉크선으로만 */
}

/* 헤딩 — 합성 볼드 지양, 크기·자간으로 위계 */
.ph-board h1, .ph-board h2, .ph-board h3,
.ph-board h4, .ph-board h5, .ph-board h6 { font-weight: normal; }

.ph-board blockquote { border: 0; padding: 0; margin: 0 0 28px; }
.ph-board blockquote h3 {
    font-size: 1.6rem;
    line-height: 1.45;
    letter-spacing: -0.01em;
    word-break: keep-all;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--ph-ink-rgb), 0.16);
}

/* 텍스트 톤 — 쿨그레이 대신 잉크 투명도 변주(브랜드 팔레트 유지) */
.ph-board .text-dark { color: rgb(var(--ph-ink-rgb)) !important; }
.ph-board .text-muted,
.ph-board .text-secondary { color: rgba(var(--ph-ink-rgb), 0.55) !important; }
.ph-board .text-primary { color: rgb(var(--ph-ink-rgb)) !important; }
.ph-board .text-warning { color: rgba(var(--ph-ink-rgb), 0.55) !important; }
.ph-board .text-danger  { color: rgba(var(--ph-ink-rgb), 0.7) !important; }
.ph-board a { color: rgb(var(--ph-ink-rgb)); }

/* 본문 줄바꿈 안전장치 — 글 내용이 &nbsp;(줄바꿈 불가 공백)로 이어붙어 있거나 URL·긴 영문 등
   안 끊기는 문자열이 있어도 모바일에서 가로로 넘치지 않게 최후수단 줄바꿈을 허용한다.
   (word-break:keep-all 은 유지 → 일반 한글 어절은 그대로 예쁘게 접힘, 안 끊기는 런만 강제 분할)
   원인: 후기 등 일부 글이 단어 사이를 전부 &nbsp; 로 저장 → 한 줄 취급되어 컨테이너가 늘어남. */
.ph-board #bo_v_con,
.ph-board #bo_v_con * { overflow-wrap: anywhere; }
.ph-board #bo_v_con img,
.ph-board #bo_v_con video,
.ph-board #bo_v_con iframe { max-width: 100%; height: auto; }
.ph-board #bo_v_con table { max-width: 100%; }

/* 분류 탭(nav-tabs) — BS 박스형 → 에디토리얼 밑줄 */
.ph-board .nav-tabs {
    border-bottom: 1px solid rgba(var(--ph-ink-rgb), 0.16);
    margin-bottom: 24px;
}
.ph-board .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 6px 14px 10px;
    color: rgba(var(--ph-ink-rgb), 0.55) !important; /* .text-dark(!important) 상쇄 */
}
.ph-board .nav-tabs .nav-link:hover { color: rgb(var(--ph-ink-rgb)) !important; }
.ph-board .nav-tabs .nav-link.active {
    color: rgb(var(--ph-ink-rgb)) !important;
    background: transparent;
    border: 0;
    border-bottom: 2px solid rgb(var(--ph-ink-rgb));
}

/* 목록 테이블(basic) — 얇은 잉크선·종이 층차, 그림자/줄무늬 제거 */
.ph-board .table {
    color: rgb(var(--ph-ink-rgb));
    --bs-table-bg: transparent;
    margin-bottom: 28px;
}
.ph-board .table > thead th {
    font-weight: normal;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: rgba(var(--ph-ink-rgb), 0.6);
    background: transparent;
    border-bottom: 1px solid rgba(var(--ph-ink-rgb), 0.28);
}
.ph-board .table > tbody td {
    background: transparent;
    border-top: 1px solid rgba(var(--ph-ink-rgb), 0.1);
    border-bottom: 0;
    vertical-align: middle;
}
.ph-board .table > :not(caption) > * > * { box-shadow: none; }
/* 공지행 — 파랑(table-primary) 대신 깊은 종이 층 */
.ph-board tr.table-primary {
    --bs-table-bg: var(--ph-paper-lo);
    --bs-table-color: rgb(var(--ph-ink-rgb));
}

/* 버튼 — 주요 버튼만 잉크 채움(다크 악센트 소량), 나머지는 잉크 아웃라인. 알약/그림자 금지 */
.ph-board .btn {
    border-radius: 5px;
    box-shadow: none;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.ph-board .btn-primary {
    background-color: rgb(var(--ph-ink-rgb));
    border-color: rgb(var(--ph-ink-rgb));
    color: var(--ph-paper-hi);
}
.ph-board .btn-primary:hover,
.ph-board .btn-primary:focus {
    background-color: rgba(var(--ph-ink-rgb), 0.86);
    border-color: rgba(var(--ph-ink-rgb), 0.86);
    color: var(--ph-paper-hi);
    box-shadow: none;
}
.ph-board .btn-outline-primary {
    background: transparent;
    color: rgb(var(--ph-ink-rgb));
    border-color: rgba(var(--ph-ink-rgb), 0.4);
}
.ph-board .btn-outline-primary:hover,
.ph-board .btn-outline-primary:focus {
    background-color: var(--ph-paper-lo);
    color: rgb(var(--ph-ink-rgb));
    border-color: rgba(var(--ph-ink-rgb), 0.6);
}
.ph-board .btn-outline-secondary {
    background: transparent;
    color: rgba(var(--ph-ink-rgb), 0.7);
    border-color: rgba(var(--ph-ink-rgb), 0.3);
}
.ph-board .btn-outline-secondary:hover,
.ph-board .btn-outline-secondary:focus {
    background-color: var(--ph-paper-lo);
    color: rgb(var(--ph-ink-rgb));
    border-color: rgba(var(--ph-ink-rgb), 0.5);
}
/* 관리용 파괴 액션(선택삭제/복사/이동/관리자) — 빨강 대신 절제된 잉크 아웃라인 */
.ph-board .btn-danger {
    background-color: transparent;
    color: rgba(var(--ph-ink-rgb), 0.75);
    border: 1px solid rgba(var(--ph-ink-rgb), 0.3);
}
.ph-board .btn-danger:hover,
.ph-board .btn-danger:focus {
    background-color: var(--ph-paper-lo);
    color: rgb(var(--ph-ink-rgb));
    border-color: rgba(var(--ph-ink-rgb), 0.5);
}

/* 폼 입력 — 종이 배경, 얇은 잉크 테두리, radius 4, 그림자 없음 */
.ph-board .form-control,
.ph-board .form-select {
    background-color: var(--ph-paper);   /* 글쓰기/검색 입력 표면=순백 */
    border: 1px solid rgba(var(--ph-ink-rgb), 0.24);
    border-radius: 4px;
    color: rgb(var(--ph-ink-rgb));
    box-shadow: none;
    font-family: inherit;
}
.ph-board .form-control::placeholder { color: rgba(var(--ph-ink-rgb), 0.4); }
.ph-board .form-control:focus,
.ph-board .form-select:focus {
    background-color: var(--ph-paper);
    border-color: rgba(var(--ph-ink-rgb), 0.5);
    color: rgb(var(--ph-ink-rgb));
    box-shadow: none;
}
.ph-board .input-group-text,
.ph-board .input-group-text.bg-white {
    background-color: var(--ph-paper) !important;
    border: 1px solid rgba(var(--ph-ink-rgb), 0.24);
    color: rgb(var(--ph-ink-rgb));
}
.ph-board .form-check-input { border-color: rgba(var(--ph-ink-rgb), 0.4); box-shadow: none; }
.ph-board .form-check-input:checked {
    background-color: rgb(var(--ph-ink-rgb));
    border-color: rgb(var(--ph-ink-rgb));
}
.ph-board .form-check-input:focus { box-shadow: none; border-color: rgba(var(--ph-ink-rgb), 0.6); }
.ph-board .col-form-label,
.ph-board .form-check-label,
.ph-board label { color: rgba(var(--ph-ink-rgb), 0.8); }

/* 배지(분류/댓글수) — 원색 대신 잉크 톤 태그 */
.ph-board .badge { font-weight: normal; border-radius: 4px; letter-spacing: 0.02em; }
.ph-board .badge.bg-primary,
.ph-board .badge.bg-secondary {
    background-color: rgba(var(--ph-ink-rgb), 0.08) !important;
    color: rgba(var(--ph-ink-rgb), 0.7) !important;
    border: 1px solid rgba(var(--ph-ink-rgb), 0.16);
}

/* 리스트 그룹(이전·다음글, 첨부/링크) — 종이 층, 얇은 잉크선 */
.ph-board .list-group-item {
    background-color: var(--ph-paper);   /* 이전·다음글/첨부 표면=순백 */
    border-color: rgba(var(--ph-ink-rgb), 0.12);
    color: rgb(var(--ph-ink-rgb));
}

/* 본문(글 읽기) — 책의 조판: 넉넉한 행간, 낱말 단위 줄바꿈 */
.ph-board #bo_v_con {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgb(var(--ph-ink-rgb));
    word-break: keep-all;
}
.ph-board #bo_v_con img { border-radius: 4px; }

/* 댓글 본문 — 회색 박스 대신 밝은 종이 층 + 얇은 잉크선 */
.ph-board .comm-body {
    background-color: var(--ph-paper);   /* 댓글 본문 표면=순백 */
    border: 1px solid rgba(var(--ph-ink-rgb), 0.1);
    border-radius: 6px;
}

/* 댓글 옵션 드롭다운 — 종이 층, 그림자 없음 */
.ph-board .dropdown-menu {
    background-color: var(--ph-paper);   /* 댓글 옵션 메뉴 표면=순백 */
    border: 1px solid rgba(var(--ph-ink-rgb), 0.14);
    border-radius: 6px;
    box-shadow: none;
}
.ph-board .dropdown-item { color: rgba(var(--ph-ink-rgb), 0.8); }
.ph-board .dropdown-item:hover,
.ph-board .dropdown-item:focus {
    background-color: var(--ph-paper-lo);
    color: rgb(var(--ph-ink-rgb));
}

/* 검색 모달 — 종이 카드, 얇은 잉크 테두리, 그림자 없음 */
.ph-board .modal-content {
    background-color: var(--ph-paper);
    border: 1px solid rgba(var(--ph-ink-rgb), 0.18);
    border-radius: 8px;
    box-shadow: none;
    color: rgb(var(--ph-ink-rgb));
}
.ph-board .modal-header,
.ph-board .modal-footer { border-color: rgba(var(--ph-ink-rgb), 0.12); }

/* 페이징 — 파랑 대신 잉크, 알약 금지 */
.ph-board .page-link {
    background-color: transparent;
    border: 1px solid rgba(var(--ph-ink-rgb), 0.16);
    border-radius: 4px;
    color: rgba(var(--ph-ink-rgb), 0.7);
    box-shadow: none;
}
.ph-board .page-link:hover {
    background-color: var(--ph-paper-lo);
    border-color: rgba(var(--ph-ink-rgb), 0.3);
    color: rgb(var(--ph-ink-rgb));
}
.ph-board .page-item.active .page-link {
    background-color: rgb(var(--ph-ink-rgb));
    border-color: rgb(var(--ph-ink-rgb));
    color: var(--ph-paper-hi);
}
.ph-board .page-item.disabled .page-link {
    background: transparent;
    border-color: rgba(var(--ph-ink-rgb), 0.1);
    color: rgba(var(--ph-ink-rgb), 0.3);
}

/* ── GALLERY — 사진이 주인공: 카드 장식 최소, 여백 중심 에디토리얼 그리드 ─────── */
.ph-gallery .card {
    background: transparent;
    border: 0;
    border-radius: 0;
}
.ph-gallery .corner-card { border-radius: 4px; overflow: hidden; }
.ph-gallery .card-img-top {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}
.ph-gallery .card-body {
    background: transparent;
    padding: 12px 2px 0;
}
.ph-gallery .card-title { font-size: 1.05rem; margin-bottom: 6px; }
.ph-gallery .card-title a { color: rgb(var(--ph-ink-rgb)); }
/* 코너 리본 — 회전·그림자·빨강 제거 → 절제된 잉크 플래그(new/hot 표시 유지) */
.ph-gallery .corner-ribbon {
    width: auto;
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: rgba(var(--ph-ink-rgb), 0.82);
    color: var(--ph-paper-hi);
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    border-radius: 4px;
    transform: none;
    -webkit-transform: none;
}
.ph-gallery .shadow { box-shadow: none !important; }
/* 차단 회원 빈 카드만 얇은 종이 테두리 유지 */
.ph-gallery .card.h-100 {
    background: var(--ph-paper);
    border: 1px solid rgba(var(--ph-ink-rgb), 0.12);
    border-radius: 6px;
}

@media (max-width: 575px) {
    /* [모바일 게시판 풀블리드 — 사장님 요청 "모바일에서 게시판 좌우 꽉차게"]
       .ph-board는 상위 .container(좌우 12px 패딩)의 직속 자식이고, 보드 자체도 좌우 16px 패딩을
       가져 목록 표·구분선이 양쪽 28px씩 안으로 들어가 좁게 보였다.
       → 음수 마진(-12px)으로 컨테이너 패딩 밖(화면 좌우 끝)까지 빼고, 보드 좌우 패딩은 0으로 만든다.
       표/구분선은 화면 끝까지 닿고, 본문 텍스트는 td 자체 18px 패딩 덕에 가장자리에 붙지 않아 가독성 유지.
       상하 패딩·종이 배경(--ph-paper)·잉크 헤어라인 구분선은 그대로. 데스크톱/태블릿(≥576px)은 무영향. */
    .ph-board {
        margin-left: -12px;
        margin-right: -12px;
        padding: 20px 12px;     /* 상하 20px · 좌우 12px(화면 끝에서 살짝 여백 — 배경은 풀블리드) */
        border-radius: 0;       /* 화면 좌우 끝까지 닿으므로 둥근 모서리 제거 */
    }
    /* 갤러리 그리드 가드: 부트스트랩 .row(좌우 -12px 음수마진)가 좌우 패딩 0 위에서 풀블리드로
       넘쳐 가로 스크롤이 생기지 않도록, 갤러리 스킨에 한해 좌우 패딩을 복원해 흡수한다.
       그리드 계산은 기존과 동일하게 유지되고, 종이 배경은 음수마진으로 여전히 풀블리드. */
    .ph-board.ph-gallery {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* xs-full 표의 100vw 브레이크아웃(margin-left:-50vw 등)은 해제하되,
       보드 자체가 풀폭(margin -12px·padding 0)이므로 표는 보드 폭 100%로 꽉 채운다.
       (width:auto 로 두면 표가 내용 폭으로 줄어 우측에 빈 공간이 생김) */
    .ph-board .xs-full {
        position: static;
        width: 100%;
        margin-left: 0;
        left: auto;
    }
}