@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&family=Noto+Serif+KR:wght@300;500&display=swap'); /* 온산 포트폴리오 페이지(/pages/ohn) 전용 — #ohn-pf 안에서만 적용 (2026-10-14 B안) */ #ohn-pf{--ink:#2b2a26;--sub:#6b665c;--line:#e3dccd;--paper:#faf7f0;--card:#fffdf8;--accent:#3f5f4a;--seal:#9b2d20} #ohn-pf,#ohn-pf *{box-sizing:border-box} #ohn-pf{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Serif KR','Batang','바탕',serif;line-height:1.75;word-break:keep-all} #ohn-pf a{color:inherit;text-decoration:none;border-bottom:1px solid #cfc6b0} #ohn-pf .wrap{max-width:760px;margin:0 auto;padding:0 18px 56px} #ohn-pf .hero{background:linear-gradient(160deg,#2f4a3a,#1f3328);color:#f4efe2;padding:40px 22px 34px;text-align:center} #ohn-pf .hero .badge{display:inline-block;border:1px solid #c9b98f;color:#e8dcb8;font-family:'Noto Sans KR',sans-serif;font-size:12.5px;letter-spacing:.12em;padding:4px 12px;border-radius:20px} #ohn-pf .hero img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid #e8dcb8;margin:22px auto 14px;display:block} #ohn-pf .hero h1{font-size:30px;margin:0;letter-spacing:.06em} #ohn-pf .hero h1 small{font-size:16px;font-weight:400;color:#d8ccaa;margin-left:6px} #ohn-pf .hero .pen{font-size:14px;color:#cfc3a3;margin-top:2px;font-family:'Noto Sans KR',sans-serif} #ohn-pf .hero .role{margin-top:12px;font-size:15px;color:#efe7d2} #ohn-pf .hero .tag{margin:18px auto 0;max-width:520px;font-size:15.5px;color:#fff;font-style:italic;border-top:1px solid rgba(232,220,184,.35);padding-top:16px} #ohn-pf .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:-22px 0 8px;position:relative} #ohn-pf .stat{background:var(--card);border:1px solid var(--line);border-radius:10px;text-align:center;padding:12px 4px;box-shadow:0 2px 8px rgba(0,0,0,.05)} #ohn-pf .stat b{display:block;font-size:20px;color:var(--accent)} #ohn-pf .stat span{font-family:'Noto Sans KR',sans-serif;font-size:11.5px;color:var(--sub);line-height:1.35;display:block} #ohn-pf .sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 20px;margin-top:16px} #ohn-pf h2{font-size:19px;margin:0 0 14px;color:var(--accent);display:flex;align-items:center;gap:8px} #ohn-pf h2:before{content:'';width:6px;height:20px;background:var(--seal);border-radius:2px} #ohn-pf h3{font-size:15.5px;margin:18px 0 8px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px} #ohn-pf p{margin:0 0 10px} #ohn-pf .basics{display:grid;grid-template-columns:72px 1fr;gap:6px 12px;font-size:15px} #ohn-pf .basics dt{font-family:'Noto Sans KR',sans-serif;color:var(--sub);font-size:13.5px;padding-top:2px} #ohn-pf .basics dd{margin:0} #ohn-pf ul.tl{list-style:none;margin:0;padding:0} #ohn-pf ul.tl li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px} #ohn-pf ul.tl li:last-child{border-bottom:0} #ohn-pf .yr{font-family:'Noto Sans KR',sans-serif;font-size:13px;color:var(--seal);padding-top:2px} #ohn-pf .tx em{font-style:normal;color:var(--sub);font-size:13.5px} #ohn-pf .note{font-size:13.5px;color:var(--sub);margin-top:10px} #ohn-pf .serial{border-left:3px solid var(--accent);padding:4px 0 4px 14px;margin-bottom:16px} #ohn-pf .serial .m{font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--sub)} #ohn-pf .serial .t{font-weight:700;font-size:16px} #ohn-pf .serial .p{font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--seal)} #ohn-pf .serial .d{font-size:14.5px;margin-top:4px} #ohn-pf details{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:#fbf9f3} #ohn-pf summary{cursor:pointer;padding:9px 12px;font-weight:600;font-size:14.5px;list-style:none} #ohn-pf summary::-webkit-details-marker{display:none} #ohn-pf summary:after{content:' ▾';color:var(--sub)} #ohn-pf summary .cnt{font-family:'Noto Sans KR',sans-serif;font-weight:400;font-size:12.5px;color:var(--sub);margin-left:6px} #ohn-pf table.cl{width:100%;border-collapse:collapse;font-size:13.5px} #ohn-pf table.cl td{padding:5px 8px;border-top:1px dashed var(--line);vertical-align:top} #ohn-pf table.cl td.no{width:44px;font-family:'Noto Sans KR',sans-serif;color:var(--seal);font-size:12px;white-space:nowrap} #ohn-pf table.cl td.dt{width:84px;font-family:'Noto Sans KR',sans-serif;color:var(--sub);font-size:12px;white-space:nowrap} #ohn-pf .prop{background:#f3f0e6;border-radius:10px;padding:14px 16px;margin-bottom:12px} #ohn-pf .prop .n{font-weight:700;font-size:16.5px} #ohn-pf .prop .c{font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--accent);margin:2px 0 6px} #ohn-pf .prop .d{font-size:14.5px} #ohn-pf ol.str{margin:0;padding-left:20px;font-size:15px} #ohn-pf ol.str li{margin-bottom:6px} #ohn-pf .sumbox{background:#2f4a3a;color:#f4efe2;border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:6px} #ohn-pf .pbook{display:grid;grid-template-columns:64px 1fr auto;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px;align-items:baseline} #ohn-pf .pbook .k{font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--seal)} #ohn-pf .pbook .pub{color:var(--sub);font-size:13px} #ohn-pf .pbook .kb{font-family:'Noto Sans KR',sans-serif;font-size:11.5px;border:1px solid var(--accent);color:var(--accent);border-radius:4px;padding:0 6px;white-space:nowrap} #ohn-pf .book{padding:9px 0;border-bottom:1px dashed var(--line)} #ohn-pf .book .bt{font-size:15.5px;font-weight:600} #ohn-pf .book .ser{font-family:'Noto Sans KR',sans-serif;font-weight:400;font-size:12px;color:var(--sub)} #ohn-pf .book .bm{font-family:'Noto Sans KR',sans-serif;font-size:12px;color:var(--seal)} #ohn-pf .book .toc{font-size:13px;color:var(--sub);line-height:1.6} #ohn-pf .sec.poem{text-align:center;background:#f6f2e7} #ohn-pf .sec.poem .lines{font-size:15.5px;line-height:2} #ohn-pf .sec.poem .src{font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--sub);margin-top:10px} #ohn-pf .ft{text-align:center;font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--sub);margin-top:26px} #ohn-pf .seal{display:inline-block;border:2px solid var(--seal);color:var(--seal);font-weight:700;padding:2px 8px;margin-top:8px;font-family:'Noto Serif KR',serif;letter-spacing:.1em} @media (max-width:560px){#ohn-pf .stats{grid-template-columns:repeat(3,1fr)} #ohn-pf .hero h1{font-size:26px} #ohn-pf ul.tl li{grid-template-columns:78px 1fr} #ohn-pf .pbook{grid-template-columns:56px 1fr} #ohn-pf .pbook .kb{grid-column:2} #ohn-pf table.cl td.dt{display:none}} @media print{#ohn-pf{background:#fff} #ohn-pf .hero,#ohn-pf .sumbox{-webkit-print-color-adjust:exact;print-color-adjust:exact} #ohn-pf .prop,#ohn-pf .serial,#ohn-pf .book,#ohn-pf .pbook{break-inside:avoid} #ohn-pf a{border:0}} #ohn-pf{margin:0 -4px;border-radius:10px;overflow:hidden;font-family:inherit} #ohn-pf .hero{border-radius:10px 10px 0 0} #ohn-pf .hero img{border-bottom:4px solid #e8dcb8!important} #ohn-pf h1,#ohn-pf h2,#ohn-pf h3{border-left:0!important;padding-left:0!important;text-indent:0!important} #ohn-pf p{text-indent:0!important} #ohn-pf h2:before{display:none} #ohn-pf h2{padding-bottom:8px!important;border-bottom:1px solid var(--line)!important} #ohn-pf .serial{border-left:0;padding:10px 0 10px;border-bottom:1px dashed var(--line)} #ohn-pf .ecov{display:grid;grid-template-columns:repeat(auto-fill,72px);justify-content:start;gap:14px 12px;margin:8px 0 6px} #ohn-pf .ecov a{border:0;display:block;text-align:center;font-size:11px;line-height:1.3;color:var(--sub);word-break:keep-all} #ohn-pf .ecov img{width:72px!important;height:auto;display:block;margin:0 auto 5px;box-shadow:0 1px 3px rgba(0,0,0,.18);border-radius:1px} @media (max-width:560px){#ohn-pf .ecov{grid-template-columns:repeat(auto-fill,64px);gap:12px 10px}#ohn-pf .ecov img{width:64px!important}} /* v3.1 2026-10-20: 요약칸 글씨색 + 모바일 B안(가는 고딕), 스킨 강제 글씨크기 이김 */ #ohn-pf .sumbox,#ohn-pf .sumbox *{color:#f4efe2!important}html body#tt-body-page .contents_style #ohn-pf .sumbox p{margin:0!important}#ohn-pf .hero p{color:inherit} @media (max-width:600px){html body#tt-body-page .contents_style #ohn-pf{font-family:'Noto Sans KR','Noto Sans CJK KR',sans-serif!important;font-weight:300!important;font-size:13px!important;line-height:1.7!important;--f-body:13px;margin:0 -8px;-webkit-font-smoothing:antialiased;letter-spacing:-.01em} html body#tt-body-page .contents_style #ohn-pf b,html body#tt-body-page .contents_style #ohn-pf strong,html body#tt-body-page .contents_style #ohn-pf .serial .t,html body#tt-body-page .contents_style #ohn-pf .prop .n,html body#tt-body-page .contents_style #ohn-pf .book .bt,html body#tt-body-page .contents_style #ohn-pf summary{font-weight:500!important} html body#tt-body-page .contents_style #ohn-pf .yr,html body#tt-body-page .contents_style #ohn-pf .serial .m,html body#tt-body-page .contents_style #ohn-pf .serial .p,html body#tt-body-page .contents_style #ohn-pf .pbook .k,html body#tt-body-page .contents_style #ohn-pf .book .ser,html body#tt-body-page .contents_style #ohn-pf .book .bm,html body#tt-body-page .contents_style #ohn-pf .ft,html body#tt-body-page .contents_style #ohn-pf .basics dt,html body#tt-body-page .contents_style #ohn-pf .stat span,html body#tt-body-page .contents_style #ohn-pf .note,html body#tt-body-page .contents_style #ohn-pf .tx em{font-family:'Noto Sans KR','Noto Sans CJK KR',sans-serif!important;font-weight:300!important} html body#tt-body-page .contents_style #ohn-pf .wrap{padding:0 8px 36px}html body#tt-body-page .contents_style #ohn-pf .hero{padding:26px 16px 22px}html body#tt-body-page .contents_style #ohn-pf .hero img{width:104px;height:104px;margin:0 auto 10px;border-width:3px} html body#tt-body-page .contents_style #ohn-pf .hero h1{font-size:21px!important;font-weight:500!important}html body#tt-body-page .contents_style #ohn-pf .hero h1 small{font-size:13px!important}html body#tt-body-page .contents_style #ohn-pf .hero .role{font-size:12.5px!important;margin-top:6px}html body#tt-body-page .contents_style #ohn-pf .hero .tag{font-size:13px!important;padding-top:12px;margin-top:12px} html body#tt-body-page .contents_style #ohn-pf .sec{padding:15px 13px;margin-top:10px;border-radius:8px}html body#tt-body-page .contents_style #ohn-pf h2{font-size:15px!important;font-weight:500!important;margin-bottom:10px;padding-bottom:6px!important}html body#tt-body-page .contents_style #ohn-pf h3{font-size:13.5px!important;font-weight:500!important;margin:14px 0 6px} html body#tt-body-page .contents_style #ohn-pf p,html body#tt-body-page .contents_style #ohn-pf .basics,html body#tt-body-page .contents_style #ohn-pf ul.tl li,html body#tt-body-page .contents_style #ohn-pf .pbook,html body#tt-body-page .contents_style #ohn-pf ol.str,html body#tt-body-page .contents_style #ohn-pf .serial .d,html body#tt-body-page .contents_style #ohn-pf .prop .d{font-size:13px!important;line-height:1.7!important} html body#tt-body-page .contents_style #ohn-pf ul.tl li{grid-template-columns:62px 1fr;gap:8px;padding:6px 0}html body#tt-body-page .contents_style #ohn-pf .yr{font-size:11.5px!important} html body#tt-body-page .contents_style #ohn-pf .tx em,html body#tt-body-page .contents_style #ohn-pf .note,html body#tt-body-page .contents_style #ohn-pf .book .toc,html body#tt-body-page .contents_style #ohn-pf table.cl,html body#tt-body-page .contents_style #ohn-pf table.cl td{font-size:12px!important}html body#tt-body-page .contents_style #ohn-pf .serial .m,html body#tt-body-page .contents_style #ohn-pf .serial .p,html body#tt-body-page .contents_style #ohn-pf .ft{font-size:11px!important} html body#tt-body-page .contents_style #ohn-pf .serial .t,html body#tt-body-page .contents_style #ohn-pf .book .bt,html body#tt-body-page .contents_style #ohn-pf .prop .n{font-size:14px!important}html body#tt-body-page .contents_style #ohn-pf .sec.poem .lines,html body#tt-body-page .contents_style #ohn-pf .sec.poem .lines p{font-size:13.5px!important;line-height:1.95!important} html body#tt-body-page .contents_style #ohn-pf .sec.poem .lines,html body#tt-body-page .contents_style #ohn-pf .hero .tag,html body#tt-body-page .contents_style #ohn-pf .hero h1{font-family:'Noto Serif KR','Noto Serif CJK KR',serif!important}} /* v3.2 2026-10-20: 모바일 — 연도 목록 내어쓰기 없앰, 시집 교보문고 작게 윗줄로 */ @media (max-width:600px){html body#tt-body-page .contents_style #ohn-pf ul.tl{padding:0!important;margin:0!important;list-style:none!important} html body#tt-body-page .contents_style #ohn-pf ul.tl li{display:grid!important;grid-template-columns:62px 1fr!important;gap:8px;list-style:none!important;text-indent:0!important;padding-left:0!important;margin-left:0!important} html body#tt-body-page .contents_style #ohn-pf ul.tl li::marker{content:''}html body#tt-body-page .contents_style #ohn-pf ul.tl li *{text-indent:0!important} html body#tt-body-page .contents_style #ohn-pf .tx i,html body#tt-body-page .contents_style #ohn-pf .tx em{font-style:normal!important;color:var(--sub);font-size:12px!important} html body#tt-body-page .contents_style #ohn-pf .pbook{display:grid!important;grid-template-columns:50px 1fr auto!important;gap:6px;align-items:baseline;text-indent:0!important} html body#tt-body-page .contents_style #ohn-pf .pbook .kb{grid-column:auto!important;font-size:10px!important;line-height:1.5!important;padding:0 4px;align-self:center}} /* v3.3 2026-10-20: PC·모바일 공통 — 연도 목록 내어쓰기(text-indent) 없앰 */ html body#tt-body-page .contents_style #ohn-pf ul.tl{padding:0!important;margin:0!important;list-style:none!important} html body#tt-body-page .contents_style #ohn-pf ul.tl li{display:grid!important;list-style:none!important;text-indent:0!important;padding-left:0!important;margin-left:0!important} html body#tt-body-page .contents_style #ohn-pf ul.tl li::marker{content:''}html body#tt-body-page .contents_style #ohn-pf ul.tl li *{text-indent:0!important} html body#tt-body-page .contents_style #ohn-pf .tx i{font-style:normal!important;color:var(--sub)} /* v3.4 2026-10-20: 연도 없는 줄(논문 등)은 한 줄 전체 폭 */ html body#tt-body-page .contents_style #ohn-pf ul.tl li>.tx:only-child,html body#tt-body-page .contents_style #ohn-pf ul.tl li>:only-child{grid-column:1/-1!important} /* v3.5 2026-10-20: 본문 문단 글씨색 고정(스킨 파랑 차단) */ html body#tt-body-page .contents_style #ohn-pf p{color:var(--ink)!important}html body#tt-body-page .contents_style #ohn-pf p.note{color:var(--sub)!important}html body#tt-body-page .contents_style #ohn-pf .sumbox p,html body#tt-body-page .contents_style #ohn-pf .hero p{color:#f4efe2!important}