๋งˆ์ง€๋ง‰ ์ผ๊ฒฉ: ๊ธ€๋ž˜์Šค๊ณ ์˜ ์ž”ํ˜นํ•œ 25๋…„ ๊ฐฑ๋‹จ ์‹ธ์›€์ด ๋งˆ์นจ๋‚ด ๋๋‚˜๊ฐ€๊ณ  ์žˆ๋Š”๊ฐ€?

๋งˆ์ง€๋ง‰ ์ผ๊ฒฉ: ๊ธ€๋ž˜์Šค๊ณ ์˜ ์ž”ํ˜นํ•œ 25๋…„ ๊ฐฑ๋‹จ ์‹ธ์›€์ด ๋งˆ์นจ๋‚ด ๋๋‚˜๊ฐ€๊ณ  ์žˆ๋Š”๊ฐ€?

๋‹ค์Œ์€ ์ œ๊ณต๋œ ํ…์ŠคํŠธ๋ฅผ ํ•œ๊ตญ์–ด๋กœ ๋ฒˆ์—ญํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค:

---

์ด๊ฒƒ์€ "Guardian Headline Full"์ด๋ผ๋Š” ๊ธ€๊ผด ๋ชจ์Œ์„ ์ •์˜ํ•˜๊ณ  ๋‹ค์–‘ํ•œ ๊ธ€๊ผด ํŒŒ์ผ์„ ๋กœ๋“œํ•  ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š” CSS ์ฝ”๋“œ ๋ธ”๋ก์ž…๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ธ€๊ผด ๋‘๊ป˜(๋ผ์ดํŠธ, ๋ ˆ๊ทค๋Ÿฌ, ๋ฏธ๋””์—„, ์„ธ๋ฏธ๋ณผ๋“œ)์™€ ์Šคํƒ€์ผ(์ผ๋ฐ˜ ๋ฐ ์ดํƒค๋ฆญ)์„ ํฌํ•จํ•˜๋ฉฐ, ๊ฐ๊ฐ ๊ฐ€๋””์–ธ ์›น์‚ฌ์ดํŠธ์— ํ˜ธ์ŠคํŒ…๋œ ๋‹ค์–‘ํ•œ ํ˜•์‹(WOFF2, WOFF, TTF)์˜ ์†Œ์Šค ํŒŒ์ผ ์„ธํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ฝ”๋“œ๋Š” ์ด๋Ÿฌํ•œ ํŒŒ์ผ์— ์—ฐ๊ฒฐํ•˜์—ฌ ์›นํŽ˜์ด์ง€์—์„œ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๊ฐ€๋””์–ธ์˜ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ๋ฅผ ์œ„ํ•œ ๊ธ€๊ผด ๋ชจ์Œ์„ ์ •์˜ํ•˜๋Š” CSS ์Šคํƒ€์ผ์‹œํŠธ์ž…๋‹ˆ๋‹ค. "Guardian Headline Full" ๋ฐ "Guardian Titlepiece" ๊ธ€๊ผด ๋ชจ์Œ์— ๋Œ€ํ•ด ๋‹ค์–‘ํ•œ ๊ธ€๊ผด ํŒŒ์ผ(WOFF2, WOFF, TTF ํ˜•์‹)์„ ๋กœ๋“œํ•˜๋ฉฐ, ๊ฐ๊ฐ์— ๋Œ€ํ•ด ๋‹ค๋ฅธ ๋‘๊ป˜(๋ผ์ดํŠธ, ๋ ˆ๊ทค๋Ÿฌ, ๋ณผ๋“œ, ๋ธ”๋ž™)์™€ ์Šคํƒ€์ผ(์ผ๋ฐ˜ ๋˜๋Š” ์ดํƒค๋ฆญ)์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. URL์€ ๊ฐ€๋””์–ธ์˜ ์—์…‹ ์„œ๋ฒ„์— ํ˜ธ์ŠคํŒ…๋œ ๊ธ€๊ผด ํŒŒ์ผ์„ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋‹ค์–‘ํ•œ ๋‘๊ป˜์™€ ์Šคํƒ€์ผ๋กœ "Guardian Headline Full" ๊ธ€๊ผด ๋ชจ์Œ์„ ์ •์˜ํ•˜๋Š” CSS ์ฝ”๋“œ ๋ธ”๋ก์ž…๋‹ˆ๋‹ค. ๊ฐ๊ฐ ๊ธ€๊ผด์˜ ์†Œ์Šค ํŒŒ์ผ์„ ๋‹ค๋ฅธ ํ˜•์‹(woff2, woff, truetype)์œผ๋กœ ์ง€์ •ํ•˜๊ณ  ํ•ด๋‹น font-weight ๋ฐ font-style ์†์„ฑ์„ ์ง€์ •ํ•˜๋Š” ์—ฌ๋Ÿฌ @font-face ๊ทœ์น™์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ๋‘๊ป˜๋Š” 400(๋ ˆ๊ทค๋Ÿฌ)์—์„œ 900(๋ธ”๋ž™)๊นŒ์ง€์ด๋ฉฐ, ๊ฐ ๋‘๊ป˜์— ๋Œ€ํ•ด ์ผ๋ฐ˜ ๋ฐ ์ดํƒค๋ฆญ ์Šคํƒ€์ผ์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธ€๊ผด ํŒŒ์ผ์€ ๊ฐ€๋””์–ธ์˜ ์—์…‹ ์„œ๋ฒ„์— ํ˜ธ์ŠคํŒ…๋ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์›นํŽ˜์ด์ง€์˜ ๊ธ€๊ผด ์Šคํƒ€์ผ๊ณผ ๋ ˆ์ด์•„์›ƒ ๊ทœ์น™์„ ์ •์˜ํ•˜๋Š” CSS ์ฝ”๋“œ ๋ธ”๋ก์œผ๋กœ, ์•„๋งˆ ๊ฐ€๋””์–ธ ์›น์‚ฌ์ดํŠธ์˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค. "Guardian Headline" ๋ฐ "Guardian Titlepiece"์™€ ๊ฐ™์€ ์‚ฌ์šฉ์ž ์ •์˜ ๊ธ€๊ผด์„ ๋‹ค๋ฅธ ๋‘๊ป˜์™€ ํ˜•์‹์œผ๋กœ ์„ค์ •ํ•œ ๋‹ค์Œ, ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ ์‹œ์Šคํ…œ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ˜ํ…์ธ  ์„น์…˜(์ œ๋ชฉ, ํ—ค๋“œ๋ผ์ธ, ๋ณธ๋ฌธ ๋“ฑ)์„ ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž๊ฒŒ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋ฐฐ์—ดํ•ฉ๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์€ ๋‹ค์–‘ํ•œ ์ค‘๋‹จ์ (์˜ˆ: 30em, 46.25em, 61.25em, 71.25em)์—์„œ ์—ด๊ณผ ๊ฐ„๊ฒฉ์„ ์กฐ์ •ํ•˜์—ฌ ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, ๋ฐ์Šคํฌํ†ฑ ์žฅ์น˜์—์„œ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ‘œ์‹œ๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

