/* 세 계산기가 함께 쓰는 스타일 — albajangbu-calculators/assets/ajb-calc-common.css ───────────────────────────────────────────────────────────── 2026-09-01 에 세 파일에서 **내용까지 완전히 같은 규칙만** 뽑아 여기로 모았다. 그전에는 같은 규칙을 세 파일에 손으로 복사해 넣었고, 그러다 하나를 빠뜨리면 계산기 셋의 모양이 조용히 달라졌다. 🔴 선택자는 같은데 내용이 다른 규칙(.ajb-calc · .ajb-card · .ajb-h · .ajb-dtd__h …)은 **일부러 안 가져왔다.** 여기로 밀어넣으면 셋 중 둘의 화면이 바뀐다. 통일하려면 화면을 바꾸는 작업으로 따로 다뤄야 한다. 🔴 플러그인이 이 파일을 **개별 파일보다 먼저** 부른다(wp_enqueue_style 의존성). 순서가 뒤집히면 개별 파일이 여기에 덮이지 못한다. ───────────────────────────────────────────────────────────── */ .ajb-calc *{box-sizing:border-box;} .ajb-grid{display:grid;grid-template-columns:1fr;gap:14px;} .ajb-lead{margin:0 0 18px;font-size:1.15rem;color:var(--mu);} .ajb-row{margin-bottom:18px;} .ajb-row:last-child{margin-bottom:0;} .ajb-row > label,.ajb-label{display:block;font-size:1.25rem;font-weight:700;margin-bottom:8px;} .ajb-calc select:focus,.ajb-calc input:focus{outline:2px solid var(--b);outline-offset:1px;border-color:var(--b);} .ajb-calc input[type=number]{-moz-appearance:textfield;appearance:textfield;} .ajb-calc input[type=number]::-webkit-outer-spin-button, .ajb-calc input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .ajb-input{position:relative;} .ajb-input > span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mu); font-size:1.15rem;pointer-events:none;} .ajb-hint{margin:7px 0 0;font-size:1.15rem;color:var(--mu);} .ajb-sub{margin:-4px 0 10px;font-size:1.15rem;color:var(--mu);} .ajb-err{margin:7px 0 0;font-size:1.15rem;color:var(--rd);font-weight:700;} .ajb-radio{display:flex;gap:10px;} .ajb-radio label{flex:1;position:relative;} .ajb-radio input{position:absolute;opacity:0;pointer-events:none;} .ajb-radio span{display:block;text-align:center;padding:11px 8px;border:1px solid #cfd8d4; border-radius:9px;cursor:pointer;font-size:1.25rem;background:#fff;} .ajb-radio input:checked + span{border-color:var(--b);background:var(--pale);color:var(--b); font-weight:700;box-shadow:inset 0 0 0 1px var(--b);} .ajb-radio--4{gap:6px;} .ajb-radio--4 span{padding:11px 4px;} .ajb-chips{display:flex;gap:6px;} .ajb-chips button{flex:1;aspect-ratio:1;min-width:0;border:1px solid #cfd8d4;background:#fff; border-radius:50%;font-family:inherit;font-size:1.25rem;color:var(--mu);cursor:pointer;padding:0;} .ajb-chips button[aria-pressed=true]{background:var(--b);border-color:var(--b);color:#fff;font-weight:700;} .ajb-check input{width:18px;height:18px;flex:none;margin:2px 9px 0 0;accent-color:var(--b);} .ajb-check--same{margin-bottom:10px;} .ajb-sum{margin-top:16px;padding:11px 14px;background:var(--pale);border-radius:9px; font-size:1.25rem;color:var(--b);font-weight:700;text-align:center;} /* ───────────────────────────────────────────────────────────── 🔴 「이름 ↔ 금액」 한 줄 — 이 계산기에서 제일 많이 나오는 모양이다. 주차 헤더 · 날짜 줄 · 수당 카드 머리 · 휴일 목록 · 결과 줄 · 상세 … 2026-08-31 전에는 여덟 벌을 따로 써 놨었다. 그래서 한 곳이 좁은 화면에서 깨질 때마다 그 한 곳만 고치게 됐고, 다음에 다른 데가 같은 이유로 깨졌다. **여기 한 벌만 둔다. 새 줄을 만들 때도 이걸 쓴다.** 규칙 이름(.k) 남는 폭을 갖되 min-width:0 이라 끝까지 줄어든다. 더 못 줄면 통째로 접힌다 금액(.v) 절대 안 접힌다. 폭을 먼저 가져간다 — 금액이 잘리면 계산기가 아니다 설명(.s) 언제나 아랫줄, 폭 전부. 들여쓴다 컨테이너 flex-wrap:wrap — 안 들어가면 넘치지 말고 접힌다 🔴 .s 를 .k 안에 넣지 말 것. 안에 넣으면 .k 가 줄어들 때 같이 줄어들어 「172시간 ×」 / 「10,320원」 처럼 두 줄로 접힌다. 폭을 다 쓰지 못한다. ───────────────────────────────────────────────────────────── */ .ajb-kv{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;} .ajb-kv > .k{flex:1 1 auto;min-width:0;} .ajb-kv > .v{flex:0 0 auto;white-space:nowrap;} .ajb-kv > .s{flex:1 0 100%;font-style:normal;} /* 결과 */ .ajb-notice{background:#FFF6E5;border:1px solid #E5C77E;color:#7A5600;border-radius:9px; padding:13px 15px;margin-bottom:16px;font-size:1.15rem;} .ajb-line{padding:8px 0;font-size:1.25rem;} .ajb-line .k{font-weight:600;} .ajb-line .s{color:var(--mu);font-size:1.12rem;} .ajb-line .v{font-weight:700;} .ajb-line--sub{padding:5px 0;font-size:1.15rem;} .ajb-line--sub .k{font-weight:500;} .ajb-line--sub .v{font-weight:600;} .ajb-line--hd{border-top:1px solid #cfe0d8;margin-top:8px;padding-top:12px;} .ajb-line--total{margin-top:6px;padding-top:14px;border-top:1px solid #cfe0d8;color:var(--b);} .ajb-line--total .k{font-weight:800;} .ajb-line--total .v{font-size:1.6rem;font-weight:800;} .ajb-edge b{color:var(--b);} .ajb-edge u{display:inline-block;margin-bottom:6px;font-weight:800;color:var(--b);text-decoration:none;} .ajb-edge .sp{display:block;height:8px;} /* 읽을거리 영역 — 테마에 설정된 본문 폭을 그대로 쓴다. 🔴 숫자를 박지 않는다. 사이트 편집기에서 본문 폭을 바꾸면 DB 에만 남아 파일에 안 남는다. 폴백(720px)은 워드프레스 밖에서 띄울 때만 걸린다 — 검사·스크린샷 하네스가 그렇다. 1080px 상한은 본문 폭이 그보다 넓게 잡힌 경우에 마법사보다 넓어지는 것을 막는다. */ .ajb-read{max-width:min(var(--wp--style--global--content-size, 720px), 1080px);margin:0 auto;} .ajb-det{margin-top:12px;padding-top:12px;border-top:1px solid #cfe0d8;} .ajb-det > summary{padding:2px 0;font-size:1.15rem;font-weight:700;color:var(--b);cursor:pointer;} .ajb-det > div{padding:0;} .ajb-dtd__s{font-size:1.1rem;color:var(--mu);margin-top:3px;} .ajb-dtsum{margin-top:14px;padding-top:12px;border-top:1px solid #cfe0d8;} .ajb-dtd__c{padding-left:14px;font-size:1.05rem;color:var(--mu);} .ajb-box{margin-top:14px;padding:16px 18px;background:#fff;border:1px solid var(--ln); border-radius:11px;font-size:1.12rem;color:var(--mu);line-height:1.7;} .ajb-box u{display:inline-block;margin-bottom:8px;font-weight:800;color:var(--b);text-decoration:none;} .ajb-notes{padding-left:1.1em;margin:0;} .ajb-notes li{margin-bottom:4px;} /* ───────────────────────────────────────────────────────────── 🔴 테마의 「본문 폭 제한」을 이기는 자리. 클래스를 일부러 두 번 쓴다. ───────────────────────────────────────────────────────────── 블록 테마는 본문의 직계 자식을 이렇게 좁힌다. .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size) } ← 이 사이트는 800px 명시도가 (0,1,0) 이다. `:where()` 는 명시도를 올리지 않아서, 그냥 `.ajb-calc` 도 (0,1,0) — **똑같다.** 같으면 나중에 실린 쪽이 이긴다. 계산기를 본문에 붙여 넣던 시절에는