/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/* PC 새 틀(미리 보기) — 공용 부품 「앱 짜임」 · 2026-10-20
   정본 = design_handoff_oppadu_design_system_v4/oppadu-design-guide-v4.md 7.14 — 새 틀 요청이면 모든 화면에 실린다(inc/pc-frame-ui.php)
   새 페이지는 마크업에 아래 클래스를 쓴다. 옛 마크업을 옮기는 화면 파일(css/pcf-community.css 등)은 아래 값(--pcf-ui-*)을 가져다 쓴다
   — 값을 바꿀 땐 정본 7.14 와 이 파일 첫 블록만 고친다(화면 파일마다 따로 고치지 않는다).
   숫자는 지금 정본 그대로(칸 8 · 단추 · 검색칸 · 칩 · 고르기 단추 6 · 단추 42 · 14/600 · 초록은 채운 단추 · 지금 칸만) — 운영자 4판 실제 크기 비교
   ⛔ !important 없음 · 모두 body.pcf-on 아래 + 1025 이상(정본 14.3-1 — 폰은 옛 틀 그대로)
   ⛔ .pcf-group 에 overflow: hidden 을 걸지 않는다 — 칸 안에서 펼치는 목록이 잘린다(줄 모서리는 첫 줄 · 끝 줄이 둥글게 갖는다)

   마크업 견본(정본 7.14):
     <label class="pcf-label" for="t">제목</label> <input class="pcf-field" id="t">
     <div class="pcf-group"> <div class="pcf-row">엑셀 버전 <select class="pcf-row__select">…</select></div> <a class="pcf-row" href="…">알림 <span class="pcf-row__value">켜짐</span></a> </div>
     <div class="pcf-seg" role="group"> <button type="button" aria-pressed="true">설문</button> <button type="button" aria-pressed="false">퀴즈</button> </div>
     <ul class="pcf-list"> <li class="pcf-list-item">…</li> </ul>
     <div class="pcf-tiles"> <a class="pcf-tile" href="…"><span class="pcf-tile__ic">(Lucide 22)</span><span class="pcf-tile__txt"><b class="pcf-tile__t">제목</b><span class="pcf-tile__s">설명</span></span></a> </div>
     <button class="pcf-btn pcf-btn--primary">저장</button> <button class="pcf-btn">취소</button>
     목록 찾기 칸(10/23) = PHP oppadu_pcfui_listq( '라이브 다시보기에서 찾기', 'pcfms-q' ) — 목록 탭 줄(.pcfl-bar) 안 · 정렬 앞에
       큰 칸(10/25 자료실) = 넷째 인자 array( 'class' => 'pcf-listq--hd', 'action' => 주소(진짜 폼 GET) )
     확인 · 알림 창(10/24) = 마크업을 쓰지 않는다 — OppaduNotify.confirm · alert(js/oppadu-notify.js)가 그린 창에 맨 아래 절이 새 틀 모양(왼쪽 정렬 창 · 정본 7.9)을 입힌다 */