๋ชฐ์ž…ํ˜• ์บก์…˜์ด ์žˆ๋Š” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ทธ๋ฆฌ๋“œ ๊ทธ๋ฆผ์˜ ๊ฒฝ์šฐ, ์บก์…˜ ์Šคํƒ€์ผ์€ ์ƒ๋‹จ์— 4px ํŒจ๋”ฉ์„ ์ ์šฉํ•˜๊ณ  ํ•˜๋‹จ์—๋Š” 0์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ธฐ์‚ฌ ๋ณธ๋ฌธ, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์ฝ˜ํ…์ธ , ๋Œ“๊ธ€ ์„น์…˜, ํ”ผ์ฒ˜ ๋ณธ๋ฌธ์„ ํฌํ•จํ•œ ๋‹ค์–‘ํ•œ ์ฝ˜ํ…์ธ  ์˜์—ญ์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์—์„œ lines ๋ฐ meta ์„น์…˜์€ ํ–‰ 2, ์—ด 1์—์„œ ํ–‰ 5, ์—ด 2๊นŒ์ง€ ํ™•์žฅ๋˜๋Š” ๊ทธ๋ฆฌ๋“œ ์˜์—ญ์— ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. lines ์„น์…˜์€ ์ฝ˜ํ…์ธ ์— ๋งž๋Š” ๋†’์ด๋กœ ์„ค์ •๋˜๋ฉฐ ์ƒ๋‹จ ์—ฌ๋ฐฑ์€ 5px์ž…๋‹ˆ๋‹ค. meta ์„น์…˜์˜ ์ƒ๋‹จ ์—ฌ๋ฐฑ์€ 18px์ž…๋‹ˆ๋‹ค.

