/* ============================================================================ ui.css 로 넘어온 공용 컴포넌트 (옛 additional.css) ---------------------------------------------------------------------------- additional.css 가 ui.css·book.css 보다 먼저 로드됐으므로, 그때의 우선순위를 지키려 파일 앞쪽에 둔다. ============================================================================ */ /* ── 버튼 목록 (btn-list · Btn*) ───────────────────────────────────────────── */ /* ── 버튼 목록 (btn-list · Btn*) ──────────────────────────────────── 문법: 주 동작 = 골드 채움 + 흰 글자, 보조 = 흰 바탕 + 테두리. PNG 화살표·다운로드 아이콘은 색 새긴 SVG data URI 로 교체했다. */ .btn-list { display:flex; flex-direction:column; align-items:center; gap:1rem; } .btn-list a { position:relative; } .btn-list a span { font-size:inherit; max-width:80%; display:block; margin:0 auto; } .btn-list a img { position:absolute; right:10%; top:50%; transform:translateY(-50%); height:1.25rem; box-sizing:border-box; filter:grayscale(1) invert(.7); } /* .BtnGoList · .BtnDownload 는 .btn-cta / .btn-cta-ghost 한 벌로 옮겼다 — 같은 문구가 네 가지 얼굴로 서 있던 것을 아래 «바닥 CTA» 하나로 모았다 */ .btn-list a,.btn-list div { padding:1rem 1.5rem; box-sizing:border-box; text-align:center; border-radius:var(--r-md); font-size:1.1rem; font-weight:500; } .btn-list a:focus-visible { outline:2px solid var(--gold); outline-offset:0.125rem; } @media (max-width:767px) { .btn-list { margin-top:3rem; } .btn-list a { max-width:100%; } } /* ── 도서 카드 (book card) ─────────────────────────────────────────────── 표지 + 언어번호 + 시리즈 + 제목 + 라벨. 마크업은 _components/book/bookCard.php 하나가 그리는데, CSS 는 네 벌로 갈라져 있었다 — · .book-recommend-area .book-list … (book.css, 옛 값) · .section-recommend …book-recommend-area … (main.css, 메인만) · .book-view / .tabernacle .book-recommend-area … (book.css, 또 한 벌) · #sub_contents.book …ul.book-grid … (book.css, 목록 격자) 같은 뜻인데 번호가 10/600·10/700·11/700, 제목이 12/600·12/700·12.5/700·13/700, 글자색이 먹과 연갈로 갈리고 줄수도 2와 3이 섞였다. main.css 는 index.php 가 book.css 를 받지 않아서 통째로 복사돼 있던 것이다. 그래서 두 곳 다 받는 ui.css 로 옮기고 나머지는 지웠다. 여기서 정하지 않는 것: 표지 폭과 열 수. 그건 «어느 영역이냐» 의 몫이다. */ .book-recommend-area .book-list .item, .book-area > ul.book-list:not(.book-grid) > li, .book-area ul.book-grid:not(.feature-grid) > li { box-sizing:border-box; } .book-recommend-area .book-list .item > a, .book-area > ul.book-list:not(.book-grid) > li > a, .book-area ul.book-grid:not(.feature-grid) > li > a { display:flex; flex-direction:column; width:100%; box-sizing:border-box; color:inherit; text-decoration:none; } /* 표지 — 책등(:before)과 안쪽 테두리(:after)까지 한 벌 */ .book-recommend-area .book-list .img-area, .book-area > ul.book-list:not(.book-grid) > li .img-area, .book-area ul.book-grid:not(.feature-grid) > li .img-area { position:relative; width:100%; max-width:none; margin:0; overflow:hidden; border-radius:4px 8px 8px 4px; background:var(--panel); box-shadow:0 2px 4px rgba(31,26,18,.10), 0 15px 26px -17px rgba(31,26,18,.60); transition:transform .24s ease, box-shadow .24s ease; } .book-recommend-area .book-list .img-area:before, .book-area > ul.book-list:not(.book-grid) > li .img-area:before, .book-area ul.book-grid:not(.feature-grid) > li .img-area:before { position:absolute; z-index:var(--z-inlay); top:0; bottom:0; left:0; width:7px; background:linear-gradient(90deg, rgba(24,18,10,.18), rgba(255,255,255,.09), transparent); content:''; pointer-events:none; } .book-recommend-area .book-list .img-area:after, .book-area > ul.book-list:not(.book-grid) > li .img-area:after, .book-area ul.book-grid:not(.feature-grid) > li .img-area:after { position:absolute; z-index:var(--z-inlay); inset:0; border:1px solid rgba(34,27,16,.08); border-radius:inherit; box-shadow:inset -1px 0 rgba(255,255,255,.2); content:''; pointer-events:none; } .book-recommend-area .book-list .img-area img, .book-area > ul.book-list:not(.book-grid) > li .img-area img, .book-area ul.book-grid:not(.feature-grid) > li .img-area img { display:block; width:100%; height:auto; aspect-ratio:260 / 381; object-fit:cover; transition:transform .24s ease; } .book-recommend-area .book-list .text-area, .book-area > ul.book-list:not(.book-grid) > li .text-area, .book-area ul.book-grid:not(.feature-grid) > li .text-area { display:block; flex:1 1 auto; min-width:0; padding:12px 1px 0; text-align:start; } /* 언어 번호 — 앞에 짧은 선 하나 («— English 11») */ .book-recommend-area .book-list .small-title, .book-area > ul.book-list:not(.book-grid) > li .small-title, .book-area ul.book-grid:not(.feature-grid) > li .small-title { display:flex; align-items:center; gap:6px; height:auto; margin:0 0 4px; color:var(--muted); font-size:var(--fs-2xs); line-height:1.4; font-weight:600; letter-spacing:.025em; } .book-recommend-area .book-list .small-title:before, .book-area > ul.book-list:not(.book-grid) > li .small-title:before, .book-area ul.book-grid:not(.feature-grid) > li .small-title:before { flex:0 0 12px; width:12px; height:1px; background:#c9c5bd; content:''; } /* 시리즈 + 권수가 카드의 머리글 */ .book-recommend-area .book-list .book-series, .book-area > ul.book-list:not(.book-grid) > li .book-series, .book-area ul.book-grid:not(.feature-grid) > li .book-series { display:-webkit-box; overflow:hidden; margin:0 0 3px; color:var(--ink); font-size:0.84375rem; line-height:1.35; font-weight:700; letter-spacing:-.015em; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .book-recommend-area .book-list .book-name, .book-area > ul.book-list:not(.book-grid) > li .book-name, .book-area ul.book-grid:not(.feature-grid) > li .book-name { display:-webkit-box; overflow:hidden; min-height:0; margin:0; color:var(--copy-soft); font-size:var(--fs-xs); line-height:1.5; font-weight:600; letter-spacing:-.012em; -webkit-box-orient:vertical; -webkit-line-clamp:3; transition:color var(--t-fast); } /* 시리즈가 없는 단권은 제목이 머리글 노릇을 이어받는다 */ .book-recommend-area .book-list .small-title:first-child + .book-name, .book-recommend-area .book-list .book-name:first-child, .book-area > ul.book-list:not(.book-grid) > li .small-title:first-child + .book-name, .book-area > ul.book-list:not(.book-grid) > li .book-name:first-child, .book-area ul.book-grid:not(.feature-grid) > li .small-title:first-child + .book-name, .book-area ul.book-grid:not(.feature-grid) > li .book-name:first-child { color:var(--ink); font-size:0.78125rem; font-weight:700; } .book-recommend-area .book-list .book-labels, .book-area > ul.book-list:not(.book-grid) > li .book-labels, .book-area ul.book-grid:not(.feature-grid) > li .book-labels { display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:22px; margin-top:7px; } /* 라벨 알약 — 색은 관리자가 정한 라벨 색을 인라인으로 받는다 */ .book-recommend-area .book-list .book-labels .badge-chip, .book-area > ul.book-list:not(.book-grid) > li .book-labels .badge-chip, .book-area ul.book-grid:not(.feature-grid) > li .book-labels .badge-chip { display:inline-flex; align-items:center; box-sizing:border-box; min-height:22px; padding:3px 9px; border:1px solid rgba(0,0,0,.06); border-radius:var(--r-pill); font-size:var(--fs-2xs); line-height:var(--lh-tight); font-weight:700; text-decoration:none; box-shadow:none; } .book-recommend-area .book-list .book-author, .book-area > ul.book-list:not(.book-grid) > li .book-author { margin-top:5px; color:var(--muted); font-size:var(--fs-2xs); line-height:1.4; font-weight:500; } @media (hover:hover) { .book-recommend-area .book-list .item > a:hover .img-area, .book-area > ul.book-list:not(.book-grid) > li > a:hover .img-area, .book-area ul.book-grid:not(.feature-grid) > li > a:hover .img-area { transform:translateY(-3px); box-shadow:0 4px 8px rgba(31,26,18,.12), 0 20px 30px -18px rgba(31,26,18,.66); } .book-recommend-area .book-list .item > a:hover .img-area img, .book-area > ul.book-list:not(.book-grid) > li > a:hover .img-area img, .book-area ul.book-grid:not(.feature-grid) > li > a:hover .img-area img { transform:scale(1.02); } .book-recommend-area .book-list .item > a:hover .book-series, .book-area > ul.book-list:not(.book-grid) > li > a:hover .book-series, .book-area ul.book-grid:not(.feature-grid) > li > a:hover .book-series, .book-recommend-area .book-list .item > a:hover .book-name, .book-area > ul.book-list:not(.book-grid) > li > a:hover .book-name, .book-area ul.book-grid:not(.feature-grid) > li > a:hover .book-name { color:var(--gold-deep); } } @media (max-width:767px) { .book-recommend-area .book-list .text-area, .book-area > ul.book-list:not(.book-grid) > li .text-area, .book-area ul.book-grid:not(.feature-grid) > li .text-area { padding-top:9px; } } /* ── 바닥 CTA (cta-bar · btn-cta) ─────────────────────────────────────── 화면 맨 아래에서 «무료 도서 받으러 가기» 를 권하는 한 벌. 예전에는 같은 문구(book_text4_1)가 네 가지 얼굴로 서 있었다 — · .btn-list a.BtnDownload 사각 600px 고정, 배경 이미지 «›» (FAQ·설교) · .btn-tabernacle-books 알약 내용너비, 인라인 SVG «→» (성막·복음·성구) · .btn-author-books 알약이지만 여백·글씨가 또 달랐다 (저자 소개) 모양도 너비도 화살표도 그림자도 제각각이었다. 이제 이 하나가 그린다. 화살표는 마크업이 아니라 여기서 그린다 — 페이지마다 SVG 를 손으로 붙이던 것을 없애고, 글자색(currentColor)을 따라가게 한다. */ .cta-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-8); } .btn-cta, .btn-cta-ghost { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); box-sizing:border-box; min-height:3rem; max-width:100%; padding:0.75rem 2rem; border:1px solid transparent; border-radius:var(--r-pill); font-size:var(--fs-md); font-weight:700; line-height:1.35; text-align:center; text-decoration:none; transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } /* 주 동작 — 영역 색 면 */ .btn-cta { background:var(--zone); color:var(--paper); box-shadow:var(--zone-shadow); } .btn-cta:hover { background:var(--zone-deep); transform:translateY(-2px); } /* 보조 — 흰 바탕 + 테두리 (되돌아가기 따위) */ .btn-cta-ghost { border-color:var(--line); background:var(--paper); color:var(--ink); } .btn-cta-ghost:hover { border-color:var(--zone-line); color:var(--zone-deep); box-shadow:var(--sh-soft); transform:translateY(-2px); } .btn-cta:focus-visible, .btn-cta-ghost:focus-visible { outline:2px solid var(--zone); outline-offset:2px; } /* 화살표 — 주는 앞으로, 보조는 뒤로 */ .btn-cta:after, .btn-cta-ghost:before { flex:0 0 1.125rem; width:1.125rem; height:1.125rem; background:currentColor; content:''; } .btn-cta:after { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/1.125rem no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/1.125rem no-repeat; } .btn-cta-ghost:before { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/1.125rem no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/1.125rem no-repeat; } /* 오른쪽에서 읽는 말에서는 화살표도 돌아선다 */ .align-right .btn-cta:after, .align-right .btn-cta-ghost:before { transform:scaleX(-1); } /* 굵게 강조한 «FREE» 는 한 급 밝은 금색 (주 동작 안에서만) */ .btn-cta b { color:var(--gold-soft); } @media (max-width:767px) { .cta-bar { gap:var(--sp-2); margin-top:var(--sp-6); } .btn-cta, .btn-cta-ghost { width:100%; padding:0.75rem 1.25rem; font-size:var(--fs-base); } } /* ── 공유 버튼 (share_area) ────────────────────────────────────────────────── */ /* ── 공유 버튼 (share_area) ─────────────────────────────────────────── */ .share-area { position:relative; margin-bottom:1rem; } .share-area .BtnShare { width:3rem; height:3rem; display:inline-block; box-sizing:border-box; padding:.75rem; border-radius:50%; transition:background-color var(--t-fast); } .share-area .BtnShare:hover { background-color:var(--gold-wash); } .share-area .BtnShare img { max-width:100%; } @media (max-width:480px) { .share-area .BtnShare { width:2.5rem; height:2.5rem; padding:.5rem; } } /* ── 버튼 한 벌 ───────────────────────────────────────────────────────────── 이름은 «무엇을 하는 단추인가»를 말한다. 색은 놓인 영역이 정한다. 예전에는 색이 곧 이름이었다 — btn_brand(보라) · btn_blue(남보라) · btn_amber(호박) · btn_accent(진홍) · btn_wh(흰). 다섯 이름이 실제로는 «주 동작»과 «보조 동작» 둘뿐이었고, 같은 «목록으로»가 화면마다 다른 색으로 섰다. 게다가 sub.css 의 구간 머리말은 «주 버튼은 골드»라고 적혀 있는데 정작 .btn-primary 는 보라였다 — 말과 코드가 어긋난 채로 굳어 있었다. 이제 역할이 이름이고, 축은 --zone 한 벌이 옮긴다. 기본은 브랜드 크롬의 골드, 보라를 쓰는 영역은 그 영역에 .accent-zone 을 얹으면 단추도 탭도 따라온다. («단추 축»이 아니라 «영역 축»이라 탭·포커스 링도 같은 변수를 본다.) ───────────────────────────────────────────────────────────────────────── */ :root { --zone: var(--gold); --zone-deep: var(--gold-deep); --zone-soft: var(--gold-soft); --zone-wash: var(--gold-wash); --zone-line: var(--gold-line); --zone-shadow: var(--sh-gold); --zone-focus: var(--focus); } .accent-zone { --zone: var(--accent); --zone-deep: var(--accent-deep); --zone-soft: var(--accent-soft); --zone-wash: var(--accent-wash); --zone-line: var(--accent-line); --zone-shadow: var(--sh-accent); --zone-focus: var(--focus-accent); } .btn-primary, .btn-secondary, .btn-quiet, .btn-outline, .btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); box-sizing:border-box; min-height:2.75rem; padding:0 var(--sp-5); border:1px solid transparent; border-radius:var(--r-md); font-size:var(--fs-md); font-weight:700; line-height:1.2; text-align:center; cursor:pointer; transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-base); } /* 주 동작 — 한 화면에 하나가 원칙이다 */ .btn-primary { background:var(--zone); color:var(--paper); } .btn-primary:hover { background:var(--zone-deep); box-shadow:var(--zone-shadow); } /* 보조 동작 — 되돌아가기 · 목록 · 취소 */ .btn-secondary { background:var(--paper); border-color:var(--line-input); color:var(--ink); } .btn-secondary:hover { border-color:var(--zone); background:var(--zone-wash); } /* 조용한 동작 — 면도 테두리도 없이 글자만 */ .btn-quiet { background:transparent; color:var(--zone-deep); } .btn-quiet:hover { background:var(--zone-wash); } /* 되돌릴 수 없는 동작에만 */ .btn-danger { background:var(--bad); color:var(--paper); } .btn-danger:hover { background:var(--bad); box-shadow:var(--sh-soft); filter:brightness(.92); } /* 표 안이나 줄 사이에 끼는 작은 단추 */ .btn-sm { min-height:1.875rem; padding:0 var(--sp-3); font-size:var(--fs-base); border-radius:var(--r-sm); } /* 크게 — 화면의 걸음을 앞으로 미는 단추 (가입 흐름의 «다음» 같은 것) */ .btn-lg { min-height:3.125rem; padding:0 var(--sp-6); font-size:var(--fs-md); } /* 테를 두른 갈래 — 면을 채우지 않고 영역 색 테두리로만 선다. 한 화면에 주 동작이 이미 있는데 두 번째 동작도 눈에 띄어야 할 때 쓴다 */ .btn-outline { background:var(--paper); border-color:var(--zone); color:var(--zone-deep); } .btn-outline:hover { background:var(--zone-soft); } /* 모양 수식어 — 알약형. 가입·로그인 흐름이 제 이름으로 네 벌 그리고 있던 것을 여기 한 자리로 모았다 (계약서 §2.2 «알약형 단추» = 컴포넌트 요청) */ .btn-pill {border-radius:var(--r-pill);} /* 자리 수식어 — 줄을 통째로 차지한다 (카드 안 제출 단추) */ .btn-block {width:100%;} /* RTL — 앞은 왼쪽이다. 단추 속 인라인 글리프는 모두 방향을 가진 것들이라 (→ 다음, ← 뒤로, ⇥ 로그아웃) 통째로 돌아선다. 방향 없는 글리프를 단추에 넣을 일이 생기면 그때 이 규칙에서 빼야 한다 */ .align-right .btn-primary > svg, .align-right .btn-secondary > svg, .align-right .btn-quiet > svg, .align-right .btn-outline > svg, .align-right .btn-danger > svg { transform:scaleX(-1); } .btn-primary[disabled], .btn-secondary[disabled], .btn-quiet[disabled], .btn-outline[disabled], .btn-danger[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; } /* 단추 묶음 — 화면 아래 가운데로 모은다 */ .btn-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-3); margin:var(--sp-7) 0 0; } /* ── 입력 컨트롤 ──────────────────────────────────────────────────────────── 글을 받는 요소의 바탕을 한 벌로 둔다. 높이 2.75rem, 반경 --r-md, 테두리 --line-input, 포커스는 영역 색 테두리 + 3px 링 (design-language.md §3). 요소 이름(input·select·textarea)으로 건다. 화면마다 «이 화면의 입력» 을 다시 그리던 규칙이 수십 벌이라, 클래스를 새로 만들면 그것들을 전부 고쳐야 한다. 바탕만 여기서 깔고, 화면이 폭·자리만 얹으면 되게 한다. ───────────────────────────────────────────────────────────────────────── */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea { box-sizing:border-box; min-height:2.75rem; padding:0 var(--sp-4); border:1px solid var(--line-input); border-radius:var(--r-md); background:var(--paper); color:var(--ink); font-family:inherit; font-size:var(--fs-base); transition:border-color var(--t-fast), box-shadow var(--t-fast); } textarea { padding:var(--sp-3) var(--sp-4); line-height:var(--lh-base); resize:vertical; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus, select:focus, textarea:focus { border-color:var(--zone); box-shadow:0 0 0 3px var(--zone-focus); outline:0; } input::placeholder, textarea::placeholder { color:var(--faint); } input[disabled], select[disabled], textarea[disabled] { background:var(--panel); color:var(--muted); cursor:not-allowed; } /* ── 탭 한 벌 ─────────────────────────────────────────────────────────────── 밑줄형이 기준이다 (design-language.md §3). 활성 항목 아래에 골드 바가 선다. 예전에는 탭이 다섯 벌이었다 — 도서 목록의 밑줄형(.book-mode-switch), FAQ 의 알약 4분할(.tab-type2), 약관의 세그먼트 상자(.terms-tabs), 검색의 가로 스크롤 칩(.search-tab-chip), 그리고 그 바탕의 옛 알약형(.tab). 같은 «갈래 고르기» 인데 화면마다 모양도 활성 색도 달랐다. 마크업 꼴은 두 가지를 다 받는다 — «ul > li > a» 와 «nav > a». 활성 표시는 .active(PHP 가 붙이는 옛 이름)와 .is-on 을 함께 본다. ───────────────────────────────────────────────────────────────────────── */ .tabs { display:flex; align-items:stretch; gap:var(--sp-1); margin:0 0 var(--sp-5); padding:0; border-bottom:1px solid var(--line); list-style:none; } .tabs > li { flex:1 1 0; min-width:0; list-style:none; } .tabs > li > a, .tabs > a { position:relative; display:flex; align-items:center; justify-content:center; gap:var(--sp-2); box-sizing:border-box; height:100%; min-height:3.25rem; padding:0 var(--sp-4); color:var(--muted); font-size:var(--fs-md); font-weight:700; line-height:1.3; text-align:center; transition:color var(--t-fast), background-color var(--t-fast); } .tabs > a { flex:1 1 0; min-width:0; } .tabs > li > a:hover, .tabs > a:hover { color:var(--ink); background:var(--zone-wash); } /* 활성 — 영역 색 글자 + 아래 3px 바. 바는 아래 테두리 위에 겹쳐 얹는다 */ .tabs > li.active > a, .tabs > li.is-on > a, .tabs > a.active, .tabs > a.is-on { color:var(--zone-deep); font-weight:800; } .tabs > li.active > a:after, .tabs > li.is-on > a:after, .tabs > a.active:after, .tabs > a.is-on:after { position:absolute; right:0; bottom:-1px; left:0; height:3px; border-radius:var(--r-pill) var(--r-pill) 0 0; background:var(--zone); content:''; } /* 갈래가 많아 넘칠 때 — 가로로 민다 */ .tabs-scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .tabs-scroll::-webkit-scrollbar {display:none;} .tabs-scroll > li, .tabs-scroll > a { flex:0 0 auto; } /* 갈래 옆의 건수 */ .tab-badge { display:inline-flex; align-items:center; min-width:1.5rem; padding:0 var(--sp-2); border-radius:var(--r-pill); background:var(--panel); color:var(--copy-soft); font-size:var(--fs-2xs); font-weight:700; } .tabs > li.active > a .tab-badge, .tabs > a.active .tab-badge, .tabs > li.is-on > a .tab-badge, .tabs > a.is-on .tab-badge { background:var(--zone-soft); color:var(--zone-deep); } @media (max-width:767px) { .tabs > li > a, .tabs > a { min-height:2.75rem; padding:0 var(--sp-3); font-size:var(--fs-base); } } /* 찾기 단추 — 돋보기 하나. 글자(«Search»)는 뺐다. 27개 언어에서 길이가 제각각이라 검색 바의 입력 칸을 언어마다 다른 폭으로 갉아먹었고, 돋보기만으로 뜻이 통하는 자리다. 대신 이름은 aria-label 로 남긴다 — 눈에서만 빼고 낭독기에서는 그대로다. 아이콘은 마스크로 그려 currentColor 를 따라간다. 색을 두 곳(글자와 아이콘)에 따로 적지 않아도 되고, 영역 축(--zone)이 바뀌면 아이콘도 함께 옮겨 간다. */ .btn-search { gap:0; } .btn-search:before { flex:0 0 auto; width:1.125rem; height:1.125rem; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain; content:''; } /* ── 세그먼트 토글 (tabs-segment) ─────────────────────────────────────────── 카드 안에서 «같은 자리의 내용»을 바꾸는 토글. 화면을 옮기는 밑줄형 탭과 달리 그 자리에 머무르며 보이는 것만 갈아 끼우므로, 눌린 조각이 면으로 서는 편이 읽기 쉽다 (메인의 단권/합본 고르기가 이 꼴이다). 예전에는 이 토글이 main.css 안에서 팔레트에 없는 먹색(--ink) 알약으로 서 있었다. 같은 «단권 / 합본» 선택이 도서 목록에서는 골드 밑줄 탭이었으니, 한 사이트에서 같은 물음이 두 얼굴을 하고 있었던 셈이다. 영역 축(--zone)으로 맞춘다. 마크업은 «label > input[type=radio]» 꼴도 «a» 꼴도 받는다. ───────────────────────────────────────────────────────────────────────── */ .tabs-segment { display:inline-flex; align-items:center; gap:var(--sp-1); box-sizing:border-box; width:fit-content; max-width:100%; margin:0 0 var(--sp-5); padding:var(--sp-1); border:1px solid var(--line-soft); border-radius:var(--r-pill); background:var(--paper-warm); list-style:none; } .tabs-segment > li { flex:0 0 auto; list-style:none; } .tabs-segment > li > a, .tabs-segment > a, .tabs-segment label { display:inline-flex; align-items:center; justify-content:center; min-height:2.25rem; padding:0 var(--sp-5); border-radius:var(--r-pill); color:var(--copy-soft); font-size:var(--fs-base); font-weight:600; white-space:nowrap; cursor:pointer; transition:color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-base); } .tabs-segment label input { display:none; } .tabs-segment > li > a:hover, .tabs-segment > a:hover, .tabs-segment label:not(:has(input:checked)):hover { color:var(--ink); background:var(--zone-wash); } /* 눌린 조각 — 영역 색 면 + 흰 글자 */ .tabs-segment > li.active > a, .tabs-segment > li.is-on > a, .tabs-segment > a.active, .tabs-segment > a.is-on, .tabs-segment label:has(input:checked) { background:var(--zone); color:var(--paper); font-weight:700; box-shadow:var(--zone-shadow); } /* 밑줄형의 활성 바는 이 꼴에 오지 않는다 */ .tabs-segment > li.active > a:after, .tabs-segment > a.active:after { display:none; } /* ── 조각 안의 그림표 (.mode-icon) ───────────────────────────────────────── «한 언어 / 두 언어» 처럼 갈래가 서로 짝을 이룰 때, 글자만으로는 훑어보는 눈에 잘 안 잡힌다. 테두리만으로 그린 책 모양 둘을 앞에 세운다. 글자색을 따라가므로(currentColor) 눌린 조각에서는 흰색이 된다. 도서 목록과 메인 추천이 이 한 벌을 같이 쓴다 — 예전에는 도서 목록의 book.css 안에만 있어 메인에는 그림표가 없었다. */ .tabs-segment > li > a:has(.mode-icon), .tabs-segment > a:has(.mode-icon), .tabs-segment label:has(.mode-icon) { gap:var(--sp-2); } .mode-icon { flex:0 0 1.125rem; box-sizing:border-box; width:1.125rem; height:1.125rem; color:currentColor; } /* 한 언어 — 앞장 한 겹, 뒤에 그림자처럼 한 겹 */ .mode-icon-single { position:relative; border:1.5px solid currentColor; border-radius:2px; } .mode-icon-single:after { position:absolute; top:2px; right:-4px; bottom:-4px; width:100%; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; border-radius:0 0 2px 0; content:''; } /* 두 언어 — 펼친 책, 두 쪽이 서로 반대로 기운다 */ .mode-icon-dual { position:relative; } .mode-icon-dual:before, .mode-icon-dual:after { position:absolute; top:2px; bottom:2px; box-sizing:border-box; width:9px; border:1.5px solid currentColor; content:''; } .mode-icon-dual:before { left:0; border-radius:2px 0 0 2px; transform:skewY(5deg); } .mode-icon-dual:after { right:0; border-radius:0 2px 2px 0; transform:skewY(-5deg); } @media (max-width:767px) { .tabs-segment { width:100%; } .tabs-segment > li, .tabs-segment > a, .tabs-segment label { flex:1 1 0; } /* 좁은 화면에서는 긴 갈래 이름(«Dual Language (Bilingual Book)» 따위)이 제 칸을 넘어 잘렸다. 한 줄을 고집하지 말고 두 줄로 접는다. box-sizing 도 여기서 못 박는다 — width:100% 에 좌우 여백이 더해져 조각이 칸을 넘고 눌린 면이 옆 조각을 덮었다. */ .tabs-segment > li > a, .tabs-segment > a, .tabs-segment label { box-sizing:border-box; width:100%; padding:0 var(--sp-3); font-size:var(--fs-sm); line-height:1.25; text-align:center; white-space:normal; } .mode-icon { flex-basis:.9375rem; width:.9375rem; height:.9375rem; } /* 괄호 안 덧말은 접는다 — «Dual Language (Bilingual Book)» 이 좁은 화면에서 두 줄로 접히며 조각 둘의 균형을 깨뜨렸다. 이름만으로도 갈래는 통한다. */ .mode-note { display:none; } } /* ── 입력 묶음 (input-group) ──────────────────────────────────────────────── «고르고 · 적고 · 누르는» 한 줄을 한 상자로 묶는다. 목록 위 검색 바가 대표다. 테두리는 묶음이 하나만 두르고 안쪽 요소는 벗는다. 그래야 요소마다 테두리가 겹쳐 두 줄로 보이는 일이 없고, 포커스 링도 묶음 전체에 한 번만 걸린다. ───────────────────────────────────────────────────────────────────────── */ .input-group { display:flex; align-items:stretch; box-sizing:border-box; border:1px solid var(--line-input); border-radius:var(--r-md); background:var(--paper); overflow:hidden; } .input-group:focus-within { border-color:var(--zone); box-shadow:0 0 0 3px var(--zone-focus); } .input-group > input, .input-group > select, .input-group > textarea { min-width:0; min-height:2.75rem; padding:0 var(--sp-4); border:0; background:transparent; color:var(--ink); font-size:var(--fs-base); } .input-group > input { flex:1 1 auto; } .input-group > input:focus, .input-group > select:focus { outline:0; box-shadow:none; } /* 앞에 붙는 셀렉트는 가는 선으로만 나눈다 */ .input-group > select { flex:0 0 auto; padding-right:var(--sp-7); border-right:1px solid var(--line-soft); background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center / 0.875rem auto; font-weight:700; appearance:none; } .input-group > input, .input-group > select { border-radius:0; } /* 끝에 붙는 단추 — 면을 채우지 않는다. 묶음이 이미 테두리로 한 덩이임을 말하고 있어서, 그 안에서 단추까지 면을 깔면 상자 안에 상자가 하나 더 생긴 것처럼 무거워진다. 아이콘과 색으로만 선다. */ .input-group > button, .input-group > .btn-primary, .input-group > .btn-secondary, .input-group > .btn-quiet { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); flex:0 0 auto; min-height:2.75rem; padding:0 var(--sp-4); border:0; border-radius:0; background:transparent; color:var(--zone-deep); font-size:var(--fs-base); font-weight:700; cursor:pointer; transition:color var(--t-fast), background-color var(--t-fast); } .input-group > button:hover, .input-group > .btn-primary:hover, .input-group > .btn-secondary:hover, .input-group > .btn-quiet:hover { background:var(--zone-wash); color:var(--zone); box-shadow:none; } .input-group > button svg { flex:0 0 auto; } /* 알약 꼴 — 목록 위에 떠 있는 검색 바에 쓴다 */ .input-group-pill { border-radius:var(--r-pill); } /* 찾기 단추가 아이콘 하나뿐일 때 — 정사각에 가까운 누를 자리. 위의 «.input-group > .btn-primary» 와 특이도가 같으므로 반드시 그 뒤에 온다 */ .input-group > .btn-search { width:3rem; padding:0; } .input-group-pill > input:first-child, .input-group-pill > select:first-child { padding-left:var(--sp-5); } /* 좁은 화면에서는 줄 전체를 쓴다. (예전에는 board.css 가 «.total-box .search-box{width:100%}» 로 화면마다 따로 챙기던 일이다 — 컴포넌트가 제 반응형을 갖게 한다) */ @media (max-width:767px) { .input-group { width:100%; } .input-group > select { max-width:40%; } } /* ── 고르기 목록 (option-box) ─────────────────────────────────────────────── 라디오 한 줄을 카드로 세운 목록. 설문이 쓴다. 예전에는 «.modal-custom form .option-box» 로 설문 모달 안에만 살았고, `input {display:none}` 으로 라디오를 아예 지웠다. 그래서 Tab 이 닿지 않아 아홉 개 중 하나도 키보드로 고를 수 없었다. 지금은 자리만 지우고 초점은 남긴다 — 초점이 오면 카드에 링이 서고, 고른 카드는 영역 색 면으로 바뀐다. ───────────────────────────────────────────────────────────────────────── */ .option-list { display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; list-style:none; } .option-box { border:1px solid var(--line-input); border-radius:var(--r-lg); transition:border-color var(--t-fast), background-color var(--t-fast); } /* 라디오는 지우지 않는다 — 눈에서만 뺀다. 초점은 그대로 받는다. 갈래를 못 박아 둔다 — 예전에 «.option-box input» 으로 두었더니 «기타» 뒤에 오는 자유 입력 칸까지 함께 숨어 화면 밖으로 나갔다. */ .option-box input[type="radio"], .option-box input[type="checkbox"] { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } /* 고르는 줄은 둘 중 하나다 — 라디오를 감싼