@media (min-width: 1025px) {

	body.pcf-on {
		--pcf-ui-cell: var(--gray-100);     /* 묶음 칸 · 회색 면 입력칸 · 고르는 칸 · 보조 단추 */
		--pcf-ui-cell-hi: var(--gray-200);  /* 회색 칸 위 채움(고르기 단추 바탕) · 칸 마우스 올림 */
		--pcf-ui-sep: var(--gray-200);      /* 칸 안 줄 선 */
		--pcf-ui-muted: var(--gray-500);    /* 칸 이름 · 고른 값 · 곁 정보 · 화면 링크 */
		--pcf-ui-ink: var(--gray-900);      /* 글자 · 누르는 글자 */
		--pcf-ui-icon: var(--gray-700);     /* 아이콘(정본 4.5) */
		--pcf-ui-r: 8px;                    /* 칸 */
		--pcf-ui-r-ctl: 6px;                /* 단추 · 검색칸 · 칩 · 고르기 단추 */
		--pcf-ui-focus: 2px solid var(--primary);
		--pcf-ui-thumb-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
		--pcf-ui-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	}

	/* ── 칸 이름 — 칸 위 13/400 회색 · 왼쪽 16 들여 · 굵게 하지 않는다 ── */
	body.pcf-on .pcf-label { display: block; margin: 0 0 7px; padding: 0 16px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--pcf-ui-muted); }

	/* ── 회색 면 입력칸 — 테두리 없음 · 50 · 8 · 포커스 = 흰 면 + 초록 테두리 한 겹 ── */
	body.pcf-on .pcf-field { display: block; box-sizing: border-box; width: 100%; height: 50px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--pcf-ui-r); background: var(--pcf-ui-cell); color: var(--pcf-ui-ink); font: inherit; font-size: 16px; }
	body.pcf-on textarea.pcf-field { height: auto; min-height: 128px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
	body.pcf-on .pcf-field::placeholder { color: var(--gray-400); }
	body.pcf-on .pcf-field:focus { background: var(--surface-white); outline: var(--pcf-ui-focus); outline-offset: -2px; }

	/* ── 묶음 칸 + 칸 안 줄 — 줄 사이에만 선(왼쪽 16 들여 · 아이콘 줄이면 62) ── */
	body.pcf-on .pcf-group { display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: var(--pcf-ui-r); background: var(--pcf-ui-cell); list-style: none; }
	body.pcf-on .pcf-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; min-height: 50px; padding: 0 16px; color: var(--pcf-ui-ink); font-size: 16px; }
	body.pcf-on .pcf-row + .pcf-row::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: 1px; background: var(--pcf-ui-sep); }
	body.pcf-on .pcf-group--icon > .pcf-row + .pcf-row::before { left: 62px; }
	body.pcf-on .pcf-row:first-child { border-top-left-radius: var(--pcf-ui-r); border-top-right-radius: var(--pcf-ui-r); }
	body.pcf-on .pcf-row:last-child { border-bottom-right-radius: var(--pcf-ui-r); border-bottom-left-radius: var(--pcf-ui-r); }
	body.pcf-on a.pcf-row,
	body.pcf-on button.pcf-row { width: 100%; margin: 0; border: 0; background: transparent; color: var(--pcf-ui-ink); font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; }
	body.pcf-on a.pcf-row:hover,
	body.pcf-on button.pcf-row:hover { background: var(--pcf-ui-cell-hi); }
	body.pcf-on a.pcf-row:focus-visible,
	body.pcf-on button.pcf-row:focus-visible { outline: var(--pcf-ui-focus); outline-offset: -2px; }
	body.pcf-on .pcf-row__value { margin-left: auto; color: var(--pcf-ui-muted); font-size: 15px; }
	/* 한 줄 고르기 「이름 … 값 ⌄」 — 고른 값은 오른쪽 회색 + ⌄ */
	body.pcf-on .pcf-row__select { max-width: 60%; margin: 0 0 0 auto; padding: 4px 22px 4px 0; border: 0; background: transparent var(--pcf-ui-chev) no-repeat right center / 16px 16px; color: var(--pcf-ui-muted); font: inherit; font-size: 15px; text-align: right; text-align-last: right; cursor: pointer; -webkit-appearance: none; appearance: none; }
	body.pcf-on .pcf-row__select:focus-visible { border-radius: 4px; outline: var(--pcf-ui-focus); outline-offset: 2px; }
	body.pcf-on .pcf-row > .pcf-field { flex: 1 1 auto; width: auto; height: auto; min-width: 0; padding: 0; border-radius: 0; background: transparent; text-align: right; }

	/* ── 고르기 단추(세그먼트) — 흰 바탕 위 gray-100 · 회색 칸 안이면 gray-200 · 고른 칸 = 흰 칸 + 그림자 ── */
	body.pcf-on .pcf-seg { display: inline-flex; gap: 0; padding: 2px; border-radius: var(--pcf-ui-r-ctl); background: var(--pcf-ui-cell); }
	body.pcf-on .pcf-group .pcf-seg { background: var(--pcf-ui-cell-hi); }
	body.pcf-on .pcf-seg > button { min-width: 64px; min-height: 30px; margin: 0; padding: 0 14px; border: 0; border-radius: 5px; background: transparent; color: var(--pcf-ui-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
	body.pcf-on .pcf-seg > button[aria-pressed="true"],
	body.pcf-on .pcf-seg > button[aria-selected="true"] { background: var(--surface-white); box-shadow: var(--pcf-ui-thumb-shadow); font-weight: 500; }
	body.pcf-on .pcf-seg > button:focus-visible { outline: var(--pcf-ui-focus); outline-offset: 2px; }

	/* ── 그릇 없는 글 목록 — 글마다 칸 없이 줄 사이 선(왼쪽 20 들여) ── */
	body.pcf-on .pcf-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
	body.pcf-on .pcf-list > .pcf-list-item { position: relative; padding: 18px 20px 16px; }
	body.pcf-on .pcf-list > .pcf-list-item + .pcf-list-item::before { content: ""; position: absolute; top: 0; right: 0; left: 20px; height: 1px; background: var(--pcf-ui-sep); }
	body.pcf-on .pcf-list > a.pcf-list-item { display: block; color: inherit; text-decoration: none; }
	body.pcf-on .pcf-list > a.pcf-list-item:hover { background: var(--gray-50); }

	/* ── 고르는 칸 격자 — 3열 회색 칸 · 아이콘은 흰 네모 그릇 40 ── */
	body.pcf-on .pcf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
	body.pcf-on .pcf-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; box-sizing: border-box; width: 100%; margin: 0; padding: 20px 20px 22px; border: 0; border-radius: var(--pcf-ui-r); background: var(--pcf-ui-cell); color: var(--pcf-ui-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
	body.pcf-on .pcf-tile:hover { background: var(--pcf-ui-cell-hi); }
	body.pcf-on .pcf-tile:focus-visible { outline: var(--pcf-ui-focus); outline-offset: 2px; }
	body.pcf-on .pcf-tile__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pcf-ui-r); background: var(--surface-white); color: var(--pcf-ui-icon); }
	body.pcf-on .pcf-tile__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	body.pcf-on .pcf-tile__t { font-size: 15px; font-weight: 500; line-height: 1.4; }
	body.pcf-on .pcf-tile__s { font-size: 13px; line-height: 1.5; color: var(--pcf-ui-muted); }

	/* ── 단추 — 정본 7.3(42 · 14/600 · 6) · 기본 = 보조(회색 면) · 주 단추만 초록 채움 ── */
	body.pcf-on .pcf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 42px; margin: 0; padding: 0 22px; border: 0; border-radius: var(--pcf-ui-r-ctl); background: var(--pcf-ui-cell); color: var(--pcf-ui-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; }
	body.pcf-on .pcf-btn:hover { background: var(--pcf-ui-cell-hi); }
	body.pcf-on .pcf-btn--primary { background: var(--brand-action); color: var(--surface-white); }
	body.pcf-on .pcf-btn--primary:hover { background: var(--brand-hover); }
	body.pcf-on .pcf-btn:active { transform: translateY(1px); }
	body.pcf-on .pcf-btn:focus-visible { outline: var(--pcf-ui-focus); outline-offset: 2px; }
	body.pcf-on .pcf-btn:disabled,
	body.pcf-on .pcf-btn[aria-disabled="true"] { background: var(--gray-200); color: var(--gray-500); cursor: default; transform: none; }

	/* ── 목록 찾기 칸 — 목록 탭 줄 오른쪽 · 정렬 바로 왼쪽(2026-10-23 운영자 「탭줄 오른쪽으로 합시다」 — 시안 claude.ai 아티팩트 F8vPgwUb575TuSadSRp3yz ㄱ · 정본 13.3 · 7.14)
	   그 목록 안에서 치는 대로 거른다(멤버십 라이브 다시보기 · 멤버십 클래스 · 무료 강의 전체 강의 · 1분 쇼츠 · 클래스) · 240 × 36 회색 면 · 6 · 포커스 = 흰 면 + 초록 테 한 겹
	   마크업 = inc/pc-frame-ui.php oppadu_pcfui_listq() — 지우기 [×] 보이기 · 거르기는 묶음 스크립트가 한다 ── */
	body.pcf-on .pcf-listq { display: flex; flex: none; align-items: center; align-self: center; gap: 8px; box-sizing: border-box; width: 240px; height: 36px; margin: 0; padding: 0 7px 0 12px; border-radius: var(--pcf-ui-r-ctl); background: var(--pcf-ui-cell); color: var(--pcf-ui-muted); cursor: text; }
	body.pcf-on .pcf-listq > svg { flex: none; }
	body.pcf-on .pcf-listq input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--pcf-ui-ink); font: inherit; font-size: 14px; outline: 0; -webkit-appearance: none; appearance: none; }
	body.pcf-on .pcf-listq input::placeholder { color: var(--pcf-ui-muted); opacity: 1; }
	body.pcf-on .pcf-listq input::-webkit-search-cancel-button { -webkit-appearance: none; }
	body.pcf-on .pcf-listq:focus-within { background: var(--surface-white); outline: var(--pcf-ui-focus); outline-offset: -2px; }
	/* 입력칸 자체 테는 없다 — 테는 칸 한 겹(정본 「포커스 한 겹」 · 무료 강의 옛 규칙 #lecture-home input:focus-visible 의 2px 테가 겹쳤다 · 10/23 — 그 아이디를 이기려고 #page) */
	body.pcf-on #page .pcf-listq input:is(:focus, :focus-visible) { outline: 0; box-shadow: none; }
	body.pcf-on .pcf-listq__x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: var(--pcf-ui-r-ctl); background: var(--gray-300); color: var(--surface-white); cursor: pointer; }
	body.pcf-on .pcf-listq__x[hidden] { display: none; }
	body.pcf-on .pcf-listq__x:hover { background: var(--gray-400); }
	body.pcf-on .pcf-listq__x:focus-visible { outline: var(--pcf-ui-focus); outline-offset: 2px; }
	/* 큰 칸(2026-10-25 운영자 14판 — 자료실) = 목록 머리 오른쪽 400 × 44(.pcf-listq--hd · 「찾기칸 → 가」 — 목록 일곱 쪽 · 홈 · 찾기 결과 제목 줄)
	   모서리 = 검색칸 6(머리글 찾기 칸 560 × 44 와 같다 — css/pcf.css .pcf-search) · 면 · 포커스는 위 칸 그대로 · 자리는 화면 파일(css/pcf-resources.css 13 · 14절)
	   (같은 날 1차 홈 「다」의 한 줄 가득 × 48 칸 .pcf-listq--lg 는 2차 「자료실 홈도 다른 곳처럼」으로 걷었다) */
	body.pcf-on .pcf-listq--hd { width: 400px; height: 44px; padding: 0 9px 0 14px; gap: 10px; }
	body.pcf-on .pcf-listq--hd > svg { width: 18px; height: 18px; }
	body.pcf-on .pcf-listq--hd input { font-size: 15px; }
	/* 목록 아래 「○○ 모두에서 찾기 ›」 한 줄 — 찾기 칸으로 찾는 중에만(그 묶음 찾기 화면으로 · 화면 링크 = 회색 — 정본 4.5) · <p class="pcf-listwide" hidden><a>…</a></p> */
	body.pcf-on #page .pcf-listwide { margin: 40px 0 0; text-align: center; }
	body.pcf-on #page .pcf-listwide[hidden] { display: none; }
	body.pcf-on #page .pcf-listwide a { display: inline-flex; align-items: center; gap: 2px; color: var(--pcf-ui-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
	body.pcf-on #page .pcf-listwide a:hover { color: var(--pcf-ui-ink); }

	/* ── 확인 · 알림 창 = 왼쪽 정렬 창(2026-10-24 운영자 「왼쪽 정렬 창으로 합시다」 — 고르기 판 claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa 6판 「다」 · 정본 v4 7.9 · 단추 = 7.3)
	   OppaduNotify(js/oppadu-notify.js · 틀 = functions.php oppadu_notify_containers)가 그리는 창 하나 — 사이트의 모든 확인 · 알림 창이 같은 부품이다
	   제목 · 설명 왼쪽 · 단추 오른쪽 아래 · [×] 오른쪽 위 · 바탕은 어둡게만(흐림 없음) · 화면 가운데 · 제목 없는 창은 한 줄 글이 제목 자리(굵게)
	   옛 틀 · 폰(1024 이하)은 css/oppadu-notify.css 옛 모양 그대로(가운데 정렬) · 단추 색 이름은 js 가 조립한다(oppadu-modal-btn-- + variant) ── */
	body.pcf-on .oppadu-modal-overlay { align-items: center; padding: 24px; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
	body.pcf-on .oppadu-modal { width: min(92vw, 400px); border: 0; border-radius: 12px; background: var(--surface-white); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
	body.pcf-on .oppadu-modal-close { top: 10px; right: 10px; width: 40px; height: 40px; border-radius: var(--pcf-ui-r-ctl); color: var(--pcf-ui-muted); }
	body.pcf-on .oppadu-modal-close:hover { background: var(--pcf-ui-cell); color: var(--pcf-ui-ink); }
	body.pcf-on .oppadu-modal-title { padding: 24px 56px 0 24px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: var(--pcf-ui-ink); text-align: left; }
	body.pcf-on .oppadu-modal-body { padding: 8px 24px 0; font-size: 15px; line-height: 1.6; color: var(--gray-600); text-align: left; }
	body.pcf-on .oppadu-modal-title:empty + .oppadu-modal-body { padding: 26px 56px 0 24px; font-size: 16px; font-weight: 500; color: var(--pcf-ui-ink); }
	body.pcf-on .oppadu-modal-actions { justify-content: flex-end; gap: 8px; padding: 24px; }
	body.pcf-on .oppadu-modal-btn { flex: 0 0 auto; min-width: 0; min-height: 42px; padding: 0 22px; border-radius: var(--pcf-ui-r-ctl); font-size: 14px; font-weight: 500; }
	body.pcf-on .oppadu-modal-btn:active { transform: translateY(1px); }
	body.pcf-on .oppadu-modal-btn--cancel,
	body.pcf-on .oppadu-modal-btn--default { background: var(--pcf-ui-cell); color: var(--pcf-ui-ink); }
	body.pcf-on .oppadu-modal-btn--cancel:hover,
	body.pcf-on .oppadu-modal-btn--default:hover { background: var(--pcf-ui-cell-hi); color: var(--pcf-ui-ink); }
	body.pcf-on .oppadu-modal-btn--danger:hover { background: var(--color-danger-text); filter: none; }
}

/* 칸이 좁아지는 PC 폭(1025~1199) — 고르는 칸은 2열 */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.pcf-on .pcf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}