/* ===== 2026-11-07 2차 개선: 휴대폰 머리말, 한글 줄바꿈, 글씨 대비, 누르는 범위. 원본: case-visuals/site-improve-1107b/polish.css ===== */

/* 3. 한글은 띄어쓰기 자리에서만 줄을 바꾼다. 화면보다 긴 낱말(주소 등)만 예외로 끊는다 */
body { word-break: keep-all; overflow-wrap: break-word; }

/* 7. 흐린 작은 글씨를 기준(배경과 4.5:1) 이상으로. 장식용 점·세로줄은 원래 색 그대로 둔다 */
:root { --cl-sage: #5a6b5e; --cl-muted: #5c6872; }
.cl-service-detail__scope li::before,
.cl-profile-case-groups li::before { background: #85998a; }
.cl-longform blockquote,
.cl-life-story-long__copy blockquote { border-left-color: #85998a; }
.cl-mission__principles article > span { color: #5f6971; }
/* 남색 바탕 위의 연녹색 소제목은 원래 색이 더 잘 보인다 */
.cl-profile-cases > div > span,
.cl-profile-press header > span,
.cl-location-info > span { color: #85998a; }
.cl-contact p { color: #616a61; }
.cl-practice__list article > span { color: rgba(255, 255, 255, .62); }
.cl-footer__brand p { color: rgba(255, 255, 255, .62); }
.cl-footer__meta span { color: rgba(255, 255, 255, .58); }
.cl-footer__bottom { color: rgba(255, 255, 255, .58); }
.cl-footer__links a + a::before { color: rgba(255, 255, 255, .45); }

/* 8. 손가락으로 누르기 쉽게(44px 안팎). 안쪽 여백을 넓히고 같은 만큼 바깥 여백을 줄여 글자 자리는 그대로 둔다 */
.cl-footer__meta a { padding: 11px 0; margin: -6px 0 -11px; }
.cl-footer__links a { padding: 13px 0; margin: -13px 0; }
.cl-practice-process__top { padding: 12px 0 12px 16px; margin: 12px 0 -12px auto; }

/* 2. 휴대폰 머리말: 「동행 신청」 버튼을 보이고, 메뉴 글머리를 로고 줄에 맞춘다 */
@media (max-width: 960px) {
    .cl-header__inner { gap: 10px; }
    .cl-logo { order: 1; }
    .cl-header__cta { order: 2; display: flex; position: relative; z-index: 3; margin-left: auto; min-height: 36px; padding: 0 14px; font-size: 12px; white-space: nowrap; }
    .cl-menu-toggle { order: 3; }
    .cl-header:has(.cl-nav.is-open) .cl-header__cta { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
    .cl-nav { justify-content: flex-start; padding: 96px 18px 48px; overflow-y: auto; }
}
@media (max-width: 359px) {
    .cl-logo { width: 138px; }
    .cl-header__cta { padding: 0 10px; }
}

/* 2. 메인 말고 다른 페이지: 화면을 위로 올리면 머리말이 위에서 다시 내려온다(polish.js가 표시를 붙인다) */
.cl-interior-page .cl-header.cl-header--pinned { position: fixed; top: 0; transform: translateY(0); transition: transform .28s ease; }
.cl-interior-page .cl-header.cl-header--pinned.cl-header--away { transform: translateY(-110%); }
.admin-bar.cl-interior-page .cl-header.cl-header--pinned { top: 32px; }
@media (max-width: 782px) { .admin-bar.cl-interior-page .cl-header.cl-header--pinned { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .cl-interior-page .cl-header.cl-header--pinned { transition: none; } }

/* 머리말 바: 내려 읽는 동안에는 위로 비켜 주고(메인 포함), 위로 올리면 다시 내려온다. bar.js가 표시를 붙인다. 2026-11-08 */
.cl-header.is-scrolled.cl-header--away,
.cl-interior-page .cl-header.cl-header--pinned.cl-header--away { transform: translateY(-110%); }
/* 관리자로 로그인한 휴대폰에서는 관리자 막대가 화면과 함께 올라가므로, 따라오는 머리말은 맨 위에 붙인다(빈틈 없애기) */
@media (max-width: 600px) {
    .admin-bar .cl-header.is-scrolled,
    .admin-bar.cl-interior-page .cl-header.cl-header--pinned { top: 0; }
}

/* 메인 맨 아래 「찾아오시는 길」 배경 사진은 그 근처까지 내려왔을 때 받는다(visit-later: site-polish.js가 cl-bg-ready를 붙임). 2026-11-08 */
.cl-visit__image:not(.cl-bg-ready) { background-image: linear-gradient(90deg, rgba(5, 24, 50, .64), rgba(5, 24, 50, .08) 72%); }