/* ========================================================================== 보험 자료 폴더 (library.html) home/home.css 의 색·글꼴·머리글·바닥글을 그대로 쓰고, 이 페이지에 필요한 것만 더합니다. 3D 폴더 카드 모양은 portal/animated-3d-card.css (#lib-folders 범위)에 있습니다. - 폴더마다 색이 다릅니다: --fc(강조색), --g1~--g3(그라데이션). library.js 가 style 로 넣어 줍니다. - '글씨 크게'를 누르면 가 되어 모든 글자가 커집니다. 그래서 크기는 rem 으로 씁니다. ========================================================================== */ :root { --lib-y: #FDE047; --lib-y-soft: #FFF7CC; --lib-paper: #FCFBF7; --lib-ok: #047857; --lib-bad: #B91C1C; } html.lib-lg { font-size: 115%; } html.lv-open { overflow: hidden; } .li { display: block; width: 1.25rem; height: 1.25rem; flex: none; } /* ---------- 머리말 ---------- */ .lib-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; background: linear-gradient(180deg, var(--mist), var(--white)); } .lib-kicker { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--navy-900); color: var(--white); font-size: 0.875rem; font-weight: 600; } .lib-h1 { margin-top: 1rem; font-family: var(--serif); font-size: var(--step-4); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--navy-900); } .lib-h1 .hl, .m-title span { background: linear-gradient(transparent 60%, var(--lib-y) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.08em; } .lib-lead { max-width: 40em; margin-top: 1rem; font-size: var(--step-1); line-height: 1.75; color: var(--slate); } .lib-lead strong { color: var(--navy-900); } .lib-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .lib-badges li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 0.9375rem; font-weight: 600; color: var(--navy-900); } .lib-badges .li { width: 1.1rem; height: 1.1rem; color: var(--steel); } .lib-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .lib-search { position: relative; flex: 1 1 20rem; max-width: 40rem; } .lib-search .li { position: absolute; left: 1rem; top: 50%; width: 1.3rem; height: 1.3rem; transform: translateY(-50%); color: var(--slate); pointer-events: none; } .lib-search input { width: 100%; height: 3.25rem; padding: 0 1rem 0 3rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: var(--step-0); } .lib-search input::placeholder { color: #8A96A8; } .lib-search input:focus-visible { outline: 3px solid var(--steel); outline-offset: 1px; border-color: var(--steel); } .lib-size-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 3.25rem; padding: 0 1.1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--navy-900); font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; } .lib-size-btn[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); } .lib-search-status { min-height: 1.6em; margin-top: 0.5rem; font-size: var(--step--1); font-weight: 600; color: var(--steel); } /* ---------- 3D 폴더 카드 (모양은 animated-3d-card.css) ---------- */ .lib-folders-wrap { padding-block: 0.5rem 1rem; } /* 폴더 8개: 넓은 화면 4줄 × 2, 태블릿 2줄, 휴대폰 1줄 */ #lib-folders .lib-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; perspective: 1500px; } :root #lib-folders .quick-hub-card.a3d-card.lib-folder { min-height: 18rem; } #lib-folders .lib-folder-art { display: block; width: 11rem; max-width: 72%; transition: transform 300ms ease; } #lib-folders .lib-folder-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16)); } @media (hover: hover) { #lib-folders .lib-folder:hover .lib-folder-art { transform: translateY(-3px); } } /* ---------- 폴더별 자료 ---------- */ .lib-section { padding-top: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: calc(var(--header-h) + 12px); } .lib-section-head { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; border-radius: 20px; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); color: var(--white); overflow: hidden; } .lsh-kicker { font-size: 0.875rem; font-weight: 700; opacity: 0.85; } .lsh-text h2 { margin-top: 0.25rem; font-family: var(--serif); font-size: var(--step-3); font-weight: 700; line-height: 1.3; color: var(--white); } .lsh-desc { margin-top: 0.35rem; opacity: 0.92; } .lsh-art svg { display: block; width: 100%; height: auto; } .lib-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.875rem; margin-top: 1.25rem; } .lib-tiles > li[hidden] { display: none; } .lib-tile { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; gap: 0.875rem; align-items: start; width: 100%; height: 100%; padding: 1.1rem 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out); } .lib-tile:hover { border-color: var(--fc); box-shadow: 0 12px 24px -14px rgba(13, 27, 46, 0.35); transform: translateY(-2px); } .lib-tile:focus-visible { outline: 3px solid var(--fc); outline-offset: 2px; } .lt-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: color-mix(in srgb, var(--fc) 12%, var(--white)); color: var(--fc); } .lt-icon .li { width: 1.5rem; height: 1.5rem; } .lt-title { display: block; font-size: var(--step-0); font-weight: 700; line-height: 1.4; color: var(--navy-900); } .lt-easy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.6; color: var(--slate); } .lt-go { align-self: center; color: var(--fc); } .lt-go .li { width: 1.25rem; height: 1.25rem; transition: transform 200ms var(--ease-out); } .lib-tile:hover .lt-go .li { transform: translateX(3px); } /* 한 번에 한 폴더만 (library.js 의 setView) */ .lib-section.is-off { display: none; } .lib-hero[hidden], .lib-folders-wrap[hidden] { display: none; } .lib-folder-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-top: clamp(1.25rem, 3vw, 2rem); } .lib-folder-nav[hidden], .lib-folder-pager[hidden] { display: none; } .lfn-back { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; padding: 0 1rem 0 0.7rem; border-radius: 999px; background: var(--navy-900); color: var(--white); font-weight: 700; text-decoration: none; } .lfn-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .lfn-chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.85rem; border: 1.5px solid color-mix(in srgb, var(--fc) 35%, var(--white)); border-radius: 999px; background: var(--white); color: var(--fc); font-size: 0.9375rem; font-weight: 700; text-decoration: none; } .lfn-chip:hover { border-color: var(--fc); } .lfn-chip[aria-current="page"] { border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g3)); color: var(--white); } .lib-folder-nav + .lib-sections .lib-section { padding-top: 1.25rem; } #lib-sections .lib-section:not(.is-off) { scroll-margin-top: calc(var(--header-h) + 12px); } .lib-folder-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2.5rem; } .lib-folder-pager a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-left: 5px solid var(--fc, var(--navy-900)); border-radius: 14px; background: var(--white); color: var(--navy-900); text-decoration: none; transition: box-shadow 200ms ease, transform 200ms var(--ease-out); } .lib-folder-pager a:hover { box-shadow: 0 12px 24px -14px rgba(13, 27, 46, 0.35); transform: translateY(-2px); } .lib-folder-pager .lfp-next { grid-column: 2; text-align: right; border-left: 1px solid var(--line); border-right: 5px solid var(--fc, var(--navy-900)); } .lib-folder-pager small { font-size: 0.8125rem; color: var(--slate); } .lib-folder-pager strong { font-size: var(--step-0); } .lib-empty { margin-top: 2rem; padding: 2rem; border: 1px dashed var(--line); border-radius: 14px; text-align: center; color: var(--slate); } .lib-sections-wrap { padding-bottom: clamp(3.5rem, 8vw, 6rem); } /* ---------- 자료 창 ---------- */ .lib-viewer { width: min(52rem, calc(100% - 2rem)); max-width: none; max-height: min(92vh, 64rem); margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(8, 19, 31, 0.4); overflow: hidden; } .lib-viewer[open] { display: flex; flex-direction: column; } .lib-viewer::backdrop { background: rgba(8, 19, 31, 0.6); } .lv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem 0.6rem 1.25rem; background: linear-gradient(135deg, var(--g1), var(--g2)); color: var(--white); } .lv-folder { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.9375rem; font-weight: 700; } .lv-folder .li { width: 1.2rem; height: 1.2rem; } .lv-count { margin-left: 0.25rem; font-weight: 500; opacity: 0.8; } .lv-close { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.16); color: var(--white); cursor: pointer; } .lv-close:hover { background: rgba(255, 255, 255, 0.28); } .lv-close:focus-visible { outline-color: var(--white); } .lv-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; background: var(--lib-paper); } .lv-body { padding: 1.75rem clamp(1.1rem, 4vw, 2.5rem) 2rem; } .lv-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); background: var(--white); } .lv-nav, .lv-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--navy-900); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer; } .lv-btn .li { width: 1.15rem; height: 1.15rem; } .lv-btn:hover:not(:disabled) { border-color: var(--navy-900); } .lv-btn:disabled { opacity: 0.4; cursor: default; } .lv-btn.is-kakao { background: var(--kakao); border-color: var(--kakao); color: var(--kakao-ink); } .lv-btn.is-kakao:hover { background: var(--kakao-hover); border-color: var(--kakao-hover); } .lv-btn.is-done { border-color: var(--lib-ok); color: var(--lib-ok); } /* 세대별 실손보험 그림 아래 '그림으로 저장' (그림 모양은 silson/silson-gens.css) */ .b-gens-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.9rem; } .b-gens-save { background: var(--white); } .b-gens-status { font-size: 0.9rem; font-weight: 700; color: var(--fc); } /* ---------- 자료 내용 ---------- */ .m-head { display: flex; align-items: center; gap: 0.875rem; } .m-icon { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 14px; background: color-mix(in srgb, var(--fc) 13%, var(--white)); color: var(--fc); } .m-icon .li { width: 1.75rem; height: 1.75rem; } .m-title { font-family: var(--sans); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: var(--navy-900); } .m-easy { margin-top: 1.25rem; padding: 1rem 1.25rem 1.1rem; border: 1.5px solid #F2D400; border-radius: 14px; background: var(--lib-y-soft); } .m-easy-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 800; color: #6B5200; } .m-easy-label .li { width: 1.1rem; height: 1.1rem; } .m-easy p { margin-top: 0.35rem; font-size: var(--step-1); line-height: 1.7; color: var(--ink); } .m-block { margin-top: 1.6rem; } .lv-body strong { color: var(--navy-900); font-weight: 700; } .b-title { display: inline-block; margin-bottom: 0.75rem; padding: 0.2rem 0.75rem; border-radius: 8px; background: var(--fc); color: var(--white); font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; line-height: 1.6; } .b-note { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--slate); } /* 두 칸 표 */ .b-kv { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; } .b-kv > div { display: grid; grid-template-columns: minmax(7em, 32%) minmax(0, 1fr); } .b-kv > div + div { border-top: 1px solid var(--line-soft); } .b-kv dt { padding: 0.75rem 0.9rem; background: color-mix(in srgb, var(--fc) 7%, var(--white)); font-size: 0.9375rem; font-weight: 700; color: var(--navy-900); } .b-kv dd { padding: 0.75rem 0.9rem; line-height: 1.65; } /* 여러 칸 표 */ .b-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--white); } .b-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.6; } .b-table th, .b-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; } .b-table tr:last-child > * { border-bottom: 0; } .b-table thead th { background: var(--fc); color: var(--white); font-weight: 700; white-space: nowrap; } .b-table tbody th { background: color-mix(in srgb, var(--fc) 6%, var(--white)); font-weight: 700; color: var(--navy-900); min-width: 5.5em; } .b-table tbody td { min-width: 7em; } /* 둘 비교 */ .b-compare { border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; } .bc-head, .bc-row { display: grid; grid-template-columns: minmax(0, 1fr) 8.5em minmax(0, 1fr); } .bc-a, .bc-b { padding: 0.75rem 0.9rem; font-weight: 800; text-align: center; color: var(--white); } .bc-a { grid-column: 1; background: var(--fc); } .bc-b { grid-column: 3; background: var(--navy-900); } .bc-head::before { content: ""; grid-column: 2; grid-row: 1; background: linear-gradient(90deg, var(--fc), var(--navy-900)); } .bc-row { border-top: 1px solid var(--line-soft); align-items: center; } .bc-label { grid-column: 2; grid-row: 1; justify-self: center; margin: 0.6rem 0; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--mist); font-size: 0.875rem; font-weight: 700; color: var(--navy-900); text-align: center; } .bc-cell { grid-row: 1; padding: 0.7rem 0.9rem; font-size: 0.96875rem; line-height: 1.6; text-align: center; } .bc-cell-a { grid-column: 1; } .bc-cell-b { grid-column: 3; } .bc-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 목록 */ .b-list { display: grid; gap: 0.5rem; } .b-list li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); line-height: 1.65; } .b-list .li { width: 1.35rem; height: 1.35rem; margin-top: 0.12rem; } .b-list-check .li { color: var(--lib-ok); } .b-list-warn li { border-color: #FECACA; background: #FEF2F2; } .b-list-warn .li { color: var(--lib-bad); } .b-dot { flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.65em; border-radius: 50%; background: var(--fc); } /* 순서 */ .b-steps { display: grid; } .b-steps li { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; padding-bottom: 1.1rem; } .b-steps li:last-child { padding-bottom: 0; } .b-steps li:not(:last-child)::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0; width: 2px; background: color-mix(in srgb, var(--fc) 35%, var(--white)); } .bs-num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--fc); color: var(--white); font-weight: 800; } .bs-body { display: flex; flex-direction: column; padding-top: 0.4rem; line-height: 1.6; } .bs-body strong { font-size: var(--step-0); } .bs-body span { color: var(--slate); } /* 연도별 변화 */ .b-timeline { display: grid; gap: 0.75rem; margin-left: 0.5rem; padding-left: 1.4rem; border-left: 3px solid color-mix(in srgb, var(--fc) 30%, var(--white)); } .b-timeline li { position: relative; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; line-height: 1.6; } .b-timeline li::before { content: ""; position: absolute; left: calc(-1.4rem - 9.5px); top: 0.45em; width: 0.8rem; height: 0.8rem; border: 3px solid var(--lib-paper); border-radius: 50%; background: var(--fc); box-sizing: content-box; } .bt-when { min-width: 7.5em; font-weight: 800; color: var(--fc); } /* 작은 카드 */ .b-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; } .b-card { padding: 0.9rem 1rem 1rem; border: 1px solid var(--line); border-top: 4px solid var(--fc); border-radius: 12px; background: var(--white); } .bk-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; } .bk-name { font-size: var(--step-0); font-weight: 800; color: var(--navy-900); } .bk-tag { padding: 0.1rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--fc) 11%, var(--white)); font-size: 0.8125rem; font-weight: 700; color: var(--fc); } .bk-text { margin-top: 0.4rem; font-size: 0.96875rem; line-height: 1.65; } .bk-good, .bk-bad { display: flex; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.55; } .bk-good { color: var(--lib-ok); } .bk-bad { color: var(--lib-bad); } .bk-good .li, .bk-bad .li { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; } .bk-list { display: grid; gap: 0.2rem; margin-top: 0.5rem; padding: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--slate); } .bk-list li { position: relative; padding-left: 0.9rem; } .bk-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--fc); } /* 큰 숫자 */ .b-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; } .b-stat > div { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); text-align: center; } .b-stat strong { display: block; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; line-height: 1.2; color: var(--fc); font-variant-numeric: tabular-nums; } .lv-body .b-stat strong { color: var(--fc); } .b-stat span { display: block; margin-top: 0.35rem; font-size: 0.90625rem; line-height: 1.5; color: var(--slate); } /* 막대 그래프 */ .b-bars { display: grid; gap: 0.35rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); } .bb-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 4.5em; align-items: center; gap: 0.75rem; } .bb-label { font-size: 0.9375rem; font-weight: 600; } .bb-track { height: 0.9rem; border-radius: 999px; background: var(--mist); overflow: hidden; } .bb-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--g1), var(--g3)); } .bb-val { text-align: right; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; } /* 넓은 순서 */ .b-rank { display: grid; gap: 0.6rem; } .br-bar { display: block; width: var(--w); min-width: 9rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: linear-gradient(90deg, var(--g1), var(--g2)); color: var(--white); } .lv-body .br-bar strong { color: var(--white); } .br-desc { display: block; margin-top: 0.25rem; padding-left: 0.25rem; font-size: 0.9375rem; color: var(--slate); } /* 이름표 */ .b-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .b-chips li { padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 0.9375rem; } .b-chips li.is-marked { border-color: var(--fc); color: var(--fc); font-weight: 700; } /* 청약서 질문 상자 */ .b-quote { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-left: 5px solid var(--fc); border-radius: 12px; background: var(--white); } .b-quote > .li { width: 1.75rem; height: 1.75rem; color: var(--fc); } .b-quote blockquote { margin: 0; } .b-quote blockquote p { font-size: var(--step-1); font-weight: 700; line-height: 1.6; color: var(--navy-900); } .b-quote figcaption { grid-column: 2; font-size: 0.9375rem; line-height: 1.65; color: var(--slate); } /* 사례별 판단 */ .b-cases { display: grid; gap: 0.625rem; } .bcs { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-left: 5px solid var(--bcs); border-radius: 12px; background: var(--white); } .bcs-yes { --bcs: #DC2626; --bcs-bg: #FEF2F2; --bcs-ink: #B91C1C; } .bcs-no { --bcs: #059669; --bcs-bg: #ECFDF5; --bcs-ink: #047857; } .bcs-warn { --bcs: #D97706; --bcs-bg: #FFFBEB; --bcs-ink: #B45309; } .bcs-num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mist); font-size: 0.9375rem; font-weight: 800; color: var(--navy-900); } .bcs-q { font-weight: 600; line-height: 1.6; color: var(--ink); } .bcs-a { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.45rem; font-size: 0.96875rem; line-height: 1.55; } .bcs-verdict { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--bcs-bg); color: var(--bcs-ink); font-size: 0.875rem; font-weight: 800; white-space: nowrap; } .bcs-verdict .li { width: 1rem; height: 1rem; } .bcs-why { color: var(--slate); } .bcs-more { margin-top: 0.4rem; padding: 0.4rem 0.7rem; border-radius: 8px; background: #FFFBEB; font-size: 0.90625rem; line-height: 1.55; color: #92400E; } /* 알아 두세요 */ .b-tip { display: flex; gap: 0.75rem; padding: 1rem 1.1rem; border: 1.5px dashed color-mix(in srgb, var(--fc) 45%, var(--white)); border-radius: 14px; background: color-mix(in srgb, var(--fc) 7%, var(--white)); } .b-tip > .li { width: 1.6rem; height: 1.6rem; color: var(--fc); } .lv-body .b-tip > div > strong { color: var(--fc); font-size: 0.9375rem; } .b-tip p { margin-top: 0.15rem; line-height: 1.7; } .m-foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.84375rem; line-height: 1.6; color: var(--slate); } .m-src { font-weight: 600; margin-bottom: 0.25rem; } /* ---------- 화면 크기별 ---------- */ @media (max-width: 1100px) { #lib-folders .lib-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .lib-section-head { grid-template-columns: minmax(0, 1fr) 10rem; } } @media (max-width: 734px) { :root #lib-folders .quick-hub-card.a3d-card.lib-folder { min-height: 15rem; } #lib-folders .lib-folder-art { width: 9.5rem; } } @media (max-width: 640px) { #lib-folders .lib-folder-grid { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; } .lib-section-head { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.25rem 1.4rem; } .lsh-art { order: -1; width: 9rem; } .lib-tiles { grid-template-columns: minmax(0, 1fr); } .lib-viewer { width: 100%; height: 100%; max-height: none; border-radius: 0; } .lv-actions { padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); } .lv-nav, .lv-cta { width: 100%; } .lv-nav .lv-btn { flex: 1; } .lv-cta .lv-btn { flex: 1 1 auto; } .b-kv > div { grid-template-columns: minmax(0, 1fr); } .b-kv dt { padding-bottom: 0.3rem; } .b-kv dd { padding-top: 0.3rem; } .bc-head, .bc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bc-head::before { display: none; } .bc-a { grid-column: 1; } .bc-b { grid-column: 2; } .bc-label { grid-column: 1 / -1; grid-row: 1; margin: 0.6rem 0 0; } .bc-cell { grid-row: 2; } .bc-cell-a { grid-column: 1; border-right: 1px dashed var(--line); } .bc-cell-b { grid-column: 2; } .bb-row { grid-template-columns: 5em minmax(0, 1fr) 4em; gap: 0.5rem; } } @media (prefers-reduced-motion: reduce) { .lib-tile, .lt-go .li, #lib-folders .lib-folder-art { transition: none; } .lib-tile:hover { transform: none; } }