/* The same photographic composition, with typesetting for each language. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700&family=Noto+Serif+TC:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&display=swap');
html[lang=ko] body{font-family:'Noto Serif KR',serif;word-break:keep-all}
html[lang=zh-Hant] body{font-family:'Noto Serif TC',serif}
html[lang=zh-Hans] body{font-family:'Noto Serif SC',serif}
html:not([lang=ja]) .logo,html:not([lang=ja]) .scroll-brand,html:not([lang=ja]) .signature-top,html:not([lang=ja]) .signature-bottom{font-family:'Shippori Mincho B1',serif}
html:not([lang=ja]) .got,html:not([lang=ja]) .lead,html:not([lang=ja]) .rv blockquote,html:not([lang=ja]) .rv .tr{font-family:inherit}
html:not([lang=ja]) .hero .hero-btns{gap:10px}
html:not([lang=ja]) .hero .btn{font-size:12px}
html:not([lang=ja]) .hero-info{max-width:550px}
:is(html[lang=en],html[lang=ko]) body{letter-spacing:.025em}
:is(html[lang=en],html[lang=ko]) .vnav{gap:17px;right:8%}
:is(html[lang=en],html[lang=ko]) .vnav a{writing-mode:vertical-rl;letter-spacing:.06em;font-size:13px}
:is(html[lang=en],html[lang=ko]) .hero-copy h1{writing-mode:horizontal-tb;left:5%;width:17%;height:auto;font-size:clamp(25px,2.35vw,38px);line-height:1.5;letter-spacing:.02em}
:is(html[lang=en],html[lang=ko]) .hero-copy .sig{writing-mode:horizontal-tb;left:5%;top:620px;width:17%;font-size:14px;line-height:1.8;letter-spacing:.05em}
:is(html[lang=en],html[lang=ko]) .side-map{letter-spacing:.08em}
:is(html[lang=en],html[lang=ko]) .vh{writing-mode:horizontal-tb;white-space:normal;letter-spacing:.04em;font-size:28px}
:is(html[lang=en],html[lang=ko]) .vh small{margin:12px 0 0;line-height:1.8;letter-spacing:.04em}
:is(html[lang=en],html[lang=ko]) .sec-grid{grid-template-columns:210px minmax(0,1fr);gap:55px}
:is(html[lang=en],html[lang=ko]) .voices .sec-grid{display:block}
:is(html[lang=en],html[lang=ko]) .notice-paper dl{gap:0 25px}
:is(html[lang=en],html[lang=ko]) .notice-paper dt{font-size:12px}
:is(html[lang=en],html[lang=ko]) .notice-paper dd{font-size:14px;max-width:62%}
:is(html[lang=en],html[lang=ko]) .story-intro{align-items:flex-start;gap:65px;width:65%;margin-left:15%;padding-top:100px}
:is(html[lang=en],html[lang=ko]) .story-lead{writing-mode:horizontal-tb;width:330px;height:auto;font-size:15px;line-height:2.1;letter-spacing:.02em}
:is(html[lang=en],html[lang=ko]) .story-intro-copy{writing-mode:horizontal-tb;white-space:normal;width:230px;height:auto;font-size:28px;line-height:1.7;letter-spacing:.02em}
:is(html[lang=en],html[lang=ko]) .signature-side{writing-mode:horizontal-tb;right:-42px;top:-53px;width:260px;max-width:none;line-height:1.5;font-size:13px;letter-spacing:.05em;border:0}
:is(html[lang=en],html[lang=ko]) .story-frame{flex-direction:column;justify-content:center;gap:22px;padding:40px}
:is(html[lang=en],html[lang=ko]) .story-frame h2{writing-mode:horizontal-tb;display:block;font-size:32px;line-height:1.65;letter-spacing:.03em}
:is(html[lang=en],html[lang=ko]) .story-frame h2 span{display:block;writing-mode:horizontal-tb}
:is(html[lang=en],html[lang=ko]) .story-frame-note{writing-mode:horizontal-tb;letter-spacing:.1em;border-right:0;border-top:3px double #eee4d2;padding:16px 0 0;font-size:14px}
:is(html[lang=en],html[lang=ko]) .story-dots{writing-mode:horizontal-tb;letter-spacing:.35em}
:is(html[lang=en],html[lang=ko]) .story-detail{writing-mode:horizontal-tb;width:370px;height:auto;font-size:15px;line-height:2.1;letter-spacing:.02em}
:is(html[lang=en],html[lang=ko]) .story-link{font-size:20px;letter-spacing:.04em;padding:6px 26px}
:is(html[lang=en],html[lang=ko]) .step-copy{display:block;padding-right:16%}
:is(html[lang=en],html[lang=ko]) .st h3{writing-mode:horizontal-tb;font-size:28px;letter-spacing:.025em;line-height:1.7}
:is(html[lang=en],html[lang=ko]) .st h3 .n{display:block;font-size:34px;margin:0 0 18px}
:is(html[lang=en],html[lang=ko]) .st p{writing-mode:horizontal-tb;height:auto;margin-top:25px;line-height:2;letter-spacing:.02em}
:is(html[lang=en],html[lang=ko]) .st:nth-child(2) .step-copy{padding:0 10% 0 16%}
:is(html[lang=en],html[lang=ko]) .menu .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
:is(html[lang=en],html[lang=ko]) .col{writing-mode:horizontal-tb;min-height:0;padding:28px 24px;border-left:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:normal}
:is(html[lang=en],html[lang=ko]) .col:nth-child(3n){border-right:0}
:is(html[lang=en],html[lang=ko]) .col:nth-child(n+4){border-bottom:0}
:is(html[lang=en],html[lang=ko]) .col h3{writing-mode:horizontal-tb;font-size:21px;margin:0 0 16px;letter-spacing:.03em}
:is(html[lang=en],html[lang=ko]) .col h3 small{font-size:12px;line-height:1.9;margin:8px 0 0;letter-spacing:.02em}
:is(html[lang=en],html[lang=ko]) .col ul{margin:0;padding:0}
:is(html[lang=en],html[lang=ko]) .col li{display:block;margin:8px 0;line-height:1.8;letter-spacing:.01em;white-space:normal;font-size:15px}
:is(html[lang=en],html[lang=ko]) .col .tag{writing-mode:horizontal-tb;display:inline-block;margin:0 0 14px;padding:3px 8px;font-size:11px}
:is(html[lang=en],html[lang=ko]) .col .p{display:block;margin:10px 0 0;font-size:14px}
:is(html[lang=en],html[lang=ko]) .info-grid{grid-template-columns:1fr}
:is(html[lang=en],html[lang=ko]) .info-table th{width:8em}
html[lang=zh-Hant] .story-intro,html[lang=zh-Hans] .story-intro{gap:75px}
html[lang=zh-Hant] .story-frame h2,html[lang=zh-Hans] .story-frame h2{font-size:29px}
@media(max-width:960px){:is(html[lang=en],html[lang=ko]) .sec-grid{grid-template-columns:1fr;gap:28px}:is(html[lang=en],html[lang=ko]) .story-intro{margin-left:8%;width:75%;gap:35px}:is(html[lang=en],html[lang=ko]) .story-lead{width:55%;font-size:14px}:is(html[lang=en],html[lang=ko]) .story-intro-copy{width:40%;font-size:24px}:is(html[lang=en],html[lang=ko]) .hero-copy h1{font-size:25px}:is(html[lang=en],html[lang=ko]) .hero-copy .sig{top:610px;font-size:12px}}
@media(max-width:760px){
 html:not([lang=ja]) .hero .btn{font-size:10px;line-height:1.8}html:not([lang=ja]) .hero-info{font-size:9px;line-height:1.9;max-width:100%}html:not([lang=ja]) .hero-action{bottom:22px}
 :is(html[lang=en],html[lang=ko]) .vnav{right:17px;gap:12px}:is(html[lang=en],html[lang=ko]) .vnav a{font-size:11px}
 :is(html[lang=en],html[lang=ko]) .hero-copy h1{left:15px;top:245px;width:165px;padding:18px 12px;line-height:1.5;font-size:25px;letter-spacing:0}
 :is(html[lang=en],html[lang=ko]) .hero-copy .sig{top:570px;left:15px;width:130px;padding:7px 9px;background:#faf9f7eb;font-size:12px;line-height:1.6;height:auto;z-index:3}
 :is(html[lang=en],html[lang=ko]) .hero-city{font-size:14vw}
 :is(html[lang=en],html[lang=ko]) .notice-paper dl{grid-template-columns:1fr}:is(html[lang=en],html[lang=ko]) .notice-paper dd{font-size:13px}
 :is(html[lang=en],html[lang=ko]) .vh{font-size:25px}:is(html[lang=en],html[lang=ko]) .voices .vh{font-size:25px}
 :is(html[lang=en],html[lang=ko]) .story-intro{display:flex;flex-direction:column-reverse;margin:0;width:100%;padding:60px 28px 0;gap:24px}
 :is(html[lang=en],html[lang=ko]) .story-lead{width:100%;font-size:12px;line-height:1.9}
 :is(html[lang=en],html[lang=ko]) .story-intro-copy{width:78%;font-size:23px;line-height:1.6}
 :is(html[lang=en],html[lang=ko]) .story-frame{width:270px;height:315px;left:26px;top:145px;padding:25px;gap:18px}
 :is(html[lang=en],html[lang=ko]) .story-frame h2{font-size:25px;line-height:1.5}
 :is(html[lang=en],html[lang=ko]) .story-frame-note{font-size:12px;padding-top:10px}
 :is(html[lang=en],html[lang=ko]) .signature-side{width:180px;right:0;top:-37px;font-size:10px;line-height:1.5}
 :is(html[lang=en],html[lang=ko]) .story-detail{width:calc(100% - 56px);font-size:13px;line-height:1.9;bottom:140px;height:auto}
 :is(html[lang=en],html[lang=ko]) .story-link{left:28px;font-size:16px;letter-spacing:.01em;bottom:65px}
 :is(html[lang=en],html[lang=ko]) .step-copy,:is(html[lang=en],html[lang=ko]) .st:nth-child(2) .step-copy{padding:28px 30px 0;display:block}
 :is(html[lang=en],html[lang=ko]) .st h3{font-size:24px;line-height:1.5}:is(html[lang=en],html[lang=ko]) .st h3 .n{font-size:25px;margin-bottom:10px}
 :is(html[lang=en],html[lang=ko]) .st p{font-size:13px;margin-top:15px;line-height:1.9}
 :is(html[lang=en],html[lang=ko]) #enjoy .vh small{display:block;margin-left:0;font-size:11px}
 :is(html[lang=en],html[lang=ko]) .menu .board{grid-template-columns:1fr}
 :is(html[lang=en],html[lang=ko]) .col,:is(html[lang=en],html[lang=ko]) .col:nth-child(n+4){border-right:0;border-bottom:1px solid var(--line);padding:25px 18px}
 :is(html[lang=en],html[lang=ko]) .col:last-child{border-bottom:0}
 :is(html[lang=en],html[lang=ko]) .faq summary{font-size:14px;line-height:1.8}
 :is(html[lang=en],html[lang=ko]) .info-table{font-size:12px}:is(html[lang=en],html[lang=ko]) .info-table th{width:7em}
 :is(html[lang=en],html[lang=ko]) .scroll-nav{gap:12px}:is(html[lang=en],html[lang=ko]) .scroll-nav a{font-size:10px}:is(html[lang=en],html[lang=ko]) .scroll-nav .scroll-brand{font-size:19px}
 html[lang=zh-Hant] .story-intro,html[lang=zh-Hans] .story-intro{gap:33px}html[lang=zh-Hant] .story-frame h2,html[lang=zh-Hans] .story-frame h2{font-size:23px}
}
/* Override older language-specific defaults while retaining the shared layout. */
:is(html[lang=en],html[lang=ko]) body .vnav{flex-direction:row-reverse;text-align:left;gap:17px}
:is(html[lang=en],html[lang=ko]) body .vnav a{writing-mode:vertical-rl;padding-top:22px;font-size:13px}
:is(html[lang=en],html[lang=ko]) body .vnav a::before{display:block}
:is(html[lang=en],html[lang=ko]) .col{display:block}
html[lang=ko] :is(.got,.rv blockquote,.rv .tr,.about-txt,.st p,.faq .ans,.lead,.info-table,.btn,.hero-info,.notice-paper dl){font-family:'Noto Serif KR',serif}
@media(max-width:760px){:is(html[lang=en],html[lang=ko]) body .vnav{gap:12px}:is(html[lang=en],html[lang=ko]) body .vnav a{font-size:11px;padding-top:18px}}
:is(html[lang=en],html[lang=ko]) .vnav.vnav a{writing-mode:vertical-rl}
@media(min-width:761px) and (max-width:1499px){:is(html[lang=en],html[lang=ko]) .hero-copy h1{font-size:25px}:is(html[lang=en],html[lang=ko]) .hero-copy .sig{top:530px;font-size:12px}}

:is(html[lang=en],html[lang=ko]) .story-frame h2{width:100%;min-width:0}
:is(html[lang=en],html[lang=ko]) .story-frame h2 span{white-space:normal}

@media(min-width:761px) and (max-width:1499px){:is(html[lang=zh-Hant],html[lang=zh-Hans]) .hero-copy h1{font-size:26px;letter-spacing:.12em}}