81.25em(1300px)๋ณด๋‹ค ๋„“์€ ํ™”๋ฉด์˜ ๊ฒฝ์šฐ, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ทธ๋ฆฌ๋“œ๋Š” 219px, 1px, 620px, 80px, 300px์˜ ์—ด ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

iOS ๋ฐ Android ์žฅ์น˜์—์„œ ๊ธฐ์‚ฌ ํ—ค๋”์˜ standfirst ํ…์ŠคํŠธ๋Š” Guardian Headline ๊ธ€๊ผด ๋ชจ์Œ์„ ์ค‘๊ฐ„ ๋‘๊ป˜๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์‚ฌ kicker ์„น์…˜์€ ๋ธ”๋ก์œผ๋กœ ํ‘œ์‹œ๋˜๋ฉฐ ์ฒซ ๊ธ€์ž๋Š” ๋Œ€๋ฌธ์ž๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. keyline-4 ์š”์†Œ์—๋Š” ์ƒ๋‹จ ํŒจ๋”ฉ์ด 12px ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. byline ์ž‘์„ฑ์ž ์ด๋ฆ„์€ Guardian Headline ๊ธ€๊ผด์—์„œ ๋ณผ๋“œ ๋‘๊ป˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ๊ทธ ์•ˆ์˜ ๋งํฌ๋„ ๋ณผ๋“œ์ž…๋‹ˆ๋‹ค. ๊ธฐ์‚ฌ ๊ทธ๋ฆผ์˜ ์ด๋ฏธ์ง€๋Š” ๋†’์ด๊ฐ€ ์ž๋™์œผ๋กœ ์„ค์ •๋˜๊ณ , ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›์ž ๋’ค์˜ ๋‹จ๋ฝ์—๋Š” ์ƒ๋‹จ ์—ฌ๋ฐฑ์ด ์—†์Šต๋‹ˆ๋‹ค.

Guardian Headline Full ๊ธ€๊ผด์€ ๋ผ์ดํŠธ ๋‘๊ป˜์™€ ์ผ๋ฐ˜ ์Šคํƒ€์ผ, ๊ทธ๋ฆฌ๊ณ  ๋ผ์ดํŠธ ์ดํƒค๋ฆญ ์Šคํƒ€์ผ์— ๋Œ€ํ•ด ์—ฌ๋Ÿฌ ํŒŒ์ผ ํ˜•์‹(woff2, woff, ttf)์œผ๋กœ ์ •์˜๋ฉ๋‹ˆ๋‹ค.

์ด ์š”์ฒญ์€ ์ œ๊ณต๋œ ํ…์ŠคํŠธ๊ฐ€ ์›น ๊ธ€๊ผด์„ ์ •์˜ํ•˜๋Š” CSS ์ฝ”๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ž์—ฐ์–ด ์ฝ˜ํ…์ธ ๊ฐ€ ์•„๋‹ˆ๋ฏ€๋กœ ์œ ์ฐฝํ•œ ์˜์–ด๋กœ ๋‹ค์‹œ ์“ธ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋„์›€์ด ๋  ๋‹ค๋ฅธ ํ…์ŠคํŠธ๊ฐ€ ์žˆ์œผ๋ฉด ๊ณต์œ ํ•ด ์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ์œ ์ฐฝํ•˜๊ณ  ์ž์—ฐ์Šค๋Ÿฌ์šด ์˜์–ด๋กœ ๋‹ค์‹œ ์“ด ํ…์ŠคํŠธ์ž…๋‹ˆ๋‹ค:

