/* Brim 하위 문서 페이지 — 소개 페이지(/brim/)와 같은 디자인 언어 */ :root{ color-scheme: light; --bg:#F4EFE6; --surface:#FBF8F3; --ink:#2A2521; --ink2:#5C544B; --ink3:#8A8073; --line:#E4DCCE; --line2:#DFD6C6; --accent:#3E9E6E; --accent-dark:#1F5B3D; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont, 'Apple SD Gothic Neo',system-ui,sans-serif; word-break:keep-all; overflow-wrap:anywhere; line-height:1.7; } img{max-width:100%} [hidden]{display:none !important} /* 언어 전환 — head 의 인라인 스크립트가 첫 페인트 전에 을 심는다. JS 가 없으면 이 규칙들이 걸리지 않아 두 언어가 모두 보인다. */ html[data-lang="ko"] #sec-en, html[data-lang="en"] #sec-ko, html[data-lang="ko"] .l-en, html[data-lang="en"] .l-ko, html[data-lang] #lang-divider { display:none !important } html[data-lang="ko"] .lang button[data-lang="ko"], html[data-lang="en"] .lang button[data-lang="en"]{ background:var(--surface); color:var(--ink); font-weight:700; box-shadow:0 1px 2px rgba(42,37,33,.12); } /* 언어 전환 — head 의 인라인 스크립트가 을 첫 페인트 전에 심는다. JS 가 없으면 규칙이 걸리지 않아 두 언어가 모두 보인다. */ html[data-lang="ko"] #sec-en, html[data-lang="en"] #sec-ko, html[data-lang="ko"] #page-en, html[data-lang="en"] #page-ko, html[data-lang] #lang-divider { display: none !important; } .wrap{max-width:820px; margin:0 auto; padding-inline:28px} /* header — 소개 페이지와 동일 */ header{position:sticky; top:0; z-index:20; background:rgba(237,231,221,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line2)} header .wrap{max-width:1120px; display:flex; align-items:center; gap:14px; padding-block:14px} header .brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit} header .brand img{width:28px; height:28px; border-radius:24%; display:block} header .brand b{font-size:16px; font-weight:800; letter-spacing:-.4px} header nav{margin-left:auto; display:flex; gap:18px} header nav a{font-size:13.5px; font-weight:600; color:var(--ink3); text-decoration:none} header nav a:hover{color:var(--ink)} /* 문서 머리 */ .doc-head{padding-block:64px 26px} .doc-head h1{margin:0; font-size:40px; line-height:1.2; letter-spacing:-1.6px; font-weight:800} .doc-head .meta{margin:14px 0 0; font-size:13.5px; color:var(--ink3); font-weight:600} .lang{display:inline-flex; gap:2px; padding:3px; margin-top:24px; background:#E3DBCC; border-radius:999px} .lang button{ font:inherit; font-size:13px; font-weight:600; cursor:pointer; border:0; background:transparent; color:#6E665C; padding:7px 16px; border-radius:999px; } /* 본문 카드 */ .doc{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:44px 40px; margin-bottom:12px; } .doc > :first-child{margin-top:0} .doc h2{ margin:38px 0 0; padding-top:26px; border-top:1px solid #EFE8DC; font-size:19px; font-weight:800; letter-spacing:-.4px; } .doc h2:first-of-type{border-top:0; padding-top:0; margin-top:0} .doc p{margin:12px 0 0; font-size:15.5px; line-height:1.82; color:var(--ink2)} .doc ul{margin:12px 0 0; padding-left:22px; color:var(--ink2)} .doc li{margin-top:8px; font-size:15.5px; line-height:1.82} .doc strong{color:var(--ink); font-weight:700} .doc a{color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px} .doc .intro{font-size:16px; color:var(--ink2)} /* 지원 페이지 */ .contact-card{ background:var(--ink); color:#F4EFE6; border-radius:24px; padding:38px 36px; margin-bottom:12px; } .contact-card h2{margin:0; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9A9084; border:0; padding:0} .contact-card .mail{display:inline-block; margin-top:12px; font-size:clamp(21px,4.4vw,30px); font-weight:800; letter-spacing:-.8px; color:#F4EFE6; text-decoration:none; border-bottom:2px solid #6E6459; padding-bottom:4px} .contact-card .mail:hover{border-bottom-color:#F4EFE6} .contact-card p{margin:18px 0 0; font-size:14.5px; line-height:1.8; color:#C0B7AB} .qa{margin-top:30px} .qa:first-of-type{margin-top:0} .qa h3{margin:0; font-size:16.5px; font-weight:700; letter-spacing:-.3px; line-height:1.6} .qa p{margin:9px 0 0} .lang-divider{margin:44px 0 0; border:0; border-top:1px dashed var(--line2)} footer{border-top:1px solid var(--line2); margin-top:52px} footer .wrap{max-width:1120px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-block:26px 42px; font-size:13px; color:var(--ink3)} footer nav{display:flex; flex-wrap:wrap; gap:16px} footer a{color:inherit; text-decoration:none} footer a:hover{color:var(--ink)} /* 앱 설정 화면 웹뷰 전용 페이지(/brim/app/…, body.app) — 머리글·바닥글 없이 본문만. */ .app main{padding-bottom:36px} .app .doc-head{padding-block:28px 18px} .app .doc-head h1{font-size:24px; letter-spacing:-.8px} .app .doc-head .meta{margin-top:8px} .app .lang{margin-top:16px} @media (max-width:620px){ .wrap{padding-inline:20px} .doc-head{padding-block:42px 20px} .doc-head h1{font-size:29px; letter-spacing:-1px} .doc{padding:30px 24px; border-radius:20px} .contact-card{padding:30px 24px; border-radius:20px} .doc h2{font-size:17.5px} .doc p, .doc li{font-size:15px} }