/* ============================================================ 비온 특허법률사무소 — IP 칼럼 공통 스타일 column.css 칼럼 HTML 7편이 공유합니다. 여기를 고치면 전편에 반영됩니다. 새 칼럼을 만들 때는 에 아래 한 줄만 넣으면 됩니다. 폰트(Pretendard, Noto Serif KR, Montserrat)는 각 HTML의 에서 계속 불러옵니다. 이 파일에는 포함돼 있지 않습니다. ============================================================ */ :root { --navy: #16233D; --navy-deep: #111A2E; --navy-tint: #F1ECE1; --ivory: #F8F4EC; --ivory-lift: #FDFBF6; --ivory-soft: #F1ECE1; --line: #E4DDD0; --text: #111A2E; --muted: #5B6472; --caption: #918E85; --accent: #7C93A6; --serif-kr: 'Noto Serif KR', serif; --sans: 'Pretendard', 'Pretendard Variable', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif; --mont: 'Montserrat', 'Pretendard', system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--ivory); font-family: var(--sans); color: var(--text); line-height: 1.85; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: normal; } .wrap { max-width: 760px; margin: 0 auto; background: var(--ivory-lift); padding: 0 0 80px; } /* Header */ header.masthead { border-top: 4px solid var(--navy); padding: 46px 56px 34px; border-bottom: 1px solid var(--line); } /* Logo & Eyebrow */ .eyebrow { display: flex; align-items: center; font-size: 12px; letter-spacing: 0.18em; color: var(--caption); font-family: var(--mont); font-weight: 600; margin-bottom: 18px; } .logo-text { font-family: var(--sans); font-size: 16px; font-weight: 800; letter-spacing: 0; margin-right: 8px; } .logo-text .be { color: #1B365D; } .logo-text .on { color: #677A8B; } .eyebrow-text { padding-top: 2px; } h1 { font-family: var(--serif-kr); font-size: 32px; line-height: 1.42; font-weight: 400; color: var(--navy-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .deck { font-size: 16px; color: var(--muted); font-weight: 400; margin: 0; } .byline { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .byline strong { color: var(--navy); font-weight: 500; } main { padding: 44px 56px 0; } h2 { font-family: var(--serif-kr); font-size: 21px; color: var(--navy-deep); font-weight: 500; margin: 54px 0 20px; padding-left: 14px; border-left: 4px solid var(--navy); line-height: 1.5; letter-spacing: -0.01em; } h3 { font-family: var(--serif-kr); font-size: 16px; color: var(--navy); font-weight: 700; margin: 32px 0 10px; } p { margin: 0 0 18px; font-size: 15.5px; font-weight: 400; } strong { font-weight: 600; color: var(--navy-deep); } /* Opening quotes */ .voices { background: var(--navy-tint); border-radius: 4px; padding: 26px 30px; margin: 0 0 30px; } .voices p { margin: 0 0 12px; font-size: 15.5px; color: var(--navy-deep); font-weight: 400; padding-left: 18px; position: relative; } .voices p:last-child { margin-bottom: 0; } .voices p::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* Pull callout */ .pull { margin: 34px 0; padding: 22px 26px; border-left: 3px solid var(--accent); background: var(--ivory-soft); font-size: 16.5px; font-weight: 500; color: var(--navy-deep); line-height: 1.7; } /* Warning box */ .warn { margin: 30px 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .warn-h { background: var(--navy); color: var(--ivory); padding: 12px 22px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; } .warn-b { padding: 20px 24px; } .warn-b p:last-child { margin-bottom: 0; } /* Table */ .tbl-cap { font-size: 13px; color: var(--muted); margin: 30px 0 10px; font-weight: 500; } table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; } thead th { background: var(--navy); color: var(--ivory); font-weight: 500; padding: 12px 14px; text-align: left; font-size: 13.5px; } tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 400; } tbody tr:nth-child(even) { background: var(--ivory); } tbody td:first-child { font-weight: 500; color: var(--navy-deep); white-space: nowrap; } /* Checklist */ .steps { counter-reset: s; list-style: none; padding: 0; margin: 26px 0; } .steps li { counter-increment: s; position: relative; padding: 0 0 20px 46px; font-size: 15.5px; font-weight: 400; } .steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--ivory); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .steps li b { display: block; color: var(--navy-deep); font-weight: 500; margin-bottom: 2px; } /* Series navigation */ .series { margin: 46px 0 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--ivory); } .series .series-h { font-family: var(--mont); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--caption); margin-bottom: 12px; } .series ol { margin: 0; padding-left: 0; list-style: none; counter-reset: c; } .series li { counter-increment: c; font-size: 14px; color: var(--muted); line-height: 1.7; padding: 4px 0 4px 26px; position: relative; } .series li::before { content: counter(c) '.'; position: absolute; left: 0; font-family: var(--mont); font-weight: 700; font-size: 12.5px; color: var(--accent); } .series li b { color: var(--navy-deep); font-weight: 600; } .series li.here { color: var(--navy-deep); } .series li.here::before { color: var(--navy); } .series .here-tag { display: inline-block; font-size: 10.5px; font-family: var(--mont); font-weight: 700; letter-spacing: 0.08em; color: var(--ivory); background: var(--navy); padding: 1px 7px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; } .close h3 { color: var(--ivory); margin: 0 0 12px; font-size: 17px; } .close p { color: var(--ivory-soft); font-size: 14.5px; margin-bottom: 0; font-weight: 400; } .close p strong { color: var(--ivory); } .close .firm { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(248,244,236,0.18); font-size: 13px; color: var(--accent); } .close .firm b { color: var(--ivory); font-weight: 500; } .close .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .close .cta a { display: inline-block; padding: 11px 20px; border-radius: 3px; font-size: 14px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .close .cta .btn-primary { background: var(--ivory); color: var(--navy); font-weight: 600; } .close .cta .btn-primary:hover { background: #fff; } .close .cta .btn-ghost { border: 1px solid rgba(248,244,236,0.35); color: var(--ivory); } .close .cta .btn-ghost:hover { border-color: var(--ivory); background: rgba(248,244,236,0.08); } .more { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; } .more span { display: block; color: var(--caption); font-size: 12.5px; letter-spacing: .04em; margin-bottom: 8px; } .more a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); font-weight: 500; display: block; margin-bottom: 6px; } .more a:hover { border-color: var(--navy); } .disclaimer { margin-top: 26px; font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.7; } /* Case study */ .case { margin: 28px 0; padding: 24px 26px; background: var(--ivory); border: 1px solid var(--line); border-radius: 4px; } .case-tag { display: inline-block; font-size: 11px; font-family: var(--mont); font-weight: 700; letter-spacing: 0.1em; color: var(--ivory); background: var(--navy); padding: 4px 10px; border-radius: 2px; margin-bottom: 14px; } .case p { margin-bottom: 12px; } .case p:last-child { margin-bottom: 0; } .case-take { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--navy-deep); font-weight: 500; } .sources { margin: 0 0 34px; padding-left: 20px; } .sources li { margin-bottom: 8px; font-size: 13px; line-height: 1.65; color: var(--muted); } .sources a { color: var(--navy); text-decoration-color: var(--accent); text-underline-offset: 3px; } /* Closing block */ .close { margin-top: 50px; padding: 30px 32px; background: var(--navy); border-radius: 4px; color: var(--ivory); } /* 시리즈 내비게이션 바로 뒤에 오는 경우 간격을 좁힌다 */ .series + .close { margin-top: 24px; } .tbl-note { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-bottom: 0; line-height: 1.7; } /* 모바일 */ @media (max-width: 640px) { header.masthead { padding: 34px 22px 26px; } main { padding: 32px 22px 0; } h1 { font-size: 24px; } h2 { font-size: 18.5px; } table { font-size: 13px; } tbody td:first-child { white-space: normal; } }