```
src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");font-weight:900;font-style:normal}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");font-weight:900;font-style:italic}@font-face{font-family:Guardian Titlepiece;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@media (min-width: 71.25em){.content__main-column--interactive{margin-left:160px}}@media (min-width: 81.25em){.content__main-column--interactive{margin-left:240px}}.content__main-column--interactive .element-atom{max-width:620px}@media (max-width: 46.24em){.content__main-column--interactive .element-atom{max-width:100%}}.content__main-column--interactive .element-showcase{margin-left:0}@media (min-width: 46.25em){.content__main-column--interactive .element-showcase{max-width:620px}}@media (min-width: 71.25em){.content__main-column--interactive .element-showcase{max-width:860px}}.content__main-column--interactive .element-immersive{max-width:1100px}@media (max-width: 46.24em){.content__main-column--interactive .element-immersive{width:calc(100vw - var(--scrollbar-width, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!important}}@media (min-width: 46.25em){.content__main-column--interactive .element-immersive{transform:translate(-20px);width:calc(100% + 60px)}}@media (max-width: 71.24em){.content__main-column--interactive .element-immersive{margin-left:0;margin-right:0}}@media (min-width: 71.25em){.content__main-column--interactive .element-immersive{transform:translate(0);width:auto}}@media (min-width: 81.25em){.content__main-column--interactive .element-immersive{max-width:1260px}}.content__main-column--interactive p,.content__main-column--interactive ul{max-width:620px}.content__main-column--interactive:before{position:absolute;top:0;height:calc(100% + 15px);min-height:100px;content:""}@media (min-width: 71.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;z-index:-1;left:-10px}}@media (min-width: 81.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;left:-11px}}.content__main-column--interactive .element-atom{margin-top:0;margin-bottom:0;padding-bottom:12px;padding-top:12px}.content__main-column--interactive p+.element-atom{padding-top:0;padding-bottom:0;margin-top:12px;margin-bottom:12px}.content__main-column--interactive .element-inline{max-width:620px}@media (min-width: 61.25em){figure[data-spacefinder-role=inline].element{max-width:620px}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}

[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}

@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}

@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}

[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}

[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}

[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}

[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}

@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}

@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}

:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}

:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}

:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}

@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}

.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}

#article-body>div .element-atom:first-of-type+p:first-of-type,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}

#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/* ์—ฌ๊ธฐ์—๋Š” ํŠน์ • ์Šคํƒ€์ผ์ด ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š์ง€๋งŒ, ์ž ์žฌ์ ์ธ ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•ด ์„ ํƒ์ž๊ฐ€ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค */
}

์ด๊ฒƒ์€ ์ž์—ฐ์Šค๋Ÿฌ์šด ์˜์–ด๋กœ ๋‹ค์‹œ ์“ธ ํ…์ŠคํŠธ๊ฐ€ ์•„๋‹Œ CSS ์ฝ”๋“œ ๋ธ”๋ก์ž…๋‹ˆ๋‹ค. ์›น์‚ฌ์ดํŠธ(์•„๋งˆ ๊ฐ€๋””์–ธ์˜ ๊ธฐ์‚ฌ ํŽ˜์ด์ง€)์— ๋Œ€ํ•œ ์„ ํƒ์ž์™€ ์Šคํƒ€์ผ ๊ทœ์น™์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์›ํ•˜์‹œ๋ฉด ์ด CSS๊ฐ€ ๋ฌด์—‡์„ ํ•˜๋Š”์ง€ ํ‰์ดํ•œ ์˜์–ด๋กœ ์„ค๋ช…ํ•ด ๋“œ๋ฆฌ๊ฑฐ๋‚˜, ๋‹ค์‹œ ์“ธ ๋‹ค๋ฅธ ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•ด ์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}

@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}

.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}

.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}

.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}

.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}

.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}

.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}

.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}

@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}

.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}

@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}

.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}

.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}

.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}

@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}

.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}

.furniture-wrapper .standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: 0.5px;
}
}

๋‹ค์Œ์€ ์œ ์ฐฝํ•˜๊ณ  ์ž์—ฐ์Šค๋Ÿฌ์šด ์˜์–ด๋กœ ๋‹ค์‹œ ์“ด ํ…์ŠคํŠธ์ž…๋‹ˆ๋‹ค:

standfirst ์„น์…˜์˜ ๋ž˜ํผ๋Š” ์•ฝ๊ฐ„์˜ ์™ผ์ชฝ ์˜คํ”„์…‹ ์กฐ์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์‚ฌ ํ—ค๋”์™€ ์ œ๋ชฉ ์„น์…˜์˜ ๋ ˆ์ด๋ธ”์—๋Š” ์ƒ๋‹จ์— ์•ฝ๊ฐ„์˜ ์ถ”๊ฐ€ ํŒจ๋”ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ—ค๋“œ๋ผ์ธ์€ ๋ณผ๋“œ ๊ธ€๊ผด ๋‘๊ป˜๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ตœ๋Œ€ ๋„ˆ๋น„๋กœ ์ œํ•œ๋˜๋ฉฐ ๋” ํฐ ํ™”๋ฉด์—์„œ ํฌ๊ธฐ๊ฐ€ ์ปค์ง‘๋‹ˆ๋‹ค. ์ค‘๊ฐ„ ํ™”๋ฉด์—์„œ๋Š” keyline๊ณผ lines ์š”์†Œ์— ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ์ด ์—†์œผ๋ฉฐ, ๋” ํฐ ํ™”๋ฉด์—์„œ๋Š” ์™„์ „ํžˆ ์ˆจ๊ฒจ์ง‘๋‹ˆ๋‹ค. lines๋Š” ํ—ค๋” ํ…Œ๋‘๋ฆฌ์™€ ์ผ์น˜ํ•˜๋Š” ์ŠคํŠธ๋กœํฌ ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

meta ์„น์…˜๋„ ์ค‘๊ฐ„ ํ™”๋ฉด์—์„œ ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ์ด ์—†์Šต๋‹ˆ๋‹ค. ์†Œ์…œ ์•„์ด์ฝ˜, ๋Œ“๊ธ€ ๋งํฌ ๋ฐ ํ•ด๋‹น ํ…Œ๋‘๋ฆฌ๋Š” ๋ชจ๋‘ ํ—ค๋” ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. meta ์„น์…˜์˜ ์ผ๋ถ€ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์š”์†Œ๋Š” ์ˆจ๊ฒจ์ง‘๋‹ˆ๋‹ค. standfirst ํ…์ŠคํŠธ๋Š” ์™ผ์ชฝ ํŒจ๋”ฉ์œผ๋กœ ์•ฝ๊ฐ„ ๋“ค์—ฌ์“ฐ๊ธฐ๋˜๊ณ  ์ปจํ…Œ์ด๋„ˆ์— ์ƒ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. ์ค‘๊ฐ„ ํ™”๋ฉด์—์„œ๋Š” ์•ฝ๊ฐ„์˜ ์ƒ๋‹จ ํŒจ๋”ฉ์„ ์–ป์Šต๋‹ˆ๋‹ค. standfirst์˜ ๋‹จ๋ฝ์€ ํŠน์ • ๊ธ€๊ผด ๋‘๊ป˜์™€ ํฌ๊ธฐ๋กœ ์„ค์ •๋˜๋ฉฐ ์•ฝ๊ฐ„์˜ ํ•˜๋‹จ ํŒจ๋”ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ๋ฏธ๋””์–ด ์„น์…˜์€ ์ƒ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜๋˜๊ณ  ์ƒ๋‹จ ์—ฌ๋ฐฑ์ด ์—†์œผ๋ฉฐ ์•ฝ๊ฐ„์˜ ํ•˜๋‹จ ์—ฌ๋ฐฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ์˜ ์ „์ฒด ๋„ˆ๋น„์— ๊ฑธ์ณ ์žˆ์Šต๋‹ˆ๋‹ค. ๋” ํฐ ํ™”๋ฉด์—์„œ๋Š” ํ•˜๋‹จ ์—ฌ๋ฐฑ์ด ์ œ๊ฑฐ๋˜๊ณ , ๋” ์ž‘์€ ํ™”๋ฉด์—์„œ๋Š” ์Œ์ˆ˜ ์™ผ์ชฝ ์—ฌ๋ฐฑ์œผ๋กœ ์ „์ฒด ๋ทฐํฌํŠธ ๋„ˆ๋น„๋กœ ํ™•์žฅ๋ฉ๋‹ˆ๋‹ค. ์บก์…˜์€ ๋ฏธ๋””์–ด ํ•˜๋‹จ์— ๋ฐฐ์น˜๋˜๋ฉฐ ๋ฐฐ๊ฒฝ์ƒ‰, ํ…์ŠคํŠธ ์ƒ‰์ƒ ๋ฐ ํŒจ๋”ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์บก์…˜ ํ…์ŠคํŠธ์—๋Š” ํ—ค๋” ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ”์œ„๊ฐ€ ํฌํ•จ๋˜๋ฉฐ ์ฒซ ๋ฒˆ์งธ ๋ฒ”์œ„๋Š” ์ˆจ๊ฒจ์ง€๊ณ  ๋‘ ๋ฒˆ์งธ ๋ฒ”์œ„๋Š” ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๋” ์ž‘์€ ํ™”๋ฉด์—์„œ๋Š” ์บก์…˜ ํŒจ๋”ฉ์ด ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์บก์…˜์ด ์ˆจ๊ฒจ์ง€๋ฉด ํˆฌ๋ช…ํ•ด์ง‘๋‹ˆ๋‹ค. ์บก์…˜ ๋ฒ„ํŠผ์€ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ์— ๋ฐฐ์น˜๋˜๋ฉฐ ์›ํ˜• ๋ฐฐ๊ฒฝ, ํ…Œ๋‘๋ฆฌ ์—†์Œ ๋ฐ ์•ฝ๊ฐ„์˜ ํŒจ๋”ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฒ„ํŠผ ์•„์ด์ฝ˜์€ ์•ฝ๊ฐ„ ์ถ•์†Œ๋ฉ๋‹ˆ๋‹ค.

๋” ํฐ ํ™”๋ฉด์—์„œ๋Š” ๊ธฐ๋ณธ ์—ด์— ์ƒ๋‹จ ์˜คํ”„์…‹๊ณผ ๋†’์ด ์กฐ์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์•ˆ์˜ ์ œ๋ชฉ์€ ์ตœ๋Œ€ ๋„ˆ๋น„๋กœ ์ œํ•œ๋ฉ๋‹ˆ๋‹ค. iOS ๋ฐ Android ์žฅ์น˜์˜ ๋‹คํฌ ๋ชจ๋“œ์—์„œ๋Š” ํŠน์ • ์ƒ‰์ƒ ๋ณ€์ˆ˜๊ฐ€ ์ •์˜๋ฉ๋‹ˆ๋‹ค(ํ”ผ์ฒ˜ ์ƒ‰์ƒ ๋ฐ ๋‹คํฌ ๋ชจ๋“œ ๋ณ€ํ˜• ํฌํ•จ). ์ƒˆ pillar ์ƒ‰์ƒ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ธฐ๋ณธ pillar ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ ๋‹คํฌ ๋ชจ๋“œ์—์„œ๋Š” ๋‹คํฌ ๋ชจ๋“œ pillar ์ƒ‰์ƒ์œผ๋กœ ์ „ํ™˜๋ฉ๋‹ˆ๋‹ค. iOS์—์„œ๋Š” ์ฒซ ๋ฒˆ์งธ ์š”์†Œ ์›์ž ๋‹ค์Œ์— ์˜ค๋Š” ๋‹จ๋ฝ์ด ํŠน์ • ๋ฐฉ์‹์œผ๋กœ ์Šคํƒ€์ผ๋ง๋ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋‹ค์‹œ ์“ฐ๊ธฐ ์œ„ํ•œ ํ…์ŠคํŠธ๊ฐ€ ์•„๋‹Œ ๊ธฐ์ˆ ์ ์ธ CSS ์Šคํƒ€์ผ์‹œํŠธ์ž…๋‹ˆ๋‹ค. ์›น์‚ฌ์ดํŠธ์— ๋Œ€ํ•œ ์„ ํƒ์ž์™€ ์Šคํƒ€์ผ ๊ทœ์น™์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์›ํ•˜์‹œ๋ฉด ๊ทธ๊ฒƒ์ด ๋ฌด์—‡์„ ํ•˜๋Š”์ง€ ์„ค๋ช…ํ•˜๊ฑฐ๋‚˜ ๋‹จ์ˆœํ™”ํ•˜๊ฑฐ๋‚˜ ๋‹ค์‹œ ํฌ๋งทํ•˜๋Š” ๋ฐ ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}

/* iOS ๋ฐ Android์—์„œ ๋ชจ๋“  ๊ธฐ์‚ฌ ์œ ํ˜•์— ๋Œ€ํ•ด ์ด๋ฏธ์ง€์™€ ํ•ด๋‹น ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์ „์ฒด ๋„ˆ๋น„๋กœ ๋งŒ๋“ค๊ณ  ํˆฌ๋ช…ํ•˜๊ฒŒ ์„ค์ • */
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}

/* iOS ๋ฐ Android์—์„œ standfirst(์†Œ๊ฐœ ๋‹จ๋ฝ) ๊ฐ„๊ฒฉ ๋ฐ ์ •๋ ฌ ์กฐ์ • */
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}

/* iOS ๋ฐ Android์—์„œ standfirst ๋‚ด๋ถ€ ๋‹จ๋ฝ์˜ ๊ธ€๊ผด ์„ค์ • */
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}

/* iOS ๋ฐ Android์—์„œ standfirst ๋‚ด๋ถ€ ๋งํฌ(๋ชฉ๋ก ํ•ญ๋ชฉ ํฌํ•จ) ์Šคํƒ€์ผ ์ง€์ • */
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}

/* iOS ๋ฐ Android์—์„œ standfirst ๋‚ด๋ถ€ ๋งํฌ์˜ ํ˜ธ๋ฒ„ ์ƒํƒœ ์Šคํƒ€์ผ ์ง€์ • */
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
/* ์—ฌ๊ธฐ์—๋Š” ํŠน์ • ํ˜ธ๋ฒ„ ์Šคํƒ€์ผ์ด ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๋งํฌ ์Šคํƒ€์ผ์—์„œ ์ƒ์†๋ฉ๋‹ˆ๋‹ค */
}

iOS ๋ฐ Android์˜ ํ”ผ์ฒ˜, ํ‘œ์ค€ ๋ฐ ๋Œ“๊ธ€ ๊ธฐ์‚ฌ์—์„œ standfirst ์„น์…˜ ๋‚ด๋ถ€ ๋งํฌ์˜ ํ˜ธ๋ฒ„ ์ƒํƒœ์— ๋Œ€ํ•ด ๋ฐ‘์ค„ ์ƒ‰์ƒ์€ ์ƒˆ pillar ์ƒ‰์ƒ๊ณผ ์ผ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

iOS ๋ฐ Android ๋ชจ๋‘์—์„œ ์ด๋Ÿฌํ•œ ๊ธฐ์‚ฌ ์ปจํ…Œ์ด๋„ˆ ๋‚ด์˜ meta ์„น์…˜์—๋Š” ์—ฌ๋ฐฑ์ด ์—†์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. byline ํ…์ŠคํŠธ(์ž‘์„ฑ์ž ์ด๋ฆ„ ๋ฐ ๊ทธ ์•ˆ์˜ ๋งํฌ ํฌํ•จ)๋„ ์ƒˆ pillar ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

meta__misc ์„น์…˜์—๋Š” ํŒจ๋”ฉ์ด ์—†์–ด์•ผ ํ•˜๋ฉฐ ๊ทธ ์•ˆ์˜ SVG ์•„์ด์ฝ˜์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์€ ์ƒํƒœ๋กœ ์œ ์ง€๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

.meta__misc svg { stroke: var(--new-pillar-colour); }

iOS ๋ฐ Android์—์„œ ํ”ผ์ฒ˜, ํ‘œ์ค€ ๋ฐ ๋Œ“๊ธ€ ๊ธฐ์‚ฌ ์ปจํ…Œ์ด๋„ˆ์˜ ๊ฒฝ์šฐ ์‡ผ์ผ€์ด์Šค ์บก์…˜ ๋ฒ„ํŠผ์€ 28x28px ํฌ๊ธฐ์˜ ์ž‘์€ ์ค‘์•™ ํ”Œ๋ ‰์Šค๋ฐ•์Šค๋กœ ํŒจ๋”ฉ์ด ์žˆ์œผ๋ฉฐ ์˜ค๋ฅธ์ชฝ์—์„œ 14px ๋–จ์–ด์ง„ ๊ณณ์— ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์žฅ์น˜์—์„œ ๊ธฐ์‚ฌ ๋ณธ๋ฌธ์€