/*EDT_DARK_V8_FINAL*/
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner:has(>.related-articles){overflow:visible!important}
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles{overflow:visible!important;background-color:#171714!important;box-shadow:0 0 0 100vmax #171714!important}
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles ul,
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles li>a{background-color:#000!important}
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles:after{content:""!important;position:absolute!important;z-index:0!important;left:50%!important;width:100vw!important;top:calc(100% - 112px)!important;bottom:-148px!important;transform:translateX(-50%)!important;background:#000!important;pointer-events:none!important}
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles>*{position:relative!important;z-index:1!important}
html body #wrap#wrap>header#header#header .edt-brand,
html body #wrap#wrap>header#header#header .edt-brand span:first-child,
html body #wrap#wrap>header#header#header .edt-primary-nav a,
html body #wrap#wrap>header#header#header .mobile-menu,
html body #wrap#wrap>header#header#header .mobile-menu span,
html body #wrap#wrap>header#header#header #gnb a,
html body #wrap#wrap>header#header#header #gnb .c_cnt{color:#fff!important}
html body #wrap#wrap>header#header#header .edt-brand span:last-child{color:#ff573d!important}
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles h2,
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles li>a,
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles .title{color:#fff!important}
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles h2 strong,
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles li>a:after{color:#ff573d!important}
html body#tt-body-page#tt-body-page #wrap#wrap article#content#content :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag) a{color:#fff!important}
html body #wrap#wrap>footer#footer#footer,
html body #wrap#wrap>footer#footer#footer:before{background:#000!important}
html body #wrap#wrap>footer#footer#footer,
html body #wrap#wrap>footer#footer#footer .copyright,
html body #wrap#wrap>footer#footer#footer a{color:#fff!important}
@media(max-width:767px){
html body#tt-body-page#tt-body-page #wrap#wrap section.container article#content#content>.inner>.related-articles.related-articles:after{content:none!important}
}
/* EVERYDAY TRIP — WARM BLACK TOP & BOTTOM SHELL
/* WARM BLACK FULL-BLEED BOTTOM FIX
/* EVERYDAY TRIP — FINAL WARM BLACK SHELL
/*EDT_DARK_V4
/*EDT_DARK_V5_FOOTER
/*EDT_DARK_V6*/
html body #wrap#wrap>footer#footer#footer{box-shadow:none!important}
html body #wrap#wrap>footer#footer#footer:before{content:""!important;position:absolute!important;z-index:0!important;inset:0 auto 0 50%!important;width:100vw!important;transform:translateX(-50%)!important;background:#171714!important;pointer-events:none!important}
html body #wrap#wrap>footer#footer#footer>*{position:relative!important;z-index:1!important}
*/
html body #wrap>footer#footer{position:relative!important;isolation:isolate!important;background-color:#171714!important;box-shadow:none!important}
html body #wrap>footer#footer:before{content:""!important;position:absolute!important;z-index:0!important;inset:0 auto 0 50%!important;width:100vw!important;transform:translateX(-50%)!important;background:#171714!important;pointer-events:none!important}
html body #wrap>footer#footer>*{position:relative!important;z-index:1!important}
*/
html body #wrap>header#header.edt-site-header{background-color:#171714!important;color:#f4efe5!important;border-color:rgba(244,239,229,.32)!important}
html body #wrap>header#header.edt-site-header .edt-header-inner{border-color:rgba(244,239,229,.32)!important}
html body #wrap>header#header.edt-site-header .edt-brand,
html body #wrap>header#header.edt-site-header .edt-brand span:first-child,
html body #wrap>header#header.edt-site-header .edt-primary-nav a,
html body #wrap>header#header.edt-site-header .mobile-menu,
html body #wrap>header#header.edt-site-header .mobile-menu span{color:#f4efe5!important}
html body #wrap>header#header.edt-site-header .edt-brand span:last-child{color:#ff573d!important}
html body #wrap>header#header.edt-site-header .edt-primary-nav a:after,
html body #wrap>header#header.edt-site-header .mobile-menu:before,
html body #wrap>header#header.edt-site-header .mobile-menu:after{background-color:#f4efe5!important;border-color:#f4efe5!important}
html body #wrap>header#header.edt-site-header #gnb{background-color:#171714!important;color:#f4efe5!important;border-color:rgba(244,239,229,.32)!important}
html body #wrap>header#header.edt-site-header #gnb a,
html body #wrap>header#header.edt-site-header #gnb .c_cnt{color:#f4efe5!important}
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles{background-color:#171714!important;color:#f4efe5!important;box-shadow:0 0 0 100vmax #171714!important;clip-path:inset(-112px -100vmax -148px -100vmax)!important}
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles h2{color:#f4efe5!important;border-color:rgba(244,239,229,.32)!important}
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles h2 strong{color:#ff573d!important}
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles li>a,
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles .title{color:#f4efe5!important}
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles li>a:after{color:#ff573d!important}
html body #wrap>footer#footer{background-color:#171714!important;color:#b9b4aa!important;border-color:rgba(244,239,229,.32)!important;box-shadow:0 0 0 100vmax #171714!important}
html body #wrap>footer#footer .copyright,
html body #wrap>footer#footer a{color:#b9b4aa!important}
@media(max-width:767px){
html body#tt-body-page #wrap section.container article#content>.inner>.related-articles.related-articles{clip-path:inset(-72px -100vmax -112px -100vmax)!important}
}
— 2026-08-15 */
#header.edt-site-header{isolation:isolate;background:rgba(23,23,20,.97)!important;color:#f4efe5!important;border-bottom-color:rgba(244,239,229,.32)!important}
#header.edt-site-header:before{content:""!important;position:absolute;z-index:0;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:#171714!important;pointer-events:none}
#header.edt-site-header>*{position:relative;z-index:1}
#header .edt-header-inner{border-color:rgba(244,239,229,.32)!important}
#header .edt-brand,#header .edt-brand span:first-child,#header .edt-primary-nav a,#header .mobile-menu,#header .mobile-menu span{color:#f4efe5!important}
#header .edt-brand span:last-child{color:#ff573d!important}
#header .edt-primary-nav a:after{background:#f4efe5!important}
#header .mobile-menu:before,#header .mobile-menu:after{background-color:#f4efe5!important;border-color:#f4efe5!important}
#header #gnb{background:#171714!important;color:#f4efe5!important;border-color:rgba(244,239,229,.32)!important}
#header #gnb a,#header #gnb .c_cnt{color:#f4efe5!important}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag){background:#171714!important;color:#f4efe5!important}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag) a{color:#f4efe5!important;border-color:rgba(244,239,229,.48)!important;background:transparent!important}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag) a:hover{color:#171714!important;border-color:#ff573d!important;background:#ff573d!important}
body#tt-body-page .related-articles.related-articles{position:relative;isolation:isolate;background:#171714!important;color:#f4efe5!important;box-shadow:0 0 0 100vmax #171714!important;clip-path:inset(-112px -100vmax -148px -100vmax)!important}
body#tt-body-page .related-articles.related-articles>*{position:relative;z-index:1}
body#tt-body-page .related-articles.related-articles h2{color:#f4efe5!important;border-color:rgba(244,239,229,.32)!important}
body#tt-body-page .related-articles.related-articles h2 strong{color:#ff573d!important}
body#tt-body-page .related-articles.related-articles :is(ul,li,li>a){border-color:rgba(244,239,229,.32)!important}
body#tt-body-page .related-articles.related-articles li>a,
body#tt-body-page .related-articles.related-articles .title{color:#f4efe5!important}
body#tt-body-page .related-articles.related-articles li>a:after{color:#ff573d!important}
body#tt-body-page .related-articles.related-articles li>a:hover .title{color:#ff573d!important}
#footer{position:relative;isolation:isolate;background:#171714!important;color:#b9b4aa!important;border-top-color:rgba(244,239,229,.32)!important;box-shadow:0 0 0 100vmax #171714}
#footer>*{position:relative;z-index:1}
#footer .copyright,#footer a{color:#b9b4aa!important}
@media(max-width:767px){
#header.edt-site-header{background:rgba(23,23,20,.985)!important}
body#tt-body-page .related-articles.related-articles{clip-path:inset(-72px -100vmax -112px -100vmax)!important}
}
— 2026-08-15 */
body#tt-body-page .related-articles.related-articles{
box-shadow:0 0 0 100vmax var(--edt-shell-black)!important;
clip-path:inset(-112px -100vmax -148px -100vmax)!important;
}
@media(max-width:767px){
body#tt-body-page .related-articles.related-articles{
clip-path:inset(-72px -100vmax -112px -100vmax)!important;
}
}
— 2026-08-15 */
:root{--edt-shell-black:#171714;--edt-shell-ivory:#f4efe5;--edt-shell-muted:#b9b4aa;--edt-shell-line:rgba(244,239,229,.32);--edt-shell-accent:#ff573d}
/* TOP */
#header.edt-site-header{isolation:isolate;background:rgba(23,23,20,.97)!important;color:var(--edt-shell-ivory)!important;border-bottom-color:var(--edt-shell-line)!important}
#header.edt-site-header:before{content:""!important;position:absolute;z-index:0;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:var(--edt-shell-black);pointer-events:none}
#header.edt-site-header>*{position:relative;z-index:1}
#header .edt-header-inner{border-color:var(--edt-shell-line)!important}
#header .edt-brand,#header .edt-brand span:first-child,#header .edt-primary-nav a,#header .mobile-menu,#header .mobile-menu span{color:var(--edt-shell-ivory)!important}
#header .edt-brand span:last-child{color:var(--edt-shell-accent)!important}
#header .edt-primary-nav a:after{background:var(--edt-shell-ivory)!important}
#header .mobile-menu:before,#header .mobile-menu:after{background-color:var(--edt-shell-ivory)!important;border-color:var(--edt-shell-ivory)!important}
#header #gnb{background:var(--edt-shell-black)!important;color:var(--edt-shell-ivory)!important;border-color:var(--edt-shell-line)!important}
#header #gnb a,#header #gnb .c_cnt{color:var(--edt-shell-ivory)!important}
/* ARTICLE TAGS */
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag){position:relative;isolation:isolate;background:var(--edt-shell-black)!important;color:var(--edt-shell-ivory)!important}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag):before{content:""!important;position:absolute;z-index:0;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:var(--edt-shell-black);pointer-events:none}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag)>*{position:relative;z-index:1}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag) a{color:var(--edt-shell-ivory)!important;border-color:rgba(244,239,229,.48)!important;background:transparent!important}
body#tt-body-page :is(.tagTrail,.tags,.tag-list,.area_tag,.article-tag) a:hover{color:var(--edt-shell-black)!important;border-color:var(--edt-shell-accent)!important;background:var(--edt-shell-accent)!important}
/* BOTTOM */
body#tt-body-page .related-articles.related-articles{position:relative;isolation:isolate;background:var(--edt-shell-black)!important;color:var(--edt-shell-ivory)!important}
body#tt-body-page .related-articles.related-articles:before{content:""!important;position:absolute;z-index:0;top:-112px;bottom:-148px;left:50%;width:100vw;transform:translateX(-50%);background:var(--edt-shell-black);pointer-events:none}
body#tt-body-page .related-articles.related-articles>*{position:relative;z-index:1}
body#tt-body-page .related-articles.related-articles h2{color:var(--edt-shell-ivory)!important;border-color:var(--edt-shell-line)!important}
body#tt-body-page .related-articles.related-articles h2 strong{color:var(--edt-shell-accent)!important}
body#tt-body-page .related-articles.related-articles :is(ul,li,li>a){border-color:var(--edt-shell-line)!important}
body#tt-body-page .related-articles.related-articles li>a,
body#tt-body-page .related-articles.related-articles .title{color:var(--edt-shell-ivory)!important}
body#tt-body-page .related-articles.related-articles li>a:after{color:var(--edt-shell-accent)!important}
body#tt-body-page .related-articles.related-articles li>a:hover .title{color:var(--edt-shell-accent)!important}
#footer{position:relative;isolation:isolate;background:var(--edt-shell-black)!important;color:var(--edt-shell-muted)!important;border-top-color:var(--edt-shell-line)!important}
#footer:before{content:""!important;position:absolute;z-index:0;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:var(--edt-shell-black);pointer-events:none}
#footer>*{position:relative;z-index:1}
#footer .copyright,#footer a{color:var(--edt-shell-muted)!important}
@media(max-width:767px){
#header.edt-site-header{background:rgba(23,23,20,.985)!important}
body#tt-body-page .related-articles.related-articles:before{top:-72px;bottom:-112px}
}
/* Related article desktop 10px spacing */
@media screen and (min-width: 901px) {
body#tt-body-page .related-articles.related-articles ul {
gap: 10px !important;
}
}
/* Related article desktop 1px spacing */
@media screen and (min-width: 901px) {
body#tt-body-page .related-articles ul {
gap: 1px !important;
}
}
/* Related article desktop portrait ratio
/* Enforce desktop portrait thumbnails */
@media screen and (min-width: 901px) {
body#tt-body-page .related-articles .thum {
aspect-ratio: 3 / 4 !important;
}
}
*/
@media screen and (min-width: 901px) {
body#tt-body-page .related-articles .thum {
aspect-ratio: 3 / 4;
}
}
/* Related articles — editorial card captions
/* Related article title clamp fallback */
body#tt-body-page .related-articles .title {
max-height: 3.2em !important;
}
@media screen and (max-width: 640px) {
body#tt-body-page .related-articles .title {
max-height: 3.1em !important;
}
}
, 2026-08-15 */
body#tt-body-page .related-articles ul {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
padding-top: 26px !important;
border-top: 1px solid rgba(23, 23, 19, 0.72) !important;
}
body#tt-body-page .related-articles li {
min-width: 0 !important;
border: 0 !important;
}
body#tt-body-page .related-articles li > a {
display: block !important;
height: auto !important;
padding: 0 !important;
overflow: visible !important;
text-decoration: none !important;
}
body#tt-body-page .related-articles .thum {
display: block !important;
position: relative !important;
width: 100% !important;
height: auto !important;
margin: 0 0 17px !important;
padding: 0 !important;
aspect-ratio: 4 / 3;
overflow: hidden !important;
background: #e7dfd1 !important;
}
body#tt-body-page .related-articles .thum img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
body#tt-body-page .related-articles .title {
display: -webkit-box !important;
position: static !important;
width: auto !important;
height: auto !important;
min-height: 3.2em;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
color: #171713 !important;
font-size: 16px !important;
font-weight: 650 !important;
line-height: 1.6 !important;
letter-spacing: -0.025em !important;
white-space: normal !important;
text-overflow: clip !important;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body#tt-body-page .related-articles li > a::after {
content: "READ STORY ↗";
display: block;
margin-top: 13px;
color: #ff573d;
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: .12em;
}
@media (hover: hover) {
body#tt-body-page .related-articles li > a:hover .thum img {
transform: scale(1.035);
filter: saturate(1.06);
}
body#tt-body-page .related-articles li > a:hover .title {
color: #ff573d !important;
}
}
@media screen and (max-width: 900px) {
body#tt-body-page .related-articles ul {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 34px 18px !important;
}
}
@media screen and (max-width: 640px) {
body#tt-body-page .related-articles ul {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding-top: 8px !important;
}
body#tt-body-page .related-articles li + li {
border-top: 1px solid rgba(23, 23, 19, 0.16) !important;
}
body#tt-body-page .related-articles li > a {
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 14px;
align-items: start;
padding: 14px 0 !important;
}
body#tt-body-page .related-articles .thum {
grid-row: 1 / 3;
margin: 0 !important;
aspect-ratio: 4 / 3;
}
body#tt-body-page .related-articles .title {
min-height: 0;
font-size: 14px !important;
line-height: 1.55 !important;
-webkit-line-clamp: 2;
}
body#tt-body-page .related-articles li > a::after {
grid-column: 2;
margin-top: 9px;
font-size: 9px;
}
}
@charset "utf-8";
/* Hide Tistory article utility modules — 2026-08-15 */
body#tt-body-page .container_postbtn,
body#tt-body-page .tt_box_namecard,
body#tt-body-page [id^="entry"][id$="Comment"] {
display: none !important;
}
/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Column & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/
/* Web Font Load */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}
/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}
/* Layout Selector */
#wrap {
position: relative;
}
#header {
position: relative;
border-bottom: 1px solid #e6e6e6;
}
#header .inner {
max-width: 1200px;
margin: 0 auto;
}
#header .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#header p {
float: left;
max-width: 500px;
overflow: hidden;
padding: 26px 0;
font-size:1.25em;
line-height: 28px;
letter-spacing: 0.5px;
text-overflow:ellipsis;
white-space:nowrap;
}
#header p a {
display: inline-block;
vertical-align: top;
text-decoration: none;
color: #7a583a;
}
#header h1 img {
width: auto;
height: 28px;
}
#header .mobile-menu {display: none;}
#gnb {
position: relative;
float: right;
}
#gnb ul li {
float: left;
padding:26px 16px;
font-size: 0.875em;
}
#gnb ul li a {
display: block;
position: relative;
padding:0 4px;
text-decoration: none;
line-height: 28px;
color: #000;
}
#gnb ul li a:hover {
color: #7a583a;
}
#gnb ul li a:hover:after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
margin-top: 22px;
background-color: #7a583a;
}
#content .inner {
overflow: hidden;
max-width: 860px;
margin: 0 auto;
}
#aside {
margin-top: 120px;
padding: 57px 0 24px;
border-top: 1px solid #e6e6e6;
}
#aside .inner {
overflow:hidden;
max-width: 1200px;
margin: 0 auto;
}
#aside h2 {
margin-bottom: 6px;
font-size:1em;
color:#666;
}
#aside .sidebar-1 {
float: left;
width: 25%;
min-height: 10px;
padding-right: 36px;
box-sizing: border-box;
}
#aside .sidebar-2 {
float: left;
width: 50%;
min-height: 10px;
margin: 0 0 40px;
padding:0 12px;
box-sizing: border-box;
}
#aside .sidebar-3 {
float: left;
width: 25%;
min-height: 10px;
padding-left: 36px;
box-sizing: border-box;
}
#aside .posts {
margin-bottom: 56px;
}
#aside .posts li {
border-bottom: 1px solid #e6e6e6;
}
#aside .posts li a {
display: block;
overflow: hidden;
width: 100%;
padding: 8px 0;
text-overflow: ellipsis;
text-decoration:none;
white-space: nowrap;
font-size:0.875em;
line-height:1.5714;
color: #b2b2b2;
}
#aside .posts li a:hover {
color: #7a583a;
}
#aside .tags {
margin: 0 0 40px;
}
#aside .tags h2 {
margin-bottom: 10px;
}
#aside .tags .items {
margin-bottom: 5px;
}
#aside .tags .more {
text-decoration:none;
font-size: 12px;
line-height: 2;
color: #d4bca7;
}
#aside .tags .more:after {
content: "";
display: inline-block;
width: 4px;
height: 8px;
margin-left: 6px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat 0 -300px;
vertical-align: baseline;
}
#aside .tags .more:hover {
color: #7a583a;
}
#aside .tags .more:hover:after {
background-position-x: -50px;
}
#aside .search {
margin-bottom: 57px;
}
#aside .search fieldset {
position:relative;
margin-top: 19px;
padding-right:38px;
border: 1px solid #e6e6e6;
}
#aside .search input {
width: 100%;
height: 38px;
padding: 0 10px;
border: 0;
font-size: 0.875em;
line-height: 1.5714;
color: #b2b2b2;
box-sizing: border-box;
}
#aside .search input::-webkit-input-placeholder {color: #d6d6d6;}
#aside .search button {
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 38px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat 13px -337px;
text-align: left;
text-indent:-999em;
}
#aside .search button:hover,
#aside .search button:focus,
#aside .search input:focus+button {
background-position-x: -37px;
}
#aside .count {
margin: 0 0 40px;
}
#aside .count .total {
margin: 11px 0 2px;
font-size: 1.875em;
color: #7a583a;
}
#aside .count ul li {
overflow: hidden;
padding: 4px 0;
border-bottom: 1px solid #e6e6e6;
text-align: right;
font-size: 0.875em;
line-height: 2.1428;
color: #b2b2b2;
}
#aside .count ul li strong {
float: left;
font-weight: normal;
}
#footer {
padding:18px 0;
background-color: #f0f0f0;
}
#footer .copyright {
text-align: center;
font-size: 0.75em;
color: #999;
}
#footer a {
text-decoration:none;
color: #7a583a;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 1px 9px 2px;
background-color: #b2b2b2;
vertical-align: middle;
}
/* Components */
.btn, a.btn {
display: inline-block;
position: relative;
width: 158px;
padding: 0 10px;
border: 1px solid #7a583a;
text-decoration: none;
text-align: left;
font-size: 12px;
line-height: 38px;
color: #7a583a;
-webkit-transition: color .2s, background-color .2s;
transition: color .2s, background-color .2s;
}
.btn:after {
content: "";
position: absolute;
top:50%;
right:10px;
width: 11px;
height: 9px;
margin-top: -5px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat -100px 0;
}
.btn:hover {
background-color: #7a583a;
border-color: #7a583a;
color: #fff;
}
.btn:hover:after {
background-position-x: 0;
}
.cover-slider {
position: relative;
overflow:hidden;
height: 0;
padding-bottom: 40%;
margin:-1px 0 80px;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index:20;
width: 49px;
height: 83px;
margin-top: -42px;
background-image: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -600px;
background-position: 0 -200px;
}
.cover-slider .prev:hover {
background-position-x: -100px
}
.cover-slider .next {
margin-left: 551px;
background-position: -50px -200px;
}
.cover-slider .next:hover {
background-position-x: -150px
}
.cover-slider .paging {
position: absolute;
left: 0;
bottom: 30px;
z-index: 20;
width: 100%;
text-align: center;
}
.cover-slider .paging button {
display: inline-block;
overflow: hidden;
width: 20px;
height: 1px;
margin: 0 5px;
background-color: #b2b2b2;
text-indent: -999em;
vertical-align: bottom;
}
.cover-slider .paging .current {
height: 5px;
margin-top: 0;
background-color: #333;
}
.cover-slider ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cover-slider ul li {
display: table;
width:100%;
height:100%;
background-size: cover;
background-position: 50% 50%;
}
.cover-slider ul li .text-box {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-align:center;
vertical-align: middle;
font-weight:100;
text-decoration: none;
}
.cover-slider ul li .text-box strong {
font-weight: 700;
}
.cover-slider ul li .text-box .title {
display: block;
margin-bottom: 40px;
text-shadow: 0 0 24px rgba(0,0,0,0.4);
font-size: 3.75em;
line-height:1;
color: #fff;
}
.cover-slider ul li .text-box .title em {
display: block;
margin-bottom: 15px;
text-shadow: 0 0 24px rgba(0,0,0,0.4);
font-style: normal;
font-size: 0.5em;
line-height:1;
color: #fff;
}
.cover-slider ul li .text-box .btn {
z-index: 10;
border-color: #fff;
color: #fff;
background-color: rgba(170,170,170,0.1);
box-shadow: 0 0 24px rgba(170,170,170,0.3);
}
.cover-slider ul li .text-box .btn:after {
background-position-x: 0;
}
.cover-slider ul li .text-box .btn:hover {
background-color: #fff;
color: #7a583a;
}
.cover-slider ul li .text-box .btn:hover:after {
background-position-x: -100px;
}
.cover-slider.slide-on ul li {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.cover-thumbnail-list-1 {
overflow: hidden;
max-width: 1200px;
margin: 80px auto 71px;
box-sizing: border-box;
}
.cover-thumbnail-list-1 h2 {
float: left;
width: 24%;
font-weight: 300;
font-size: 1.875em;
line-height: 1.3333;
color: #7a583a;
}
.cover-thumbnail-list-1 h2:after {
content: "";
display: block;
width: 30px;
height:1px;
margin-top:31px;
background-color: #7a583a;
}
.cover-thumbnail-list-1 h2 em {
display: block;
margin-bottom: 10px;
font-style: normal;
font-weight: 700;
font-size:0.4666em;
color: #000;
}
.cover-thumbnail-list-1 ul {
float: left;
width: 76%;
}
.cover-thumbnail-list-1 ul li {
float: left;
width: 33.3333%;
padding-left: 16px;
text-align: center;
font-size: 0.875em;
line-height: 2.25;
color: #666;
box-sizing: border-box;
}
.cover-thumbnail-list-1 ul li a {
display: block;
text-decoration: none;
color: #666;
-webkit-transition: color .2s;
transition: color .2s;
}
.cover-thumbnail-list-1 ul li .thum {
display: block;
margin-bottom: 7px;
position: relative;
}
.cover-thumbnail-list-1 ul li .thum img {
width: 100%;
height: auto;
}
.cover-thumbnail-list-1 ul li .title {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cover-thumbnail-list-1 ul li a:hover {
color: #000;
}
.cover-thumbnail-list-1 ul li .thum:before {
content: "";
background-color: rgba(255,255,255,0);
-webkit-transition: background-color .5s;
transition: background-color .5s;
}
.cover-thumbnail-list-1 ul li a:hover .thum:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
.cover-special-contents {
max-width: 1200px;
margin: 71px auto 80px;
}
.cover-special-contents ul li {
position: relative;
overflow: hidden;
text-align: center;
}
.cover-special-contents ul li .thum {
display: block;
float: left;
width: 50%;
}
.cover-special-contents ul li .thum img {
max-width: 100%;
height: auto;
}
.cover-special-contents ul li .box {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
margin-top: -230px;
}
.cover-special-contents ul li:nth-child(even) .thum {
float: right;
}
.cover-special-contents ul li:nth-child(even) .box {
left: 0;
}
.cover-special-contents ul li .category {
display: block;
margin: 0 0 17px;
font-weight: 700;
font-size: 0.875em;
color: #7a583a;
}
.cover-special-contents ul li .title {
display: block;
margin: 0 0 32px;
font-weight: 300;
font-size: 1.875em;
line-height: 1.3333;
color: #7a583a;
}
.cover-special-contents ul li .title:after {
content: "";
display: block;
width: 40px;
height:1px;
margin:33px auto 0;
background-color: #7a583a;
}
.cover-special-contents ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;
overflow: hidden;
height: 12.8568em;
margin-bottom: 51px;
padding:0 21%;
font-size: 0.875em;
line-height: 2.1428;
text-overflow:ellipsis;
color: #666;
}
.cover-wide-panel {
max-width: 1200px;
margin: 80px auto 120px;
}
.cover-wide-panel .bg {
height:300px;
background-position: 50% 50%;
background-size: cover;
}
.cover-wide-panel .box {
max-width: 1000px;
margin: -100px auto 0;
padding-top:58px;
text-align: center;
background-color: #fff;
}
.cover-wide-panel .category {
display: block;
margin-bottom:9px;
font-weight: 700;
font-size: 0.875em;
color: #7a583a;
}
.cover-wide-panel h2 {
display: block;
margin-bottom: 32px;
padding:2px 0 3px;
font-weight: 300;
font-size: 1.875em;
line-height: 1.3333;
color: #7a583a;
}
.cover-wide-panel h2:after {
content: "";
display: block;
width: 40px;
height:1px;
margin:33px auto 0;
background-color: #7a583a;
}
.cover-wide-panel p {
display: block;
margin-bottom: 48px;
padding:0 125px;
font-size: 0.875em;
line-height: 2.1428;
color: #666;
}
.post-header {
position: relative;
z-index: 10;
overflow: hidden;
max-width: 860px;
margin: 40px auto 0;
border-bottom: 1px solid #7a583a;
text-align: left;
color: #7a583a;
}
.post-header:first-child {
margin-top: 75px;
}
.post-header h2 {
display: inline-block;
font-size: 0.875em;
line-height: 40px;
vertical-align: top;
}
.post-header .list-type {
position: absolute;
top: 50%;
right: 0;
margin-top: -15px;
}
.post-header .list-type button {
float: left;
width:30px;
height: 30px;
margin: 0 0 0 5px;
border: 1px solid #D4BCA7;
background-image: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png);
text-indent: -999em;
box-sizing: border-box;
}
.post-header .list-type .thum {
background-position: 0 -100px;
}
.post-header .list-type .thum:hover,
.post-header .list-type .thum.current {
background-position: -100px -100px;
outline: none;
}
.post-header .list-type .list {
background-position: -50px -100px;
outline: none;
}
.post-header .list-type .list:hover,
.post-header .list-type .list.current {
background-position: -150px -100px;
outline: none;
}
.post-item {
float: left;
width: 23.255813953488372%;
padding:20px 0 33px 2.325581395348837%;
border-bottom: 1px solid #e6e6e6;
}
.post-item:nth-child(4n+1) {
padding-left: 0;
}
.cover-thumbnail-list-2 {
overflow: hidden;
max-width: 1200px;
margin: 0 auto 40px;
}
.cover-thumbnail-list-2 h2 {
position: relative;
z-index: 10;
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
border-top: 1px solid #7a583a;
border-bottom: 1px solid #7a583a;
text-align: center;
font-size: 0.875em;
line-height: 40px;
color: #7a583a;
}
.cover-thumbnail-list-2 ul {
margin-left: -16px;
}
.cover-thumbnail-list-2 ul li {
float: left;
width: 25%;
padding:20px 0 33px 16px;
box-sizing: border-box;
}
.post-item .thum,
.cover-thumbnail-list-2 ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 17px;
padding-bottom: 98.4848%;
background-color: #ebebeb;
}
.post-item .thum:before,
.cover-thumbnail-list-2 ul li .thum:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 22px;
height: 18px;
margin: -9px 0 0 -11px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat -150px -300px;
}
.post-item .thum img,
.cover-thumbnail-list-2 ul li .thum img {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.post-item a,
.cover-thumbnail-list-2 ul li a {
display: block;
text-decoration: none;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
display: block;
overflow: hidden;
width: 90%;
margin-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
font-size: 1em;
color: #000;
-webkit-transition: color .2s;
transition: color .2s;
}
.post-item .excerpt,
.cover-thumbnail-list-2 ul li .excerpt {
display: block;
display:-webkit-box;
overflow: hidden;
width: 90%;
height: 4.125rem;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom: 16px;
text-overflow:ellipsis;
font-size: 0.875em;
line-height: 1.375rem;
color: #666;
-webkit-transition: color .2s;
transition: color .2s;
}
.post-item .excerpt.protected:before,
.cover-thumbnail-list-2 ul li .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat -100px -350px;
vertical-align: middle;
}
.post-item .more,
.cover-thumbnail-list-2 ul li .more {
display: inline-block;
font-size: 0.75em;
color: #d4bca7;
vertical-align: top;
}
.post-item .more:after,
.cover-thumbnail-list-2 ul li .more:after {
content: "";
display: inline-block;
width: 4px;
height: 8px;
margin: 3px 0 4px 6px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat 0 -300px;
vertical-align: top;
}
.post-item .thum:after,
.cover-thumbnail-list-2 ul li .thum:after {
content: "";
background-color: rgba(255,255,255,0);
-webkit-transition: background-color .5s;
transition: background-color .5s;
}
.post-item a:hover .thum:after,
.cover-thumbnail-list-2 ul li a:hover .thum:after {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
.post-item a:hover .title,
.cover-thumbnail-list-2 ul li a:hover .title{
color: #7a583a;
}
.post-item a:hover .excerpt,
.cover-thumbnail-list-2 ul li a:hover .excerpt{
color: #000;
}
.post-item a:hover .more,
.cover-thumbnail-list-2 ul li a:hover .more {
color: #7A583A;
}
.post-item a:hover .more:after,
.cover-thumbnail-list-2 ul li a:hover .more:after {
background-position-x: -50px;
}
.post-type-text .post-item {
float: none;
width: auto;
margin-left: 0;
padding: 28px 0;
}
.post-type-text .post-item a {
overflow: hidden;
width: 100%;
}
.post-type-text .post-item .thum {
float: right;
width: 210px;
height: 148px;
margin: 0 0 0 78px;
padding-bottom:0;
}
.post-type-text .post-item .thum:before {
display: none;
}
.post-type-text .post-item .thum img {
position: relative;
width: 100%;
height: auto;
margin: -29px 0 0;
}
.post-type-text .post-item .title {
width: auto;
margin-bottom: 3px;
padding: 10px 0 0;
font-size: 1.125em;
}
.post-type-text .post-item .excerpt {
width: auto;
}
.post-type-text .post-item .more {
line-height: 1.25;
}
.hgroup {
max-width: 1200px;
margin: 0 auto 60px;
padding: 78px 0 40px;
border-bottom: 1px solid #7a583a;
}
.hgroup .category {
margin-bottom: 8px;
font-weight: 700;
font-size: 0.875em;
color: #000;
}
.hgroup h1 {
font-size: 1.5em;
font-weight: 400;
line-height: 1.0666;
color: #7a583a;
}
.hgroup .post-meta {
margin: 18px 0 -2px;
font-size: 0.75em;
color: #b2b2b2;
}
.hgroup .post-meta a {
text-decoration: none;
color: #d4bca7;
}
.hgroup .post-meta a:hover {
color: #7A583A;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin:0 9px;
background-color: #b3b3b3;
vertical-align: middle;
}
.hgroup .post-meta span:first-child:before {
content: none;
}
.hgroup.guest h2 {
font-size: 0.875em;
font-weight: bold;
line-height: 40px;
color: #7a583a;
}
.hgroup.guest {
max-width: 860px;
margin: 0 auto 60px;
padding: 75px 0 0;
border-bottom: 1px solid #7a583a;
}
.hgroup.tag {
max-width: 860px;
margin: 0 auto 60px;
padding: 75px 0 0;
border-bottom: 1px solid #7a583a;
}
.hgroup.tag h2 {
font-size: 0.875em;
font-weight: bold;
line-height: 40px;
color: #7a583a;
}
.post-btn {
max-width: 1200px;
margin: 200px auto 20px;
}
.post-btn button {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 2px;
text-align: left;
text-indent: -999em;
background-image: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #D4BCA7;
box-sizing: border-box;
}
.post-btn .share {
background-position: 0 -50px;
}
.post-btn .report {
background-position: -50px -50px;
}
.post-btn .share:hover {
background-position: -100px -50px;
}
.post-btn .report:hover {
background-position: -150px -50px;
}
.another-category {
max-width: 1200px;
margin: 20px auto 36px;
padding:38px 0 0;
border-top: 1px solid #7a583a;
}
.another-category h4 {
margin-bottom: 10px;
font-size: 1em;
color: #666;
}
.another-category table {
width: 100%;
border-collapse: collapse;
font-size: 0.875em;
color: #b2b2b2;
}
.another-category table th {
padding: 8px 0 4px;
border-bottom: 1px solid #e6e6e6;
text-align: left;
font-weight: 400;
}
.another-category table th a {
text-decoration: none;
color: #b2b2b2;
}
.another-category table th a:hover {
color: #7A583A;
}
.another-category table th span {
font-size: 0.75em;
}
.another-category td {
width: 60px;
padding: 8px 0 4px;
border-bottom: 1px solid #e6e6e6;
font-size: 0.75em;
line-height: 1;
color: #b2b2b2;
}
/* Style Important */
.another_category table {border: none !important;}
.another_category td {border: none !important;}
.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 35px auto 32px;
color: #b2b2b2;
}
.tags h2 {
margin-bottom: 10px;
font-size: 1em;
color: #666;
}
.tags .items {
margin: 0 0 0 -18px;
}
.tags .items a {
display:inline-block;
margin-left: 18px;
text-decoration:none;
font-size: 0.875em;
line-height: 2.1428;
color: #b2b2b2;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}
#content .tags .items a {
margin-left: 8px;}
#content .tags .items {
margin: 0 0 0 -18px;
padding-left: 10px;
}
.related-articles {
overflow: hidden;
max-width: 1200px;
margin: 40px auto 80px;
}
.related-articles h2 {
margin-bottom: 28px;
border-top: 1px solid #7a583a;
border-bottom: 1px solid #7a583a;
text-align: center;
font-weight: 400;
font-size: 0.875em;
line-height: 40px;
color: #666;
}
.related-articles h2 strong {
font-weight: 700;
color: #000;
}
.related-articles ul {
margin-left: -20px;
vertical-align: top;
}
.related-articles ul li {
float: left;
position: relative;
width:25%;
padding:0 0 0 20px;
box-sizing: border-box;
}
.related-articles ul li a {
overflow: hidden;
display: block;
position: relative;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 98.4848%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 22px;
height: 18px;
margin: -9px 0 0 -11px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat -150px -300px;
}
.related-articles ul li .thum img {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .title {
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
overflow: hidden;
width: 100%;
padding: 0 10px;
background-color: rgba(0,0,0,0.3);
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1em;
line-height: 40px;
color: #fff;
box-sizing: border-box;
}
.comments {
max-width: 860px;
margin: 0 auto;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-size: 1em;
color: #666;
}
.comments h2 .count {
color: #7a583a;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}
.comments .comment-list ul li .author-meta span {
display:inline-block;
}
.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}
.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 10px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 120px;
height: 40px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
float: right;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.875em;
line-height: 40px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png);
background-repeat: no-repeat;
background-position: -97px -295px;
}
.comments .comment-form .submit {
margin-bottom: 10px;
text-align: right;
}
.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination a {
display: inline-block;
margin: 0 10px;
text-decoration: none;
font-size: 0.875em;
line-height: 30px;
color: #d4bca7;
vertical-align: middle;
}
.pagination a:hover {
color: #7A583A;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 30px;
height: 30px;
background-image: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #D4BCA7;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: 0 -150px;
}
.pagination .prev:hover {
background-position: -100px -150px;
}
.pagination .next {
background-position: -50px -150px;
}
.pagination .next:hover {
background-position: -150px -150px;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}
.pagination .view-more {
display: block;
width: 100%;
margin: 0;
padding: 14px 0 11px;
border: 1px solid #d4bca7;
text-decoration: none;
font-size: 12px;
line-height: 1;
color: #d4bca7;
}
.pagination .view-more:before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: 9px;
background: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package.png) no-repeat 0 -400px;
}
.pagination .view-more:hover {
background-color: #d4bca7;
color: #fff;
}
.pagination .view-more:hover:before {
background-position-x: -50px;
}
/* Entry Content */
.entry-content {
max-width: 1200px;
margin: 0 auto;
}
.entry-content h1 {
clear: both;
margin: 29px 0 22px;
font-size: 1.6875em;
line-height: 1.5;
color: #000;
}
.entry-content h2 {
clear: both;
margin: 29px 0 22px;
font-size: 1.5em;
line-height: 1.5;
color: #000;
}
.entry-content h3 {
clear: both;
margin: 29px 0 22px;
font-size: 1.3125em;
line-height: 1.5;
color: #000;
}
.entry-content h4 {
clear: both;
margin: 29px 0 22px;
font-weight: 400;
font-size: 1.125em;
line-height: 1.5;
color: #000;
}
.entry-content p {
margin-bottom: 22px;
word-break: break-all;
font-size: 1em;
line-height: 1.5714;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
}
.entry-content hr {
display: block;
height: 0;
border: 0;
border-bottom: 1px solid #000;
}
.entry-content pre {
word-break:break-all;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul {
list-style: disc inside;
margin-bottom: 22px;
}
.entry-content ul li {
position: relative;
margin-bottom: 10px;
padding-left: 22px;
font-size: 1em;
line-height: 1.5714;
color: #666;
text-indent: -22px;
list-style: inherit;
}
.entry-content ol {
list-style: decimal inside;
margin-bottom: 22px;
}
.entry-content ol li {
position: relative;
margin-bottom: 10px;
padding-left: 16px;
font-size: 1em;
line-height: 1.5714;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #d4bca7;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-top: 10px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
font-size: 1em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form input {
width: 200px;
margin-bottom: 10px;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
/* Comment */
/* Widget & Template Page */
/* ETC */
#dimmed {
position:fixed;
top:0;
left:0;
z-index:500;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
}
#mediaLogNest {
max-width:1200px;
margin: 0 auto;
}
/* Column & Color Type */
.layout-float #wrap {
padding-left: 240px;
}
.layout-float #header {
float: left;
position: absolute;
top: 0;
left: 0;
z-index: 200;
width: 240px;
height: 100%;
border-bottom-width: 0;
border-right: 1px solid #e6e6e6;
background-color: #fff;
}
.layout-float #header h1 {
float: none;
padding: 80px 0 60px;
text-align: center;
}
.layout-float #gnb {
float: none;
padding: 0 40px;
}
.layout-float #gnb ul li {
float: none;
padding: 0;
border-bottom: 1px solid #e6e6e6;
text-align: center;
}
.layout-float #gnb ul li a {
padding: 10px 0 1px;
}
.layout-float #gnb ul li a:hover:after {
margin: 0;
}
.layout-float #content {
max-width: 900px;
padding: 80px 0 0 60px;
}
.layout-float #aside {
padding-left: 60px;
}
.layout-float #aside .inner {
max-width: 900px;
margin: 0;
}
.layout-float #footer .copyright {
max-width: 900px;
padding-left: 60px;
}
.layout-float .cover-slider {
padding-bottom: 53.3333%;
}
.layout-float .cover-slider .prev {
margin-left: -430px;
}
.layout-float .cover-slider .next {
margin-left: 381px;
}
.layout-float .cover-slider ul li .text-box .title {
font-size: 3em;
}
.layout-float .cover-thumbnail-list-1 ul li {
padding-left: 36px;
}
.layout-float .cover-special-contents ul li .category {
margin-top: 57px;
}
.layout-float .cover-special-contents ul li .title {
margin-bottom: 26px;
font-size: 1.5em;
}
.layout-float .cover-special-contents ul li .title:after {
margin-top: 22px;
}
.layout-float .cover-special-contents ul li .excerpt {
height: 10em;
margin-bottom: 35px;
padding: 0 55px;
line-height: 1.7142;
}
.layout-float .cover-wide-panel .box {
width: 800px;
margin-top: -80px;
}
.layout-float .cover-wide-panel h2 {
font-size: 1.5em;
}
.layout-float .cover-wide-panel p {
padding:0 60px;
}
.layout-float .post-item {
width: 30.6666%;
}
.layout-float .post-item:nth-child(4n+1) {
padding-left: 4%;
}
.layout-float .post-item:nth-child(3n+1) {
padding-left: 0;
}
.layout-float.post-type-text .post-item {
width: auto;
padding-left: 0;
}
.layout-float .related-articles ul li .thum {
padding-bottom: 100% ;
}
.layout-float .cover-thumbnail-list-2 ul {
margin-left: -36px;
}
.layout-float .cover-thumbnail-list-2 ul li {
width: 33.3333%;
padding-left: 36px;
}
.layout-float #aside .sidebar-1,
.layout-float #aside .sidebar-2,
.layout-float #aside .sidebar-3 {
width: 33.3333%;
}
.layout-float #aside .sidebar-1 {
padding-right: 24px;
}
.layout-float #aside .sidebar-3 {
padding-left: 24px;
}
.layout-float .related-articles ul {
margin-left: -36px;
}
.layout-float .related-articles ul li {
padding-left: 36px;
}
/* Black Type */
.color-dark,
.color-dark #header,
.color-dark .cover-wide-panel .box,
.color-dark #aside .search input,
.color-dark .comments .comment-form input[type=text],
.color-dark .comments .comment-form input[type=password],
.color-dark .comments .comment-form textarea {
background-color: #141414;
}
.color-dark .entry-content ul li:before {
background-color: #333;
}
.color-dark #footer {
background-color: #000;
}
.color-dark #gnb ul li a:hover:after,
.color-dark .cover-thumbnail-list-1 h2:after,
.color-dark .cover-special-contents ul li .title:after {
background-color: #d4bca7;
}
.color-dark .btn:hover,
.color-dark .pagination .view-more:hover {
background-color: #7A583A;
}
.color-dark #header,
.color-dark #aside,
.color-dark .post-item,
.color-dark .cover-thumbnail-list-2 ul li,
.color-dark .comments .comment-list ul li,
.color-dark .comments {
border-color: #000;
}
.color-dark .hgroup,
.color-dark .another-category,
.color-dark .related-articles h2 {
border-color: #d4bca7;
}
.color-dark #gnb ul li,
.color-dark #aside .posts li,
.color-dark #aside .count ul li,
.color-dark #aside .search fieldset,
.color-dark .entry-content blockquote,
.color-dark .entry-content table,
.color-dark .entry-content table thead th,
.color-dark .entry-content table tbody td,
.color-dark .another-category table th,
.color-dark .another-category table td,
.color-dark .comments .comment-form input[type=text],
.color-dark .comments .comment-form input[type=password],
.color-dark .comments .comment-form textarea,
.color-dark .comments .comment-form .field .secret label:before {
border-color: #333;
}
.color-dark .btn,
.color-dark .pagination .view-more,
.color-dark .post-header .list-type button,
.color-dark .pagination .prev,
.color-dark .pagination .next,
.color-dark .entry-content a,
.color-dark .cover-thumbnail-list-2 h2,
.color-dark .post-header {
border-color: #7A583A;
}
.color-dark .post-item .more,
.color-dark .cover-thumbnail-list-2 ul li .more,
.color-dark .pagination a,
.color-dark .entry-content a {
color: #7a583a;
}
.color-dark #header h1 a {
color: #d4bda9;
}
.color-dark #gnb ul li a:hover,
.color-dark #aside .posts li a:hover,
.color-dark #aside .tags .more:hover,
.color-dark #aside .count .total,
.color-dark #footer a,
.color-dark .tags .items a:hover,
.color-dark .cover-thumbnail-list-1 h2,
.color-dark .cover-special-contents ul li .title,
.color-dark .cover-wide-panel h2,
.color-dark .post-item a:hover .title,
.color-dark .post-item a:hover .more,
.color-dark .cover-thumbnail-list-2 ul li a:hover .title,
.color-dark .cover-thumbnail-list-2 ul li a:hover .more,
.color-dark .pagination a:hover,
.color-dark .hgroup h1,
.color-dark .pagination .selected,
.color-dark .comments h2 .count,
.color-dark .cover-thumbnail-list-1 ul li a:hover {
color: #d4bca7;
}
.color-dark #gnb ul li a,
.color-dark #aside h2,
.color-dark .hgroup .category,
.color-dark .cover-thumbnail-list-1 h2 em,
.color-dark .cover-special-contents ul li .category,
.color-dark .cover-wide-panel .category,
.color-dark .entry-content h2,
.color-dark .post-item a:hover .excerpt,
.color-dark .cover-thumbnail-list-2 h2,
.color-dark .cover-thumbnail-list-2 ul li a:hover .excerpt,
.color-dark .post-header h2,
.color-dark .another-category h4,
.color-dark .tags h2,
.color-dark .related-articles h2 strong,
.color-dark .comments h2,
.color-dark .comments .comment-list ul li .author-meta .nickname,
.color-dark .comments .comment-list ul li .author-meta a,
.color-dark .btn:hover,
.color-dark .pagination .selected,
.color-dark .pagination .view-more:hover {
color: #fff;
}
.color-dark #aside .posts li a,
.color-dark #aside .count ul li,
.color-dark #aside .search input,
.color-dark .cover-thumbnail-list-1 ul li a,
.color-dark .cover-special-contents ul li .excerpt,
.color-dark .cover-wide-panel p,
.color-dark .post-item .excerpt,
.color-dark .cover-thumbnail-list-2 ul li .excerpt,
.color-dark .entry-content p,
.color-dark .entry-content ul li,
.color-dark .entry-content ol li,
.color-dark .entry-content table,
.color-dark .tags .items a,
.color-dark .another-category table th a {
color: #808080;
}
.color-dark #aside .search input::-webkit-input-placeholder,
.color-dark .comments .comment-form input::-webkit-input-placeholder,
.color-dark .comments .comment-form textarea::-webkit-input-placeholder {
color: #333;
}
.color-dark #aside .tags .more,
.color-dark .btn,
.color-dark .pagination .view-more,
.color-dark .comments .comment-list ul li .author-meta .control a {
color: #7a583a;
}
.color-dark .post-item .title,
.color-dark .cover-thumbnail-list-2 ul li .title {
color: #ccc;
}
.color-dark #aside .search button {
background-position-x: -37px;
}
.color-dark #aside .search button:hover,
.color-dark #aside .search button:focus,
.color-dark #aside .search input:focus+button {
background-position-x: 13px;
}
.color-dark #aside .tags .more:after {
background-position-x: -50px;
}
.color-dark #aside .tags .more:hover:after {
background-position-x: 0;
}
.color-dark .pagination .prev {
background-position-x: -100px;
}
.color-dark .pagination .next {
background-position-x: -150px;
}
.color-dark .pagination .prev:hover {
background-position-x: 0;
}
.color-dark .pagination .next:hover {
background-position-x: -50px;
}
.color-dark .post-header .list-type .thum {
background-position-x: -100px;
}
.color-dark .post-header .list-type .thum:hover,
.color-dark .post-header .list-type .thum.current {
background-position-x: 0;
}
.color-dark .post-header .list-type .list {
background-position-x: -150px;
}
.color-dark .post-header .list-type .list:hover,
.color-dark .post-header .list-type .list.current {
background-position-x: -50px;
}
.color-dark .pagination .view-more:before {
background-position-x: -100px;
}
.color-dark .pagination .view-more:hover:before {
background-position-x: -50px;
}
.color-dark .btn:after {
background-position-x: -100px;
}
.color-dark .btn:hover:after,
.color-dark .pagination .view-more:hover {
background-position-x: 0;
}
.color-dark .post-item .more:after,
.color-dark .cover-thumbnail-list-2 ul li .more:after {
background-position-x: -50px;
}
.color-dark .post-item a:hover .more:after,
.color-dark .cover-thumbnail-list-2 ul li a:hover .more:after {
background-position-x: 0;
}
.color-dark #header .mobile-menu span,
.color-dark #header .mobile-menu:before,
.color-dark #header .mobile-menu:after {
background-color: #D4BCA7;
}
.color-dark #gnb {
background-color: #141414;
}
.color-dark .container_postbtn .postbtn_like .txt_like {
color: #808080;
}
/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
#aside .tags .more:after,
#aside .search button,
.btn:after,
.cover-slider .prev,
.cover-slider .next,
.post-header .list-type button,
.post-item .thum:before,
.cover-thumbnail-list-2 ul li .thum:before,
.post-item .more:after,
.cover-thumbnail-list-2 ul li .more:after,
.post-btn button,
.related-articles ul li .thum:before,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before,
.pagination .prev,
.pagination .next,
.pagination .view-more:before {background-image: url(https://tistory1.daumcdn.net/tistory/5245910/skin/images/ico_package_2x.png); background-size: 200px auto;}
}
/* Media Screen - Tablet */
@media screen and (max-width:1199px) {
#header,
#aside,
#content .inner,
.cover-thumbnail-list-1,
.cover-special-contents,
.cover-thumbnail-list-2,
.pagination {
padding-left: 34px;
padding-right: 34px;
}
.cover-slider .prev {
left: 20px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 20px;
margin-left: 0;
}
.cover-special-contents ul li .box {
margin-top: -177px;
}
.cover-special-contents ul li .excerpt {
height: 6.4284em;
-webkit-line-clamp: 3;
}
.cover-wide-panel .box {
max-width: none;
margin-left: 50px;
margin-right: 50px
}
.entry-content img.alignleft,
.entry-content img.alignright {
max-width: 50%;
}
.layout-float #header,
.layout-float .cover-thumbnail-list-1,
.layout-float .cover-special-contents,
.layout-float .cover-wide-panel,
.layout-float .cover-thumbnail-list-2,
.layout-float .pagination,
.layout-float #content .inner {
padding-left: 0;
padding-right: 0;
}
.layout-float .cover-thumbnail-list-1 h2,
.layout-float .cover-special-contents ul li .title,
.layout-float .cover-wide-panel h2 {
font-size: 1.25em;
}
.layout-float .cover-thumbnail-list-1 ul li {
padding-left: 20px;
}
.layout-float .cover-special-contents ul li .category {
margin-top: 30px;
}
.layout-float .cover-special-contents ul li .title {
margin-bottom: 17px;
}
.layout-float .cover-special-contents ul li .title:after {
margin-top: 16px;
}
.layout-float .cover-special-contents ul li .excerpt {
height: 5.1426em;
margin-bottom: 21px;
padding: 0 10%;
font-size: 0.75em;
}
.layout-float .cover-wide-panel {
margin-bottom: 80px;
}
.layout-float .cover-wide-panel p {
padding: 0 10%;
font-size: 0.75em;
}
.layout-float .cover-thumbnail-list-2 ul {
margin-left: -20px;
}
.layout-float .cover-thumbnail-list-2 ul li {
padding-left: 20px;
}
.layout-float .cover-thumbnail-list-2 ul li .title,
.layout-float .post-item .title {
font-size: 1em;
}
.layout-float .cover-thumbnail-list-2 ul li .excerpt,
.layout-float .post-item .excerpt {
height: 5em;
font-size: 0.75em;
line-height: 1.6666;
}
.layout-float .post-header {
margin: 0;
}
.layout-float #content {
padding: 80px 34px 0;
}
.layout-float .cover-wide-panel .box {
width: auto;
}
.layout-float #aside {
padding-left: 34px;
padding-right: 34px;
}
.layout-float #aside .sidebar-1 {
width: 50%;
padding: 0 10px 0 0;
}
.layout-float #aside .sidebar-2 {
width: 50%;
margin: 0;
padding: 0 0 0 10px;
}
.layout-float #aside .sidebar-3 {
clear: both;
float: none;
width: auto;
padding: 0;
}
.layout-float #aside .search {
float: left;
width: 50%;
padding-right: 10px;
box-sizing: border-box;
}
.layout-float #aside .count {
float: right;
width: 50%;
margin: 0;
padding-left: 10px;
box-sizing: border-box;
}
}
@media screen and (max-width:1023px) {
#header h1 {
float: none;
padding: 20px 50px 20px 0;
}
#header h1 img {
width: auto;
height: 28px;
}
#header .mobile-menu {
display: block;
position: absolute;
top: 50%;
right: 19px;
width: 48px;
height: 48px;
margin-top: -24px;
text-indent: -999em;
outline: none;
}
#header .mobile-menu span,
#header .mobile-menu:before,
#header .mobile-menu:after {
position: absolute;
top: 50%;
left:50%;
width: 18px;
height: 2px;
margin-left: -9px;
background-color: #7a583a;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
#header .mobile-menu span {
top: 50%;
margin-top: -1px;
}
#header .mobile-menu:before {
content: "";
margin-top: -8px;
}
#header .mobile-menu:after {
content: "";
margin-top: 6px;
}
#header .mobile-menu.on {
position: fixed;
top: 10px;
margin-top: 0;
z-index: 610;
outline: none;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before {
margin-top: -1px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#header .mobile-menu.on:after {
margin-top: -1px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#gnb {
position: fixed;
top: 0;
right: -300px;
z-index: 600;
width: 300px;
height: 100%;
padding-top: 68px;
background-color: #fff;
box-sizing: border-box;
-webkit-transition: right .3s;
transition: right .3s;
}
#gnb ul {
overflow-y: auto;
height: 100%;
}
#gnb ul li {
float: none;
padding: 0;
border-top: 1px solid #ebebeb;
font-size: 1.125em;
}
#gnb ul li a {
padding: 19px 30px 12px;
}
#gnb ul li a:hover:after {
display: none;
}
#gnb.on {
right: 0;
}
#aside {
margin-top: 80px;
}
#aside .sidebar-1 {
width: 50%;
padding: 0 10px;
}
#aside .sidebar-2 {
width: 50%;
margin: 0;
padding: 0 10px;
}
#aside .sidebar-3 {
clear: both;
float: none;
width: auto;
padding: 0;
}
#aside .search {
float: left;
width: 50%;
padding-right: 10px;
box-sizing: border-box;
}
#aside .count {
float: right;
width: 50%;
margin: 0;
padding-left: 10px;
box-sizing: border-box;
}
#header,
.cover-thumbnail-list-1,
.cover-special-contents {
padding: 0 34px;
}
.cover-slider {
margin-bottom: 50px;
padding-bottom: 39.0625%;
}
.cover-slider ul li .text-box .title {
margin-bottom: 21px;
font-size: 2.25em;
}
.cover-slider ul li .text-box .title em {
margin-bottom: 8px;
font-size: 0.5555em;
}
.btn, a.btn {
width: 138px;
}
.cover-thumbnail-list-1 {
margin-bottom: 41px;
}
.cover-thumbnail-list-1 h2 {
font-size: 1.5em;
}
.cover-thumbnail-list-1 h2 em {
margin-bottom: 3px;
font-size: 0.5833em;
}
.cover-thumbnail-list-1 h2:after {
width: 40px;
margin-top: 24px;
}
.cover-thumbnail-list-1 ul li {
padding-left: 20px;
font-size: 0.75em;
}
.cover-special-contents {
margin-bottom: 50px;
}
.cover-special-contents ul li .category {
margin: 48px 0 -46px;
}
.cover-special-contents ul li .title {
margin: 48px 0 26px;
font-size: 1.5em;
}
.cover-special-contents ul li .title:after {
margin-top: 21px;
}
.cover-special-contents ul li .excerpt {
height: 5.1426em;
margin-bottom: 38px;
padding:0 10%;
line-height: 1.7142;
}
.cover-wide-panel {
margin-bottom: 100px;
}
.cover-wide-panel .bg {
height: 180px;
}
.cover-wide-panel .box {
margin-top: -65px;
padding-top: 48px;
}
.cover-wide-panel .category {
margin-bottom: 0;
}
.cover-wide-panel h2 {
margin-bottom: 20px;
font-size: 1.5em;
}
.cover-wide-panel h2:after {
margin-top: 24px;
}
.post-header:first-child {
margin-top: 50px;
}
.cover-thumbnail-list-2 ul {
margin-left: -20px;
}
.cover-thumbnail-list-2 ul li {
padding: 20px 0 0 20px;
}
.post-header {
margin: 0 34px;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
font-size: 1.125em;
}
.post-item {
width: 22.75%;
padding-left: 3%;
}
.post-type-text .post-item {
padding: 30px 0 22px;
}
.post-type-text .post-item .title {
margin: 0 0 2px;
padding: 0;
font-size: 1em;
}
.post-type-text .post-item .excerpt {
margin-bottom: 9px;
-webkit-line-clamp: 2;
font-size: 0.75em;
}
.hgroup {
margin-bottom: 50px;
padding-bottom: 30px;
}
.related-articles {
margin-bottom: 80px;
}
.related-articles ul {
margin-left: -20px;
}
.related-articles ul li {
padding-left: 20px;
}
.related-articles ul li .title {
font-size: 0.75em;
}
.comments {
margin-bottom: 40px;
}
.layout-float #wrap {
padding-left: 180px;
}
.layout-float #header {
width: 180px;
}
.layout-float #gnb {
position: relative;
width: auto;
top: auto;
right: auto;
padding:0 30px;
}
.layout-float #gnb ul li {
font-size: 0.875em;
border-top: 0;
}
.layout-float .post-item {
padding-left: 4%;
}
.layout-float #header .mobile-menu {
display: none;
}
.layout-float .cover-slider {
padding-bottom: 57.6923%;
}
.layout-float .cover-slider ul li .text-box .title {
font-size: 1.875em;
}
.layout-float .related-articles ul {
margin-left: -20px;
}
.layout-float .related-articles ul li {
padding-left: 20px;
}
}
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header,
#content .inner,
.cover-thumbnail-list-1,
.cover-thumbnail-list-2 {
padding: 0 20px;
}
.pagination {
padding: 0 20px;
margin: 20px auto 60px;
}
.cover-special-contents {
padding: 0;
}
#header h1 {
line-height: 20px;
}
#header h1 img {
height: 20px;
}
#header .mobile-menu {
right: 0;
}
#header .mobile-menu.on {
top: 6px;
}
#gnb {
padding-top: 60px;
}
#aside {
padding:40px 20px;
}
#aside .sidebar-1,
#aside .sidebar-2,
#aside .sidebar-3,
#aside .search,
#aside .count {
float: none;
width: auto;
padding: 0;
}
#aside .posts li a {
padding: 7px 0 4px;
}
.cover-slider {
padding-bottom: 75%;
}
.cover-slider .prev,
.cover-slider .next {
width: 24px;
height: 42px;
margin-top: -21px;
background-size: 100px auto;
}
.cover-slider .prev {
left: 10px;
background-position: 0 -100px;
}
.cover-slider .prev:hover {
background-position-x: -50px;
}
.cover-slider .next {
right: 10px;
background-position: -25px -100px;
}
.cover-slider .next:hover {
background-position-x: -75px;
}
.cover-slider .paging {
bottom: 20px;
}
.cover-slider ul li .text-box .title {
margin-bottom: 28px;
padding: 0 30px;
font-size: 1.5em;
}
.cover-slider ul li .text-box .title em {
margin-bottom: 10px;
font-size: 0.75em;
}
.cover-thumbnail-list-1 {
margin-bottom: 30px;
}
.cover-thumbnail-list-1 h2 {
float: none;
width: auto;
margin-bottom: 20px;
text-align: center;
}
.cover-thumbnail-list-1 h2 br {
display: none;
}
.cover-thumbnail-list-1 h2:after {
margin: 24px auto 0;
}
.cover-thumbnail-list-1 ul {
float: none;
width: auto;
}
.cover-thumbnail-list-1 ul li {
float: none;
width: auto;
margin-bottom: 10px;
padding: 0;
font-size: 0.875em;
line-height: 2.2857;
}
.cover-thumbnail-list-1 ul li .thum img {
width: 100%;
}
.cover-special-contents {
margin: 0;
}
.cover-special-contents ul li,
.cover-special-contents ul li:nth-child(even) {
width: auto;
margin-bottom: 100px;
padding: 0;
}
.cover-special-contents ul li .thum,
.cover-special-contents ul li:nth-child(even) .thum {
float: none;
width: auto;
margin: 0;
}
.cover-special-contents ul li .box {
position: relative;
left: auto;
top: auto;
width: 100%;
margin: 0;
}
.cover-special-contents ul li .category {
margin: 28px 0 -25px;
}
.cover-special-contents ul li .title {
margin: 28px 0 16px;
}
.cover-special-contents ul li .title:after {
margin-top: 13px;
}
.cover-special-contents ul li .excerpt {
margin-bottom: 46px;
}
.cover-wide-panel {
margin-bottom: 80px;
}
.cover-wide-panel .bg {
height: 100px;
}
.cover-wide-panel .box {
margin: -20px 10px 0;
}
.cover-wide-panel p {
padding: 0 10px;
}
.cover-thumbnail-list-2 {
margin-bottom: 20px;
}
.cover-thumbnail-list-2 ul {
margin-left: -10px;
}
.cover-thumbnail-list-2 ul li {
width: 50%;
margin-bottom: 20px;
padding-left: 10px;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
padding-right: 10%;
font-size: 1em;
box-sizing: border-box;
}
.post-item .excerpt,
.cover-thumbnail-list-2 ul li .excerpt {
height: 2.5rem;
margin-bottom: 8px;
padding-right: 10%;
font-size: 0.75em;
line-height: 1.25rem;
}
.post-header {
margin: 0 20px;
}
.post-item {
width: 50%;
padding-left: 0;
box-sizing: border-box;
}
.post-type-thumbnail .post-item {
border-bottom: none;
}
.post-item:nth-child(odd) {
padding-right: 5px;
}
.post-item:nth-child(even) {
padding-left: 5px;
}
.post-type-text .post-item .thum {
width: 100px;
height: 100px;
margin-left: 28px;
}
.post-type-text .post-item .thum img {
width: 100px;
margin: 0;
}
.hgroup {
padding: 49px 0 30px;
}
.hgroup.guest {
margin: 0 20px 25px;
}
.hgroup.tag {
margin: 0 20px;
}
#content .tags.section {
padding: 0 20px;
}
.entry-content h2 {
font-size: 1.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
font-size: 0.75em;
}
.entry-content img.alignleft,
.entry-content img.alignright {
max-width: 100%;
}
.related-articles ul {
margin-left: -10px;
}
.related-articles ul li {
width: 50%;
margin-bottom: 10px;
padding-left: 10px;
}
.comments {
margin-bottom: 20px;
}
.comments .comment-list {
margin-bottom:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}
.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}
.comments .comment-list ul li p {
margin: 14px 0 0;
}
.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form .field {
width: auto;
margin: 0;
padding-right: 80px;
}
.comments .comment-form .field .secret {
float: none;
position: absolute;
bottom: 10px;
right: 0;
}
.comments .comment-form .field .secret label {
line-height: 20px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
display: block;
width: 100%;
margin-bottom: 10px;
}
.comments.guest {
margin-bottom: 20px;
padding: 0 20px;
}
.pagination a {
margin: 0 5px;
}
.layout-float #wrap {
padding: 0;
}
.layout-float #header {
float: none;
position: relative;
z-index: auto;
width: 100%;
height: auto;
padding: 0 10px;
border-bottom-width: 1px;
box-sizing: border-box;
}
.layout-float #header h1 {
float: none;
padding: 20px 0;
text-align: left;
}
.layout-float #header .mobile-menu {
display: block;
}
.layout-float #gnb {
position: fixed;
top: 0;
right: -300px;
z-index: 600;
width: 300px;
height: 100%;
padding: 60px 0 0;
background-color: #fff;
box-sizing: border-box;
-webkit-transition: right .3s;
transition: right .3s;
box-sizing: border-box;
}
.layout-float #gnb.on {
right: 0;
}
.layout-float #gnb ul li {
float: none;
padding: 0;
border-top: 1px solid #ebebeb;
border-bottom: none;
font-size: 1.125em;
text-align: left;
}
.layout-float #gnb ul li a {
padding: 19px 30px 12px;
}
.layout-float #content {
padding: 0;
}
.layout-float .cover-thumbnail-list-1 ul li {
padding:0;
}
.layout-float #header,
.layout-float .cover-thumbnail-list-1,
.layout-float .cover-special-contents,
.layout-float .cover-wide-panel,
.layout-float .cover-thumbnail-list-2,
.layout-float .pagination,
.layout-float #content .inner {
padding: 0 10px;
}
.layout-float .cover-slider {
padding-bottom: 75%;
}
.layout-float .cover-slider .prev {
left: 10px;
margin-left: 0;
}
.layout-float .cover-slider ul li .text-box .title {
margin-bottom: 28px;
padding: 0 30px;
font-size: 1.5em;
}
.layout-float .cover-slider ul li .text-box .title em {
margin-bottom: 10px;
font-size: 0.75em;
}
.layout-float .cover-thumbnail-list-1 h2,
.layout-float .cover-special-contents ul li .title,
.layout-float .cover-wide-panel h2 {
font-size: 1.5em;
}
.layout-float .cover-special-contents ul li .excerpt {
height: 5.1426em;
margin-bottom: 46px;
padding: 0 10%;
line-height: 1.7142;
font-size: 0.875em;
}
.layout-float .cover-wide-panel .box {
margin: -20px 10px 0;
}
.layout-float .cover-wide-panel p {
margin-bottom: 48px;
padding:0 10px;
font-size: 0.875em;
line-height: 2.1428;
}
.layout-float .cover-thumbnail-list-2 ul {
margin-left: -10px;
}
.layout-float .cover-thumbnail-list-2 ul li {
width: 50%;
padding-left: 10px;
}
.layout-float .post-header {
margin: 0 10px;
}
.layout-float .post-item {
width: 50%;
padding-left: 0;
}
.layout-float .post-item:nth-child(4n+1) {
padding-left: 0;
}
.layout-float .post-item:nth-child(even) {
padding-left: 5px;
}
.layout-float .related-articles ul {
margin-left: -10px;
}
.layout-float .related-articles ul li {
padding-left: 10px;
}
.layout-float #aside {
padding: 40px 10px;
}
.layout-float #aside .sidebar-1,
.layout-float #aside .sidebar-2,
.layout-float #aside .sidebar-3,
.layout-float #aside .search,
.layout-float #aside .count {
float: none;
width: auto;
padding: 0;
}
.layout-float.color-dark #gnb {
background-color: #141414;
}
.layout-float.color-dark #gnb ul li {
border-color: #333;
}
}
.revenue_unit_wrap.position_list{
max-width: 860px;
margin: 30px auto
}
/* 드롭다운 메뉴 스타일 시작 */
#gnb .tt_category li a.link_tit { display: none; }
#gnb ul li { font-size: 0.875rem; padding: 26px 10px; }
#gnb .sub_category_list {
display: none;
position: absolute;
z-index: 999;
min-width: 120px;
background-color: #ffffff;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
font-size: .875rem;
}
#gnb .category_list li:hover .sub_category_list { display: block; }
#gnb .sub_category_list li { float: none; padding: 0; }
#gnb .sub_category_list a:hover:after { display: none; }
#gnb .sub_category_list li a {
text-align: left;
padding: 6px 16px;
line-height: 18px;
}
#gnb > ul { display: inline-block; }
#gnb > ul.tt_category > li { padding: 0; border: 0; }
.layout-float #gnb > ul { display: block; }
.layout-float #gnb ul li {
text-align: left;
font-size: 1rem;
border-bottom: 0;
}
.layout-float #gnb .sub_category_list {
display: block;
position: static;
min-width: 100%;
margin: 2px 0 13px 15px;
border-left: 3px solid #f1f1f1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
font-size: .875rem;
}
.layout-float #gnb .sub_category_list li a { padding: 6px 0px 6px 16px; }
.layout-float #gnb ul li a:hover:after { display: none; }
.color-dark #gnb .sub_category_list {
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.2);
}
.layout-float.color-dark #gnb .sub_category_list { box-shadow: none; }
@media screen and (max-width: 928px) {
#gnb > ul { display: block; }
#gnb { overflow-y: auto; height: 100%; }
#gnb ul { overflow: hidden; height: auto; }
#gnb ul li { padding: 0; border-top: 0; }
#gnb ul li a { padding: 8px 30px 8px; }
#gnb .sub_category_list {
display: block;
position: static;
min-width: 100%;
margin: 2px 0 13px 40px;
border-left: 3px solid #f1f1f1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
font-size: .875rem;
}
.color-dark #gnb .sub_category_list { box-shadow: none; }
}
@media screen and (max-width: 767px) {
.layout-float #gnb ul li { border-top: 0; }
.layout-float #gnb .sub_category_list { margin: 2px 0 13px 45px; }
.layout-float #gnb ul li a { padding: 8px 30px 8px; }
}
/* 드롭다운 메뉴 스타일 끝 */
/* 기본 플로팅 버튼 스타일 */
#floating-search-container {
position: fixed;
top: 100px; /* 상단에서 100px 내려오기 */
left: 20px;
z-index: 1000;
}
#floating-search-btn {
width: 40px;
height: 40px;
background-color: #555;
color: white;
border: none;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.2s ease;
}
#floating-search-btn:hover {
background-color: #777;
}
/* 플로팅 검색창 스타일 */
#floating-search-box {
position: fixed;
top: 170px; /* 버튼 바로 아래로, 70px 더 내려서 표시 */
left: 20px;
width: 260px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: none;
z-index: 1100;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: #555;
color: white;
font-size: 14px;
}
.search-header h3 {
margin: 0;
font-size: 14px;
}
#close-search-btn {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}
.search-body {
padding: 10px;
}
#floating-search-input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
.search-controls {
display: flex;
gap: 6px;
margin-top: 8px;
}
.search-controls button {
flex: 1;
padding: 6px 8px;
background: #555;
color: white;
border: none;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: background-color 0.2s;
}
.search-controls button:hover {
background: #777;
}
#search-count {
display: block;
text-align: center;
margin-top: 6px;
font-size: 12px;
color: #666;
}
/* 본문 컨테이너 넓히기 */
#content .inner,
.entry-content {
max-width: 1200px; /* 본문 최대 너비를 1200px로 확대 */
margin: 0 auto; /* 중앙 정렬 */
padding: 20px; /* 양쪽 여백 추가 */
box-sizing: border-box; /* 패딩을 포함한 크기 계산 */
}
/* 전체 페이지에서 본문 영역을 차지하는 비율 확대 */
#wrap {
max-width: 100%; /* 전체 페이지 너비로 확장 */
padding: 0 20px; /* 양쪽 여백 최소화 */
}
/* 이미지도 본문 너비에 맞춰 확장 */
.entry-content img {
max-width: 100%; /* 이미지가 본문 너비를 넘지 않도록 */
height: auto; /* 비율 유지 */
display: block;
margin: 20px auto; /* 중앙 정렬 및 여백 추가 */
}
/* 모바일 환경에서 여백 최소화 */
@media screen and (max-width: 768px) {
/* 본문 컨테이너 */
#content .inner,
.entry-content {
max-width: 100%; /* 화면 전체 너비 사용 */
margin: 0; /* 상하좌우 여백 제거 */
padding: 0; /* 패딩 제거 */
}
/* 이미지 및 컨텐츠 */
.entry-content img {
margin: 0; /* 이미지 여백 제거 */
}
/* 전체 페이지 */
body,
html {
margin: 0;
padding: 0;
overflow-x: hidden; /* 수평 스크롤 방지 */
}
}
/* =========================================================
ERR DAY TRIP — MAGAZINE HOME 2026
기존 글/카테고리 템플릿은 유지하고 홈 커버와 헤더만 재구성합니다.
========================================================= */
:root {
--edt-ink: #171713;
--edt-paper: #f3efe6;
--edt-paper-deep: #e7dfd1;
--edt-red: #e74725;
--edt-acid: #d5ff38;
--edt-line: rgba(23, 23, 19, .2);
}
#header.edt-site-header,
#header.edt-site-header * ,
.edt-magazine-home,
.edt-magazine-home * {
box-sizing: border-box;
}
#header.edt-site-header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
height: auto;
background: rgba(243, 239, 230, .94);
border-bottom: 1px solid var(--edt-ink);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#header .edt-header-inner {
position: relative;
display: flex;
align-items: center;
min-height: 82px;
padding: 0 clamp(22px, 4vw, 68px);
}
#header .edt-brand {
display: inline-flex;
flex-direction: column;
flex: 0 0 auto;
color: var(--edt-ink);
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 950;
line-height: .78;
letter-spacing: -.06em;
transform: skew(-7deg);
}
#header .edt-brand span:last-child {
margin-left: 20px;
color: var(--edt-red);
}
#header .edt-primary-nav {
display: flex;
align-items: center;
gap: clamp(22px, 3vw, 48px);
margin-left: auto;
}
#header .edt-primary-nav a {
position: relative;
color: var(--edt-ink);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
}
#header .edt-primary-nav a:after {
position: absolute;
right: 0;
bottom: -7px;
left: 0;
height: 2px;
background: var(--edt-red);
content: "";
transform: scaleX(0);
transform-origin: right center;
transition: transform .25s ease;
}
#header .edt-primary-nav a:hover:after {
transform: scaleX(1);
transform-origin: left center;
}
#header .mobile-menu {
display: none;
position: static;
width: auto;
height: auto;
margin-left: 24px;
padding: 10px 0;
border: 0;
background: transparent;
color: var(--edt-ink);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 900;
letter-spacing: .12em;
}
#header #gnb {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
max-height: calc(100vh - 64px);
padding: 28px clamp(22px, 4vw, 68px) 36px;
overflow-y: auto;
background: var(--edt-ink);
border: 0;
box-shadow: none;
color: var(--edt-paper);
}
#header #gnb a {
color: var(--edt-paper);
}
#header #gnb.on,
#header.on #gnb,
body.mobile-menu-on #header #gnb,
body.nav-on #header #gnb {
display: block;
}
#header + hr {
display: none;
}
body:has(.edt-magazine-home) {
background: var(--edt-paper);
color: var(--edt-ink);
}
body:has(.edt-magazine-home) #wrap,
body:has(.edt-magazine-home) .container,
body:has(.edt-magazine-home) #content {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
body:has(.edt-magazine-home) .container {
display: block;
}
body:has(.edt-magazine-home) aside,
body:has(.edt-magazine-home) .sidebar {
display: none !important;
}
.edt-magazine-home {
width: 100%;
overflow: hidden;
background: var(--edt-paper);
color: var(--edt-ink);
font-family: "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
word-break: keep-all;
}
.edt-magazine-home a {
color: inherit;
text-decoration: none;
}
.edt-magazine-home ul,
.edt-magazine-home li {
margin: 0;
padding: 0;
list-style: none;
}
.edt-lead {
position: relative;
padding-top: 28px;
background: var(--edt-paper);
border-bottom: 1px solid var(--edt-ink);
}
.edt-issue-rail {
display: flex;
align-items: center;
gap: 18px;
padding: 0 clamp(22px, 4vw, 68px) 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .18em;
}
.edt-issue-rail i {
flex: 1;
height: 1px;
background: var(--edt-ink);
}
.edt-issue-rail span:first-child {
color: var(--edt-red);
}
.edt-lead-grid {
display: grid;
grid-template-columns: minmax(0, 1.58fr) minmax(300px, .72fr);
grid-template-rows: repeat(3, minmax(168px, 1fr));
gap: 3px;
min-height: 660px;
padding: 0 clamp(22px, 4vw, 68px);
}
.edt-lead-card {
position: relative;
min-height: 0;
overflow: hidden;
background: #444;
}
.edt-lead-card:first-child {
grid-row: 1 / span 3;
}
.edt-lead-card > a,
.edt-wide-story > a {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.edt-lead-card img,
.edt-wide-story img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.edt-lead-card:hover img,
.edt-wide-story:hover img {
transform: scale(1.035);
}
.edt-card-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.78) 100%);
}
.edt-lead-copy {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: clamp(24px, 4vw, 54px);
color: #fff;
}
.edt-lead-copy em,
.edt-wide-copy em,
.edt-editorial-copy em,
.edt-more-stories em {
display: inline-block;
padding: 6px 9px;
background: var(--edt-acid);
color: var(--edt-ink);
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 900;
letter-spacing: .08em;
}
.edt-lead-copy strong {
display: block;
max-width: 780px;
font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
font-size: clamp(36px, 4.8vw, 70px);
font-weight: 500;
line-height: 1.06;
letter-spacing: -.065em;
text-wrap: balance;
}
.edt-lead-card:not(:first-child) .edt-lead-copy {
gap: 8px;
padding: 22px;
}
.edt-lead-card:not(:first-child) .edt-lead-copy strong {
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(17px, 1.6vw, 24px);
font-weight: 800;
line-height: 1.3;
letter-spacing: -.04em;
}
.edt-read-more {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .14em;
}
.edt-read-more b {
margin-left: 5px;
color: var(--edt-acid);
}
.edt-region-strip {
display: flex;
align-items: stretch;
margin-top: 34px;
padding: 0 clamp(22px, 4vw, 68px);
overflow-x: auto;
border-top: 1px solid var(--edt-ink);
border-bottom: 1px solid var(--edt-ink);
scrollbar-width: none;
}
.edt-region-strip::-webkit-scrollbar {
display: none;
}
.edt-region-strip > * {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 62px;
padding: 0 26px;
border-right: 1px solid var(--edt-line);
font-size: 13px;
font-weight: 750;
white-space: nowrap;
}
.edt-region-strip .edt-region-label {
padding-left: 0;
color: var(--edt-red);
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: .15em;
}
.edt-region-strip a {
transition: background .2s, color .2s;
}
.edt-region-strip a:hover {
background: var(--edt-ink);
color: var(--edt-paper);
}
.edt-manifesto {
display: grid;
grid-template-columns: minmax(140px, .35fr) minmax(420px, 1.25fr) minmax(260px, .48fr);
gap: clamp(24px, 5vw, 76px);
align-items: end;
padding: clamp(76px, 10vw, 148px) clamp(22px, 4vw, 68px);
}
.edt-manifesto > p {
align-self: start;
margin: 7px 0 0;
color: var(--edt-red);
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: .16em;
}
.edt-manifesto h1 {
margin: 0;
font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
font-size: clamp(40px, 5.6vw, 82px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.065em;
}
.edt-manifesto > div {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 8px;
font-size: 13px;
line-height: 1.75;
}
.edt-section {
padding: clamp(76px, 9vw, 130px) clamp(22px, 4vw, 68px);
border-bottom: 1px solid var(--edt-ink);
}
.edt-section-heading {
display: grid;
grid-template-columns: minmax(145px, .38fr) minmax(360px, 1.1fr) auto;
gap: clamp(24px, 5vw, 72px);
align-items: end;
margin-bottom: clamp(44px, 6vw, 82px);
}
.edt-section-heading > div {
display: flex;
align-items: center;
gap: 14px;
align-self: start;
}
.edt-section-heading > div span {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 800;
}
.edt-section-heading > div p {
margin: 0;
color: var(--edt-red);
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: .15em;
}
.edt-section-heading h2 {
margin: 0;
font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
font-size: clamp(36px, 4.4vw, 64px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.055em;
}
.edt-section-heading > a {
padding-bottom: 8px;
border-bottom: 1px solid currentColor;
font-size: 11px;
font-weight: 750;
}
.edt-section-heading > a b {
margin-left: 16px;
color: var(--edt-red);
}
.edt-editorial-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(30px, 4vw, 62px) clamp(18px, 2.7vw, 42px);
}
.edt-editorial-grid > li {
grid-column: span 4;
min-width: 0;
}
.edt-editorial-grid > li:nth-child(1),
.edt-editorial-grid > li:nth-child(6) {
grid-column: span 7;
}
.edt-editorial-grid > li:nth-child(2),
.edt-editorial-grid > li:nth-child(7) {
grid-column: span 5;
}
.edt-editorial-image {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--edt-paper-deep);
}
.edt-editorial-grid > li:nth-child(2) .edt-editorial-image,
.edt-editorial-grid > li:nth-child(7) .edt-editorial-image {
aspect-ratio: 5 / 4;
}
.edt-editorial-image img,
.edt-note-thumb img,
.edt-more-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.edt-editorial-image > span {
position: absolute;
right: 0;
bottom: 0;
padding: 10px 13px;
background: var(--edt-acid);
color: var(--edt-ink);
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: .08em;
transform: translateY(100%);
transition: transform .25s ease;
}
.edt-editorial-image:hover img,
.edt-note-grid a:hover img,
.edt-more-stories a:hover img {
transform: scale(1.035);
}
.edt-editorial-image:hover > span {
transform: translateY(0);
}
.edt-editorial-copy {
padding-top: 20px;
}
.edt-editorial-copy h3 {
margin: 13px 0 10px;
font-size: clamp(20px, 2vw, 29px);
font-weight: 800;
line-height: 1.3;
letter-spacing: -.045em;
}
.edt-editorial-copy p {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: rgba(23,23,19,.7);
font-size: 12px;
line-height: 1.75;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.edt-notes {
max-width: none;
background: var(--edt-ink);
border-color: rgba(255,255,255,.2);
color: var(--edt-paper);
}
.edt-section-heading-dark > div p,
.edt-section-heading-dark > a b {
color: var(--edt-acid);
}
.edt-note-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(255,255,255,.25);
border-left: 1px solid rgba(255,255,255,.25);
}
.edt-note-grid li {
min-width: 0;
border-right: 1px solid rgba(255,255,255,.25);
border-bottom: 1px solid rgba(255,255,255,.25);
}
.edt-note-grid a {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: 18px;
}
.edt-note-thumb {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #2a2a26;
}
.edt-note-index {
margin-top: 18px;
color: var(--edt-acid);
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: .15em;
}
.edt-note-grid strong {
display: block;
padding: 12px 36px 8px 0;
font-size: 18px;
line-height: 1.45;
letter-spacing: -.035em;
}
.edt-note-arrow {
position: absolute;
right: 18px;
bottom: 22px;
color: var(--edt-acid);
font-size: 18px;
}
.edt-wide-story {
height: min(72vw, 760px);
border-bottom: 1px solid var(--edt-ink);
}
.edt-wide-copy {
position: absolute;
right: clamp(22px, 6vw, 100px);
bottom: clamp(30px, 6vw, 88px);
left: clamp(22px, 6vw, 100px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
max-width: 760px;
color: #fff;
}
.edt-wide-copy strong {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(40px, 5vw, 72px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.055em;
}
.edt-wide-copy p {
margin: 0;
font-size: 13px;
line-height: 1.8;
}
.edt-more-stories > ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 42px 28px;
}
.edt-more-stories li {
min-width: 0;
}
.edt-more-stories a {
display: block;
}
.edt-more-thumb {
display: block;
margin-bottom: 16px;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--edt-paper-deep);
}
.edt-more-stories strong {
display: block;
margin: 12px 0;
font-size: 20px;
line-height: 1.4;
}
.edt-more-stories p {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: rgba(23,23,19,.65);
font-size: 12px;
line-height: 1.7;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.edt-trip-tools {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
border-bottom: 1px solid var(--edt-ink);
}
.edt-trip-tools a {
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
padding: clamp(26px, 4vw, 56px);
border-right: 1px solid var(--edt-ink);
transition: background .25s, color .25s;
}
.edt-trip-tools a:last-child {
border-right: 0;
}
.edt-trip-tools a:hover {
background: var(--edt-red);
color: #fff;
}
.edt-trip-tools span {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
}
.edt-trip-tools p {
margin: auto 0 12px;
font-size: 13px;
}
.edt-trip-tools strong {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(24px, 3vw, 44px);
font-weight: 950;
line-height: 1;
letter-spacing: -.05em;
}
.edt-trip-tools b {
position: absolute;
top: 30px;
right: 30px;
font-size: 20px;
}
.edt-letter {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
gap: clamp(30px, 6vw, 88px);
align-items: end;
padding: clamp(78px, 10vw, 146px) clamp(22px, 4vw, 68px);
background: var(--edt-red);
color: #fff;
}
.edt-letter > div > span {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: .17em;
}
.edt-letter h2 {
margin: 22px 0 0;
font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
font-size: clamp(40px, 5.6vw, 82px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.055em;
}
.edt-letter > p {
margin: 0;
justify-self: end;
max-width: 440px;
font-size: 12px;
line-height: 1.9;
}
@media screen and (max-width: 1100px) {
.edt-lead-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
min-height: 580px;
}
.edt-manifesto,
.edt-section-heading {
grid-template-columns: 130px 1fr;
}
.edt-manifesto > div,
.edt-section-heading > a {
grid-column: 2;
}
.edt-letter {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 760px) {
#header .edt-header-inner {
min-height: 64px;
padding: 0 18px;
}
#header .edt-primary-nav {
display: none;
}
#header .mobile-menu {
display: block;
margin-left: auto;
}
#header #gnb {
padding: 26px 20px 34px;
}
.edt-lead {
padding-top: 20px;
}
.edt-issue-rail {
padding: 0 18px 18px;
}
.edt-lead-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 2px;
min-height: 0;
padding: 0;
}
.edt-lead-card,
.edt-lead-card:first-child {
grid-row: auto;
min-height: 220px;
}
.edt-lead-card:first-child {
min-height: min(72vh, 620px);
}
.edt-lead-copy {
padding: 26px 20px;
}
.edt-lead-copy strong {
font-size: clamp(36px, 11vw, 56px);
}
.edt-lead-card:not(:first-child) .edt-lead-copy {
padding: 20px;
}
.edt-region-strip {
margin-top: 20px;
padding: 0;
}
.edt-region-strip > * {
min-height: 56px;
padding: 0 20px;
}
.edt-region-strip .edt-region-label {
padding-left: 18px;
}
.edt-manifesto {
display: block;
padding: 74px 18px 82px;
}
.edt-manifesto h1 {
margin-top: 28px;
font-size: clamp(39px, 12vw, 58px);
}
.edt-manifesto > div {
margin-top: 30px;
}
.edt-section {
padding: 72px 18px;
}
.edt-section-heading {
display: block;
margin-bottom: 42px;
}
.edt-section-heading h2 {
margin: 25px 0;
font-size: clamp(37px, 11vw, 54px);
}
.edt-section-heading > a {
display: inline-block;
}
.edt-editorial-grid {
display: grid;
grid-template-columns: 1fr;
gap: 50px;
}
.edt-editorial-grid > li,
.edt-editorial-grid > li:nth-child(1),
.edt-editorial-grid > li:nth-child(2),
.edt-editorial-grid > li:nth-child(6),
.edt-editorial-grid > li:nth-child(7) {
grid-column: auto;
}
.edt-editorial-image,
.edt-editorial-grid > li:nth-child(2) .edt-editorial-image,
.edt-editorial-grid > li:nth-child(7) .edt-editorial-image {
aspect-ratio: 4 / 3;
}
.edt-note-grid,
.edt-more-stories > ul {
grid-template-columns: 1fr;
}
.edt-note-grid a {
display: grid;
grid-template-columns: 42% 1fr;
gap: 0 16px;
align-items: start;
}
.edt-note-thumb {
grid-row: 1 / span 3;
aspect-ratio: 1 / 1;
}
.edt-note-index {
margin-top: 2px;
}
.edt-note-grid strong {
padding: 8px 26px 4px 0;
font-size: 15px;
}
.edt-wide-story {
height: 72vh;
}
.edt-wide-copy {
right: 20px;
bottom: 28px;
left: 20px;
}
.edt-trip-tools {
grid-template-columns: 1fr;
}
.edt-trip-tools a {
min-height: 190px;
border-right: 0;
border-bottom: 1px solid var(--edt-ink);
}
.edt-trip-tools a:last-child {
border-bottom: 0;
}
.edt-letter {
display: block;
padding: 78px 18px;
}
.edt-letter > p {
margin: 34px 0;
justify-self: start;
}
}
@media (prefers-reduced-motion: reduce) {
.edt-magazine-home *,
#header.edt-site-header * {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* ERR DAY TRIP — 티스토리 커버 대표 이미지 보정 */
.edt-editorial-image,
.edt-note-thumb,
.edt-more-thumb {
background:
linear-gradient(110deg, rgba(23,23,19,.045) 25%, rgba(255,255,255,.38) 42%, rgba(23,23,19,.045) 60%),
var(--edt-paper-deep);
background-size: 240% 100%;
animation: edt-thumb-shimmer 1.8s linear infinite;
}
.edt-magazine-home img[src*="xBoxReplace_250.png"],
.edt-magazine-home img.edt-thumb-pending,
.edt-magazine-home img.edt-thumb-failed {
opacity: 0;
}
.edt-magazine-home img.edt-thumb-ready {
opacity: 1;
transition: opacity .35s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
@keyframes edt-thumb-shimmer {
from { background-position: 180% 0; }
to { background-position: -70% 0; }
}
@media (prefers-reduced-motion: reduce) {
.edt-editorial-image,
.edt-note-thumb,
.edt-more-thumb {
animation: none;
}
}
/* =========================================================
ERR DAY CATEGORY MAGAZINE — 2026-08
Archive pages only. Home and article pages stay untouched.
========================================================= */
body:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) {
background: var(--edt-paper);
color: var(--edt-ink);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #wrap,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .container,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content {
float: none;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) aside,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .sidebar {
display: none !important;
}
/* Archive masthead */
.edt-archive-head {
width: 100%;
padding: clamp(28px, 4.5vw, 74px) clamp(20px, 5.2vw, 88px) 0;
background: var(--edt-paper);
border-bottom: 1px solid var(--edt-ink);
box-sizing: border-box;
}
.edt-archive-issue {
display: grid;
grid-template-columns: auto minmax(40px, 1fr) auto;
gap: 18px;
align-items: center;
margin-bottom: clamp(48px, 8vw, 118px);
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
line-height: 1;
color: var(--edt-ink);
}
.edt-archive-issue i {
display: block;
height: 1px;
background: currentColor;
opacity: .5;
}
.edt-archive-copy {
display: grid;
grid-template-columns: minmax(180px, 3fr) minmax(0, 7fr);
column-gap: clamp(32px, 6vw, 110px);
align-items: end;
padding-bottom: clamp(40px, 6vw, 84px);
}
.edt-archive-copy > p {
align-self: start;
margin: .75em 0 0;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .2em;
line-height: 1.5;
}
.edt-archive-copy > p::before {
content: "↘";
display: inline-block;
margin-right: 12px;
color: var(--edt-red);
font-size: 15px;
}
.edt-archive-copy h1 {
grid-column: 2;
margin: 0;
font-family: "Noto Serif KR", "Times New Roman", serif;
font-size: clamp(62px, 9.2vw, 156px);
font-weight: 900;
letter-spacing: -.07em;
line-height: .82;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.edt-archive-description {
grid-column: 2;
width: min(100%, 680px);
margin-top: clamp(28px, 4vw, 54px);
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(14px, 1.15vw, 18px);
font-weight: 400;
line-height: 1.8;
word-break: keep-all;
}
.edt-archive-filter {
display: flex;
align-items: stretch;
width: 100%;
overflow-x: auto;
border-top: 1px solid var(--edt-ink);
scrollbar-width: none;
}
.edt-archive-filter::-webkit-scrollbar {
display: none;
}
.edt-archive-filter a {
position: relative;
flex: 0 0 auto;
padding: 22px clamp(22px, 3.2vw, 54px);
border-right: 1px solid var(--edt-ink);
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .13em;
line-height: 1;
color: var(--edt-ink);
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.edt-archive-filter a:first-child {
border-left: 1px solid var(--edt-ink);
}
.edt-archive-filter a:hover,
.edt-archive-filter a.is-current {
background: var(--edt-ink);
color: var(--edt-acid);
}
/* Editorial grid */
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-flow: dense;
grid-auto-rows: minmax(360px, auto);
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: var(--edt-paper);
box-sizing: border-box;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner::after {
display: none !important;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item {
position: relative;
float: none !important;
width: auto !important;
min-width: 0;
height: auto !important;
margin: 0 !important;
padding: 0;
border: 0;
box-sizing: border-box;
background: var(--edt-paper);
overflow: hidden;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item > a {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: inherit;
margin: 0;
padding: clamp(20px, 2.2vw, 34px);
color: var(--edt-ink);
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .thum {
position: relative;
display: block;
width: 100% !important;
height: auto !important;
margin: 0 0 clamp(22px, 2.2vw, 34px);
padding: 0;
aspect-ratio: 4 / 3;
background: var(--edt-paper-deep);
overflow: hidden;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .thum::before,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .thum::after {
display: none !important;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .thum img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none;
object-fit: cover;
transform: scale(1.002);
transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item > a:hover .thum img {
transform: scale(1.045);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .edt-list-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
margin: 0 0 18px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.4;
text-transform: uppercase;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .edt-list-meta em {
display: inline-flex;
align-items: center;
max-width: 66%;
padding: 7px 10px 6px;
border: 1px solid currentColor;
border-radius: 999px;
font-style: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .edt-list-meta time {
white-space: nowrap;
opacity: .64;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .title {
display: -webkit-box !important;
height: auto !important;
margin: 0;
padding: 0;
font-family: "Noto Serif KR", "Noto Sans KR", serif;
font-size: clamp(24px, 2vw, 34px);
font-weight: 800;
letter-spacing: -.045em;
line-height: 1.28;
color: inherit;
word-break: keep-all;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .excerpt {
display: -webkit-box !important;
height: auto !important;
margin: 18px 0 28px;
padding: 0;
font-family: "Noto Sans KR", sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 1.75;
color: inherit;
opacity: .72;
word-break: keep-all;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .more {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
height: auto;
margin: auto 0 0;
padding-top: 18px;
border-top: 1px solid currentColor;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1;
color: inherit;
text-transform: uppercase;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .more b {
font-size: 14px;
font-weight: 400;
transition: transform .25s ease;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item > a:hover .more b {
transform: translate(4px, -4px);
}
/* One lead story + four issue cards */
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child {
grid-column: span 6;
grid-row: span 2;
min-height: 760px;
background: var(--edt-ink);
color: #fff;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child > a {
justify-content: flex-end;
padding: clamp(28px, 4vw, 66px);
color: #fff;
isolation: isolate;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child > a::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
linear-gradient(180deg, rgba(8,8,8,.03) 28%, rgba(8,8,8,.2) 48%, rgba(8,8,8,.94) 100%);
pointer-events: none;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .thum {
position: absolute;
z-index: -2;
inset: 0;
width: 100% !important;
height: 100% !important;
margin: 0;
aspect-ratio: auto;
background: #191919;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .edt-list-meta,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .title,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .excerpt,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .more {
position: relative;
z-index: 1;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .edt-list-meta {
margin-bottom: clamp(20px, 2vw, 30px);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .title {
max-width: 900px;
font-size: clamp(42px, 4.7vw, 78px);
line-height: 1.12;
-webkit-line-clamp: 4;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .excerpt {
max-width: 720px;
margin: 24px 0 34px;
font-size: clamp(13px, 1vw, 16px);
color: #fff;
opacity: .8;
-webkit-line-clamp: 3;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) {
grid-column: span 3;
min-height: 380px;
border-left: 1px solid var(--edt-ink);
border-bottom: 1px solid var(--edt-ink);
background: var(--edt-acid);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) > a {
color: var(--edt-ink);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) .thum {
aspect-ratio: 16 / 10;
filter: saturate(.92);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) .title {
font-size: clamp(22px, 1.55vw, 28px);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) {
grid-column: span 4;
min-height: 540px;
border-top: 1px solid var(--edt-ink);
border-right: 1px solid var(--edt-ink);
background: var(--edt-paper);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) .thum {
aspect-ratio: 16 / 10;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) .title {
font-size: clamp(23px, 1.75vw, 31px);
}
/* Pagination */
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 !important;
padding: clamp(38px, 5vw, 76px) clamp(20px, 5vw, 80px);
background: var(--edt-ink);
box-sizing: border-box;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination > *:not(.view-more) {
display: none !important;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination .view-more {
display: inline-flex !important;
align-items: center;
justify-content: space-between;
width: min(100%, 360px);
min-height: 58px;
margin: 0;
padding: 0 24px;
border: 1px solid var(--edt-acid);
border-radius: 0;
background: transparent;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1;
color: var(--edt-acid);
text-decoration: none;
box-sizing: border-box;
transition: background-color .2s ease, color .2s ease;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination .view-more::after {
content: "↘";
margin-left: 24px;
font-size: 15px;
font-weight: 400;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination .view-more:hover {
background: var(--edt-acid);
color: var(--edt-ink);
}
@media screen and (max-width: 1180px) {
.edt-archive-copy {
grid-template-columns: minmax(150px, 2.4fr) minmax(0, 7.6fr);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner {
grid-auto-rows: auto;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child {
grid-column: 1 / -1;
grid-row: auto;
min-height: min(820px, 78vh);
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5),
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) {
grid-column: span 6;
min-height: 520px;
}
}
@media screen and (max-width: 700px) {
.edt-archive-head {
padding: 22px 18px 0;
}
.edt-archive-issue {
gap: 10px;
margin-bottom: 62px;
font-size: 8px;
letter-spacing: .13em;
}
.edt-archive-copy {
display: block;
padding-bottom: 42px;
}
.edt-archive-copy > p {
margin: 0 0 24px;
font-size: 9px;
}
.edt-archive-copy h1 {
font-size: clamp(48px, 17vw, 78px);
line-height: .88;
letter-spacing: -.065em;
}
.edt-archive-description {
width: 100%;
margin-top: 30px;
font-size: 14px;
line-height: 1.7;
}
.edt-archive-filter {
margin: 0 -18px;
width: calc(100% + 36px);
}
.edt-archive-filter a {
padding: 18px 22px;
font-size: 9px;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner {
display: block !important;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child {
min-height: 68svh;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child > a {
padding: 28px 20px;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .title {
font-size: clamp(36px, 11vw, 54px);
line-height: 1.14;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:first-child .excerpt {
margin: 18px 0 26px;
font-size: 13px;
-webkit-line-clamp: 2;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5),
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) {
min-height: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid var(--edt-ink);
border-bottom: 0;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) > a,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) > a {
min-height: 0;
padding: 22px 18px 26px;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .thum,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) .thum,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) .thum {
margin-bottom: 22px;
aspect-ratio: 4 / 3;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .title,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+2):nth-child(-n+5) .title,
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .inner > .post-item:nth-child(n+6) .title {
font-size: 25px;
line-height: 1.3;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .post-item .excerpt {
margin: 16px 0 24px;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination {
padding: 36px 18px;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination .view-more {
width: 100%;
}
}
/* Static archive masthead: reliable in Tistory preview and public pages */
.edt-archive-head-static {
display: none;
}
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) .edt-archive-head-static {
display: block;
}
/* Archive pagination must span the full editorial grid */
:is(.edt-archive-page, #tt-body-category, #tt-body-search, #tt-body-tag, #tt-body-archive) #content > .pagination {
float: none !important;
clear: both !important;
flex: 0 0 100% !important;
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
}
/* =========================================================
ERR DAY ARTICLE MAGAZINE — detail pages only
========================================================= */
body#tt-body-page {
background: var(--edt-paper);
color: var(--edt-ink);
overflow-x: clip;
}
body#tt-body-page .container,
body#tt-body-page #content,
body#tt-body-page #content > .inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body#tt-body-page #content {
float: none !important;
}
body#tt-body-page aside,
body#tt-body-page .sidebar {
display: none !important;
}
body#tt-body-page #content > .inner::after {
display: none !important;
}
.edt-article-layout {
width: 100%;
margin: 0;
padding: 0;
background: var(--edt-paper);
}
/* Split editorial hero */
.edt-article-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
min-height: calc(100svh - 82px);
border-bottom: 1px solid var(--edt-ink);
background: var(--edt-ink);
}
.edt-article-hero-media {
position: relative;
min-width: 0;
min-height: inherit;
margin: 0;
padding: 0;
background:
linear-gradient(135deg, #d9d4c7 0%, #a7a292 100%);
overflow: hidden;
}
.edt-article-hero-media::after {
content: "";
position: absolute;
inset: 0;
border-right: 1px solid rgba(255,255,255,.2);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.18));
pointer-events: none;
}
.edt-article-hero-media img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none;
object-fit: cover;
object-position: center;
filter: saturate(.92) contrast(1.02);
}
.edt-article-photo-mark {
position: absolute;
z-index: 2;
top: clamp(26px, 3vw, 54px);
left: clamp(24px, 3vw, 52px);
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: clamp(20px, 2.5vw, 40px);
font-weight: 900;
font-style: italic;
letter-spacing: -.08em;
line-height: .72;
color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,.25);
transform: skew(-7deg);
}
.edt-article-hero-panel {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: inherit;
padding: clamp(32px, 4vw, 68px) clamp(28px, 5vw, 84px);
background: var(--edt-ink);
color: #fff;
box-sizing: border-box;
}
.edt-article-issue {
display: grid;
grid-template-columns: auto minmax(20px, 1fr) auto;
gap: 16px;
align-items: center;
width: 100%;
margin-bottom: clamp(60px, 10vh, 140px);
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
line-height: 1;
color: rgba(255,255,255,.72);
}
.edt-article-issue i {
display: block;
height: 1px;
background: currentColor;
opacity: .5;
}
.edt-article-hero-copy {
margin: auto 0;
}
.edt-article-hero-panel .category {
display: inline-flex;
align-items: center;
width: auto;
margin: 0 0 clamp(22px, 3vh, 36px);
padding: 9px 13px 8px;
border: 1px solid var(--edt-acid);
border-radius: 999px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
line-height: 1;
color: var(--edt-acid);
}
.edt-article-hero-panel h1 {
max-width: 800px;
margin: 0;
padding: 0;
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(46px, 5.05vw, 86px);
font-weight: 900;
letter-spacing: -.065em;
line-height: 1.08;
color: #fff;
word-break: keep-all;
text-wrap: balance;
}
.edt-article-deck {
display: -webkit-box;
max-width: 700px;
margin: clamp(28px, 4vh, 48px) 0 0;
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(14px, 1.25vw, 19px);
font-weight: 450;
letter-spacing: -.015em;
line-height: 1.75;
color: rgba(255,255,255,.72);
word-break: keep-all;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.edt-article-hero-panel .post-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 24px;
width: 100%;
margin: clamp(56px, 9vh, 120px) 0 0;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.32);
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.4;
color: rgba(255,255,255,.8);
text-transform: uppercase;
}
.edt-article-hero-panel .post-meta .date {
margin-left: auto;
}
.edt-article-hero-panel .post-meta a {
color: var(--edt-acid);
}
/* Reading column */
.edt-article-reading {
width: 100%;
margin: 0;
padding: clamp(78px, 10vw, 150px) 24px clamp(80px, 10vw, 150px);
background: var(--edt-paper);
box-sizing: border-box;
}
body#tt-body-page .edt-article-reading .entry-content {
width: min(100%, 820px) !important;
max-width: 820px !important;
margin: 0 auto !important;
padding: 0 !important;
font-family: "Noto Sans KR", sans-serif;
font-size: 18px !important;
font-weight: 400;
letter-spacing: -.012em;
line-height: 1.95 !important;
color: #23231f;
word-break: keep-all;
overflow-wrap: break-word;
}
body#tt-body-page .entry-content > p {
margin: 0 0 30px !important;
padding: 0;
font-family: inherit !important;
font-size: 18px !important;
line-height: 1.95 !important;
color: inherit !important;
word-break: keep-all;
}
body#tt-body-page .entry-content > p:first-child {
margin-bottom: clamp(64px, 8vw, 104px) !important;
font-family: "Noto Serif KR", "Noto Sans KR", serif !important;
font-size: clamp(23px, 2vw, 30px) !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
line-height: 1.65 !important;
color: var(--edt-ink) !important;
}
body#tt-body-page .entry-content h2,
body#tt-body-page .entry-content h3,
body#tt-body-page .entry-content h4 {
position: relative;
margin: clamp(86px, 11vw, 150px) 0 34px !important;
padding: 22px 0 0;
border-top: 1px solid var(--edt-ink);
font-family: "Noto Sans KR", sans-serif !important;
font-size: clamp(30px, 3.2vw, 48px) !important;
font-weight: 900 !important;
letter-spacing: -.055em !important;
line-height: 1.22 !important;
color: var(--edt-ink) !important;
word-break: keep-all;
}
body#tt-body-page .entry-content h2::before,
body#tt-body-page .entry-content h3::before,
body#tt-body-page .entry-content h4::before {
content: "SECTION ↘";
display: block;
margin-bottom: 18px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .18em;
line-height: 1;
color: var(--edt-red);
}
body#tt-body-page .entry-content figure {
width: 100%;
max-width: 100%;
margin: clamp(44px, 7vw, 80px) auto !important;
padding: 0;
}
body#tt-body-page .entry-content figure img,
body#tt-body-page .entry-content .imageblock img {
display: block;
max-width: 100% !important;
height: auto !important;
margin: 0 auto;
}
body#tt-body-page .entry-content .imageblock {
max-width: 100% !important;
}
body#tt-body-page .entry-content figure.imagegridblock {
display: grid;
gap: 10px;
}
body#tt-body-page .entry-content figcaption {
margin: 13px auto 0 !important;
font-family: "Noto Sans KR", sans-serif !important;
font-size: 11px !important;
letter-spacing: -.01em;
line-height: 1.6 !important;
color: rgba(15,15,13,.55) !important;
text-align: center;
}
body#tt-body-page .entry-content blockquote {
margin: 64px 0 !important;
padding: 30px 32px !important;
border: 0 !important;
border-left: 6px solid var(--edt-red) !important;
background: var(--edt-acid) !important;
font-family: "Noto Serif KR", serif !important;
font-size: clamp(21px, 2vw, 28px) !important;
font-weight: 700;
line-height: 1.65 !important;
color: var(--edt-ink) !important;
}
body#tt-body-page .entry-content ul,
body#tt-body-page .entry-content ol {
margin: 30px 0 42px !important;
padding-left: 1.4em !important;
}
body#tt-body-page .entry-content li {
margin: 10px 0;
font-size: 17px !important;
line-height: 1.85 !important;
}
body#tt-body-page .entry-content table {
display: table;
width: 100% !important;
margin: 48px 0 !important;
border-collapse: collapse;
font-size: 14px !important;
line-height: 1.6;
}
body#tt-body-page .entry-content th,
body#tt-body-page .entry-content td {
padding: 14px 12px !important;
border: 1px solid var(--edt-ink) !important;
background: transparent !important;
color: var(--edt-ink) !important;
}
body#tt-body-page .entry-content a {
color: inherit;
text-decoration-color: var(--edt-red);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
/* Tags, related stories and comments */
body#tt-body-page .tags,
body#tt-body-page .related-articles,
body#tt-body-page .comments {
width: min(calc(100% - 48px), 1080px) !important;
max-width: 1080px !important;
margin-right: auto !important;
margin-left: auto !important;
box-sizing: border-box;
}
body#tt-body-page .tags {
margin-top: 0 !important;
padding: 48px 0 !important;
border-top: 1px solid var(--edt-ink);
border-bottom: 1px solid var(--edt-ink);
}
body#tt-body-page .tags h2 {
margin: 0 0 22px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
body#tt-body-page .tags a {
display: inline-flex;
margin: 5px 8px 5px 0;
padding: 9px 13px 8px;
border: 1px solid var(--edt-ink);
border-radius: 999px;
font-size: 11px;
color: var(--edt-ink);
}
body#tt-body-page .related-articles {
margin-top: clamp(70px, 9vw, 130px) !important;
margin-bottom: clamp(70px, 9vw, 130px) !important;
padding: 0 !important;
}
body#tt-body-page .related-articles > h2 {
margin: 0 0 32px !important;
padding: 0 0 22px;
border-bottom: 1px solid var(--edt-ink);
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(30px, 4vw, 54px);
font-weight: 900;
letter-spacing: -.055em;
line-height: 1.1;
color: var(--edt-ink);
}
body#tt-body-page .related-articles > h2 strong {
display: block;
margin-bottom: 12px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .14em;
color: var(--edt-red);
text-transform: uppercase;
}
body#tt-body-page .related-articles ul {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid var(--edt-ink);
border-left: 1px solid var(--edt-ink);
list-style: none;
}
body#tt-body-page .related-articles li {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border-right: 1px solid var(--edt-ink);
border-bottom: 1px solid var(--edt-ink);
}
body#tt-body-page .related-articles li a {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px;
color: var(--edt-ink);
box-sizing: border-box;
}
body#tt-body-page .related-articles .thum {
display: block;
width: 100% !important;
height: auto !important;
margin: 0 0 18px;
aspect-ratio: 4 / 3;
background: var(--edt-paper-deep);
overflow: hidden;
}
body#tt-body-page .related-articles .thum img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: transform .5s ease;
}
body#tt-body-page .related-articles li a:hover .thum img {
transform: scale(1.04);
}
body#tt-body-page .related-articles .title {
display: -webkit-box;
height: auto !important;
margin: 0;
font-family: "Noto Sans KR", sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.45;
color: var(--edt-ink);
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
body#tt-body-page .comments {
margin-top: 0 !important;
margin-bottom: clamp(70px, 10vw, 140px) !important;
padding: clamp(28px, 5vw, 60px) !important;
border: 1px solid var(--edt-ink);
background: var(--edt-paper-deep);
}
body#tt-body-page .comments input,
body#tt-body-page .comments textarea {
border-color: var(--edt-ink) !important;
border-radius: 0 !important;
background: var(--edt-paper) !important;
}
body#tt-body-page .comments .btn {
border-radius: 0 !important;
background: var(--edt-ink) !important;
color: var(--edt-acid) !important;
}
@media screen and (max-width: 960px) {
.edt-article-hero {
grid-template-columns: 1fr;
min-height: 0;
}
.edt-article-hero-media {
height: min(68svh, 760px);
min-height: 480px;
}
.edt-article-hero-media::after {
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,.2);
}
.edt-article-hero-panel {
min-height: min(620px, 64svh);
padding: 34px clamp(24px, 7vw, 72px) 42px;
}
.edt-article-issue {
margin-bottom: 70px;
}
.edt-article-hero-panel h1 {
max-width: 760px;
font-size: clamp(46px, 8vw, 74px);
}
.edt-article-hero-panel .post-meta {
margin-top: 80px;
}
body#tt-body-page .related-articles ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 700px) {
.edt-article-hero-media {
height: 52svh;
min-height: 360px;
}
.edt-article-photo-mark {
top: 22px;
left: 20px;
font-size: 23px;
}
.edt-article-hero-panel {
min-height: 55svh;
padding: 26px 20px 30px;
}
.edt-article-issue {
gap: 9px;
margin-bottom: 56px;
font-size: 8px;
letter-spacing: .1em;
}
.edt-article-hero-panel .category {
margin-bottom: 20px;
font-size: 9px;
}
.edt-article-hero-panel h1 {
font-size: clamp(38px, 11.5vw, 54px);
line-height: 1.12;
}
.edt-article-deck {
margin-top: 24px;
font-size: 14px;
line-height: 1.7;
-webkit-line-clamp: 3;
}
.edt-article-hero-panel .post-meta {
margin-top: 56px;
padding-top: 16px;
font-size: 8px;
}
.edt-article-reading {
padding: 72px 20px 86px;
}
body#tt-body-page .edt-article-reading .entry-content,
body#tt-body-page .entry-content > p {
font-size: 16px !important;
line-height: 1.9 !important;
}
body#tt-body-page .entry-content > p {
margin-bottom: 24px !important;
}
body#tt-body-page .entry-content > p:first-child {
margin-bottom: 64px !important;
font-size: 22px !important;
line-height: 1.65 !important;
}
body#tt-body-page .entry-content h2,
body#tt-body-page .entry-content h3,
body#tt-body-page .entry-content h4 {
margin-top: 78px !important;
margin-bottom: 26px !important;
font-size: 31px !important;
line-height: 1.25 !important;
}
body#tt-body-page .entry-content figure {
margin: 42px auto !important;
}
body#tt-body-page .entry-content blockquote {
margin: 48px 0 !important;
padding: 24px 20px !important;
font-size: 21px !important;
}
body#tt-body-page .entry-content table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
body#tt-body-page .tags,
body#tt-body-page .related-articles,
body#tt-body-page .comments {
width: calc(100% - 36px) !important;
}
body#tt-body-page .related-articles ul {
grid-template-columns: 1fr;
}
body#tt-body-page .related-articles li a {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 14px;
}
body#tt-body-page .related-articles .thum {
margin: 0;
}
body#tt-body-page .related-articles .title {
font-size: 15px;
}
body#tt-body-page .comments {
padding: 24px 18px !important;
}
}
/* =========================================================
ERR DAY ARTICLE SCROLL REVEAL — progressive enhancement
========================================================= */
body#tt-body-page .edt-article-layout {
position: relative;
isolation: isolate;
}
body#tt-body-page .edt-article-reading {
position: relative;
z-index: 3;
border-top: 1px solid var(--edt-ink);
box-shadow: 0 -28px 70px rgba(0,0,0,.13);
}
body#tt-body-page .edt-article-reading::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: min(230px, 22vw);
height: 5px;
background: var(--edt-red);
}
@media screen and (min-width: 961px) {
body#tt-body-page .edt-article-hero {
position: sticky;
z-index: 1;
top: 82px;
height: calc(100svh - 82px);
min-height: 620px;
overflow: hidden;
}
body#tt-body-page .edt-article-hero-media,
body#tt-body-page .edt-article-hero-panel {
height: 100%;
min-height: 0;
}
body#tt-body-page .edt-article-hero-panel {
isolation: isolate;
}
body#tt-body-page .edt-article-hero-panel::after {
content: "";
position: absolute;
z-index: 0;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
}
body#tt-body-page .edt-article-issue,
body#tt-body-page .edt-article-hero-copy,
body#tt-body-page .edt-article-hero-panel .post-meta {
position: relative;
z-index: 1;
will-change: opacity, transform;
}
body#tt-body-page .edt-article-hero-media img {
will-change: transform, filter;
}
@supports (animation-timeline: scroll(root block)) {
body#tt-body-page .edt-article-hero-media img {
animation-name: edt-article-image-drift;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0 78vh;
}
body#tt-body-page .edt-article-hero-panel::after {
animation-name: edt-article-panel-shade;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0 78vh;
}
body#tt-body-page .edt-article-issue,
body#tt-body-page .edt-article-hero-copy,
body#tt-body-page .edt-article-hero-panel .post-meta {
animation-name: edt-article-copy-fade;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 8vh 72vh;
}
}
}
@keyframes edt-article-image-drift {
from {
transform: scale(1.002);
filter: saturate(.92) contrast(1.02) brightness(1);
}
to {
transform: scale(1.11);
filter: saturate(.72) contrast(1.05) brightness(.42);
}
}
@keyframes edt-article-panel-shade {
from { opacity: 0; }
to { opacity: .7; }
}
@keyframes edt-article-copy-fade {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: .16;
transform: translateY(-18px);
}
}
@media screen and (max-width: 960px) {
body#tt-body-page .edt-article-hero {
position: relative;
z-index: 1;
}
body#tt-body-page .edt-article-hero-media {
position: sticky;
z-index: 0;
top: 64px;
}
body#tt-body-page .edt-article-hero-panel {
position: relative;
z-index: 2;
box-shadow: 0 -24px 60px rgba(0,0,0,.22);
}
body#tt-body-page .edt-article-reading {
z-index: 3;
box-shadow: 0 -20px 54px rgba(0,0,0,.12);
}
}
@media (prefers-reduced-motion: reduce) {
body#tt-body-page .edt-article-hero-media img,
body#tt-body-page .edt-article-hero-panel::after,
body#tt-body-page .edt-article-issue,
body#tt-body-page .edt-article-hero-copy,
body#tt-body-page .edt-article-hero-panel .post-meta {
animation: none !important;
transform: none !important;
}
}
/* Scroll reveal spacing polish */
@media screen and (min-width: 961px) {
body#tt-body-page .edt-article-hero {
top: 0;
}
body#tt-body-page .edt-article-reading {
padding-top: clamp(64px, 7vw, 96px);
}
}
/* Mobile sticky media alignment */
@media screen and (max-width: 960px) {
body#tt-body-page .edt-article-hero-media {
top: 0;
}
}
/* GUIDE INDEX — article 168 */
body.edt-guide-page{--guide-ink:#111;--guide-paper:#f4f1ea;--guide-acid:#d9ff43;--guide-line:#c9c4ba;background:#fff}
body.edt-guide-page .edt-article-hero{position:relative!important;top:auto!important;min-height:68vh!important;height:auto!important;animation:none!important}
body.edt-guide-page .edt-article-hero:after{display:none!important}
body.edt-guide-page .edt-article-hero .edt-article-photo img{animation:none!important;transform:none!important;filter:none!important}
body.edt-guide-page .edt-article-hero .edt-article-copy{animation:none!important;opacity:1!important;transform:none!important}
body.edt-guide-page .edt-article-hero h1{max-width:9.5em;font-size:clamp(3rem,6.2vw,7.2rem);line-height:.88;letter-spacing:-.075em}
body.edt-guide-page .edt-article-deck{max-width:31rem;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.7}
body.edt-guide-page .edt-article-reading{position:relative!important;margin-top:0!important;padding-top:0!important;background:#fff!important;z-index:2}
body.edt-guide-page .edt-article-layout{background:#fff}
body.edt-guide-page .entry-content{max-width:980px!important;margin:0 auto!important;padding:0 24px 100px!important}
body.edt-guide-page .tt_article_useless_p_margin>p.edt-guide-old-intro,
body.edt-guide-page .tt_article_useless_p_margin>figure.edt-guide-old-intro{display:none!important}
.edt-guide-index{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:100px 0 84px}
.edt-guide-index-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:end;padding-bottom:32px;border-bottom:2px solid var(--guide-ink)}
.edt-guide-eyebrow{margin:0 0 14px;font:700 12px/1.1 Arial,sans-serif;letter-spacing:.18em}
.edt-guide-index h2{margin:0;font-size:clamp(2.6rem,5vw,5.8rem);line-height:.9;letter-spacing:-.065em}
.edt-guide-index-lead{margin:0;max-width:42rem;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.75;color:#444}
.edt-guide-index-lead b{color:#111}
.edt-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#111;border:1px solid #111;margin-top:32px}
.edt-guide-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;color:#111;text-decoration:none!important;overflow:hidden}
.edt-guide-card:nth-child(1),.edt-guide-card:nth-child(5){background:var(--guide-acid)}
.edt-guide-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#ddd}
.edt-guide-card-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease}
.edt-guide-card:hover .edt-guide-card-media img{transform:scale(1.04)}
.edt-guide-card-copy{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:22px 20px 24px;min-height:152px}
.edt-guide-card-no{font:800 13px/1 Arial,sans-serif;letter-spacing:.08em}
.edt-guide-card h3{margin:0 0 12px;font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.2;letter-spacing:-.045em;word-break:keep-all}
.edt-guide-card-tags{margin:0;font-size:12px;line-height:1.55;color:#555}
.edt-guide-card:nth-child(1) .edt-guide-card-tags,.edt-guide-card:nth-child(5) .edt-guide-card-tags{color:#2c3500}
.edt-guide-card-arrow{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#111;color:#fff;font-size:16px}
.edt-guide-place{position:relative;padding:110px 0 88px;border-top:1px solid var(--guide-line);scroll-margin-top:76px}
.edt-guide-place:first-of-type{border-top:0}
.edt-guide-place-head{display:grid;grid-template-columns:110px 1fr;gap:28px;align-items:start;margin:0 0 42px}
.edt-guide-place-no{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--guide-ink);color:#fff;font:800 22px/1 Arial,sans-serif;letter-spacing:.04em}
.edt-guide-place h2{margin:0!important;padding:0!important;border:0!important;font-size:clamp(2rem,4.2vw,4.4rem)!important;line-height:.96!important;letter-spacing:-.065em!important;word-break:keep-all}
.edt-guide-place h2:before{display:none!important}
.edt-guide-place h2 .edt-guide-jp{display:block;margin-top:13px;font-size:14px;line-height:1.3;letter-spacing:.02em;color:#777;font-weight:500}
.edt-guide-place-kicker{margin:9px 0 0!important;font:700 11px/1.2 Arial,sans-serif!important;letter-spacing:.16em;color:#666}
.edt-guide-place figure{margin:0 0 14px!important;border-radius:2px;overflow:hidden}
.edt-guide-place figure img{width:100%;height:auto;display:block}
.edt-guide-place>p:not(.edt-guide-place-kicker){max-width:760px;margin:36px auto 0!important;font-size:clamp(1.02rem,1.25vw,1.14rem)!important;line-height:1.95!important;color:#2b2b2b}
.edt-guide-place>p:empty{display:none!important}
.edt-guide-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;max-width:760px;margin:38px auto 0}
.edt-guide-action{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 18px;background:#fff;border:1px solid #111;color:#111!important;text-decoration:none!important;font:700 13px/1 Arial,sans-serif}
.edt-guide-action:first-child{background:#111;color:#fff!important}
.edt-guide-action span:last-child{font-size:17px}
.edt-guide-back{display:block;width:max-content;margin:42px auto 0;color:#555!important;text-decoration:none!important;font:700 11px/1 Arial,sans-serif;letter-spacing:.12em;border-bottom:1px solid #777;padding-bottom:6px}
.edt-guide-mobile-jump{display:none}
@media(max-width:900px){
body.edt-guide-page .edt-article-hero{min-height:auto!important}
body.edt-guide-page .edt-article-hero h1{font-size:clamp(2.8rem,12vw,5rem)}
.edt-guide-index{width:calc(100% - 32px);padding:68px 0 56px}
.edt-guide-index-head{grid-template-columns:1fr;gap:28px}
.edt-guide-grid{grid-template-columns:repeat(2,1fr)}
.edt-guide-card-copy{grid-template-columns:36px 1fr;min-height:145px;padding:18px 14px 20px}
.edt-guide-place{padding:80px 0 62px}
.edt-guide-place-head{grid-template-columns:72px 1fr;gap:16px;margin-bottom:28px}
.edt-guide-place-no{width:60px;height:60px;font-size:16px}
.edt-guide-actions{grid-template-columns:1fr}
}
@media(max-width:600px){
body.edt-guide-page .entry-content{padding-left:18px!important;padding-right:18px!important}
.edt-guide-index{width:calc(100% - 24px);padding-top:54px}
.edt-guide-index h2{font-size:clamp(2.55rem,14vw,4.5rem)}
.edt-guide-grid{grid-template-columns:1fr}
.edt-guide-card{display:grid;grid-template-columns:42% 58%;min-height:138px}
.edt-guide-card-media{aspect-ratio:auto;height:100%}
.edt-guide-card-copy{grid-template-columns:32px 1fr;min-height:0;padding:18px 12px}
.edt-guide-card h3{font-size:1rem;margin-bottom:9px}
.edt-guide-card-arrow{display:none}
.edt-guide-place{scroll-margin-top:58px}
.edt-guide-place h2{font-size:clamp(2rem,9vw,3.2rem)!important}
.edt-guide-place h2 .edt-guide-jp{font-size:12px}
.edt-guide-mobile-jump{position:fixed;left:50%;bottom:14px;z-index:99;display:flex;align-items:center;gap:10px;transform:translateX(-50%);padding:13px 20px;border-radius:999px;background:#111;color:#fff!important;text-decoration:none!important;box-shadow:0 8px 28px rgba(0,0,0,.25);font:700 12px/1 Arial,sans-serif;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){.edt-guide-card-media img{transition:none}}
/* GUIDE INDEX — Tistory content spacing override */
body.edt-guide-page .edt-article-reading .entry-content .edt-guide-place .edt-guide-place-head h2{
margin:0!important;
padding:0!important;
}
body.edt-guide-page .edt-article-reading .entry-content .edt-guide-place .edt-guide-place-kicker{
margin:9px 0 0!important;
padding:0!important;
}
body.edt-guide-page .edt-article-reading .entry-content .edt-guide-place>figure{
margin:0 0 14px!important;
}
body.edt-guide-page .edt-article-reading .entry-content .edt-guide-place>p:empty{
display:none!important;
margin:0!important;
}
/* GUIDE INDEX — article detail ID priority */
body#tt-body-page.edt-guide-page .entry-content .edt-guide-place .edt-guide-place-head h2{
margin:0!important;
padding:0!important;
border-top:0!important;
}
body#tt-body-page.edt-guide-page .entry-content .edt-guide-place>figure{
margin:0 0 14px!important;
}
/*EDT_DARK_V9_RESTORE_WARM*/
html body#tt-body-page#tt-body-page#tt-body-page #wrap#wrap#wrap section.container article#content#content#content>.inner>.related-articles.related-articles ul,
html body#tt-body-page#tt-body-page#tt-body-page #wrap#wrap#wrap section.container article#content#content#content>.inner>.related-articles.related-articles li>a{background-color:#171714!important}
html body#tt-body-page#tt-body-page#tt-body-page #wrap#wrap#wrap section.container article#content#content#content>.inner>.related-articles.related-articles:after{background:#171714!important}
html body #wrap#wrap#wrap>footer#footer#footer#footer,
html body #wrap#wrap#wrap>footer#footer#footer#footer:before{background:#171714!important}
/*EDT_DARK_V10_BODY_GUTTERS*/
html body#tt-body-page#tt-body-page#tt-body-page{background-color:#171714!important}
html body#tt-body-page#tt-body-page#tt-body-page #wrap#wrap#wrap section.container article#content#content#content>.inner>.edt-article-layout.edt-article-layout,
html body#tt-body-page#tt-body-page#tt-body-page #wrap#wrap#wrap section.container article#content#content#content>.inner>.edt-article-layout.edt-article-layout .edt-article-reading.edt-article-reading{background-color:#fff!important}
/* EDT_MOBILE_NAV_FIX_20260815 */
@media screen and (max-width: 760px) {
html body #wrap #header.edt-site-header .edt-header-inner {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html body #wrap #header.edt-site-header .mobile-menu,
html body #wrap #header.edt-site-header .mobile-menu.on {
display: block !important;
position: relative !important;
top: auto !important;
right: auto !important;
flex: 0 0 48px !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
background: transparent !important;
text-indent: -9999px !important;
cursor: pointer !important;
z-index: 620 !important;
touch-action: manipulation !important;
}
html body #wrap #header.edt-site-header .mobile-menu span,
html body #wrap #header.edt-site-header .mobile-menu:before,
html body #wrap #header.edt-site-header .mobile-menu:after {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 22px !important;
height: 2px !important;
margin: 0 0 0 -11px !important;
background: #f4efe5 !important;
transform-origin: center !important;
}
html body #wrap #header.edt-site-header .mobile-menu span {
margin-top: -1px !important;
}
html body #wrap #header.edt-site-header .mobile-menu:before {
content: "" !important;
margin-top: -8px !important;
}
html body #wrap #header.edt-site-header .mobile-menu:after {
content: "" !important;
margin-top: 6px !important;
}
html body #wrap #header.edt-site-header .mobile-menu.on span {
display: none !important;
}
html body #wrap #header.edt-site-header .mobile-menu.on:before {
margin-top: -1px !important;
transform: rotate(45deg) !important;
}
html body #wrap #header.edt-site-header .mobile-menu.on:after {
margin-top: -1px !important;
transform: rotate(-45deg) !important;
}
html body #wrap #header.edt-site-header #gnb {
display: none !important;
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
max-height: calc(100dvh - 64px) !important;
padding: 14px 20px 24px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
box-sizing: border-box !important;
background: #171714 !important;
border-top: 1px solid rgba(255,255,255,.18) !important;
box-shadow: 0 18px 36px rgba(0,0,0,.34) !important;
}
html body #wrap #header.edt-site-header #gnb.on,
html body #wrap #header.edt-site-header.on #gnb,
html body.mobile-menu-on #wrap #header.edt-site-header #gnb,
html body.nav-on #wrap #header.edt-site-header #gnb {
display: block !important;
}
html body #wrap #header.edt-site-header #gnb > ul:first-child:empty {
display: none !important;
}
html body #wrap #header.edt-site-header #gnb > ul.tt_category,
html body #wrap #header.edt-site-header #gnb .tt_category > li,
html body #wrap #header.edt-site-header #gnb .category_list {
display: block !important;
position: static !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
html body #wrap #header.edt-site-header #gnb .tt_category > li > .link_tit {
display: none !important;
}
html body #wrap #header.edt-site-header #gnb .category_list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 18px !important;
}
html body #wrap #header.edt-site-header #gnb .category_list > li {
display: block !important;
float: none !important;
min-width: 0 !important;
padding: 0 !important;
border-top: 1px solid rgba(255,255,255,.18) !important;
}
html body #wrap #header.edt-site-header #gnb .category_list > li > a.link_item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 54px !important;
padding: 15px 2px 12px !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -.02em !important;
white-space: normal !important;
}
html body #wrap #header.edt-site-header #gnb .category_list > li > a.link_item .c_cnt {
margin-left: 8px !important;
color: rgba(255,255,255,.58) !important;
font-size: 12px !important;
font-weight: 500 !important;
}
html body #wrap #header.edt-site-header #gnb .sub_category_list {
display: none !important;
}
}
@media screen and (max-width: 360px) {
html body #wrap #header.edt-site-header #gnb .category_list {
grid-template-columns: 1fr !important;
}
}
/* EVERYDAY TRIP — home editorial tone swap v28 */
body#tt-body-index .edt-editorial {
background: var(--edt-ink);
border-color: rgba(241,238,230,.22);
color: var(--edt-paper);
}
body#tt-body-index .edt-editorial .edt-section-heading > div p,
body#tt-body-index .edt-editorial .edt-section-heading > a b {
color: var(--edt-red);
}
body#tt-body-index .edt-editorial .edt-section-heading > a,
body#tt-body-index .edt-editorial .edt-editorial-copy h3 a {
color: var(--edt-paper);
}
body#tt-body-index .edt-editorial .edt-editorial-copy p {
color: rgba(241,238,230,.68);
}
body#tt-body-index .edt-editorial .edt-editorial-image {
background: #2a2a26;
}
body#tt-body-index .edt-notes {
background: var(--edt-paper);
border-color: rgba(23,23,19,.22);
color: var(--edt-ink);
}
body#tt-body-index .edt-notes .edt-section-heading-dark > div p,
body#tt-body-index .edt-notes .edt-section-heading-dark > a b,
body#tt-body-index .edt-notes .edt-note-index,
body#tt-body-index .edt-notes .edt-note-arrow {
color: var(--edt-red);
}
body#tt-body-index .edt-notes .edt-section-heading > a,
body#tt-body-index .edt-notes .edt-note-grid a {
color: var(--edt-ink);
}
body#tt-body-index .edt-notes .edt-note-grid {
border-top-color: rgba(23,23,19,.24);
border-left-color: rgba(23,23,19,.24);
}
body#tt-body-index .edt-notes .edt-note-grid li {
border-right-color: rgba(23,23,19,.24);
border-bottom-color: rgba(23,23,19,.24);
}
body#tt-body-index .edt-notes .edt-note-thumb {
background: var(--edt-paper-deep);
}
/* =========================================================
EVERYDAY TRIP · JAPAN NEWS MAGAZINE SYSTEM v1
Scope: posts in the 일본여행뉴스 category only
========================================================= */
body.edt-japan-news-post {
--news-ink: #11110f;
--news-paper: #f4f1e9;
--news-white: #fff;
--news-red: #ff563d;
--news-acid: #dfff45;
--news-blue: #173b73;
--news-muted: #68727a;
--news-line: #c9c4b8;
}
/* The first image remains the representative image but the article hero already shows it. */
body.edt-japan-news-post .entry-content .tt_article_useless_p_margin > figure:first-child {
display: none !important;
}
body.edt-japan-news-post .edt-article-reading {
background:
linear-gradient(90deg, rgba(17,17,15,.035) 1px, transparent 1px) 0 0 / 96px 96px,
var(--news-paper) !important;
}
body.edt-japan-news-post .entry-content {
color: var(--news-ink) !important;
}
body.edt-japan-news-post .entry-content .edt-news-lead {
margin: 0 0 clamp(54px, 8vw, 96px) !important;
padding: 4px 0 4px clamp(22px, 3vw, 38px) !important;
border-left: 8px solid var(--news-red);
font-family: "Noto Serif KR", "Noto Sans KR", serif !important;
font-size: clamp(23px, 2.4vw, 34px) !important;
font-weight: 700 !important;
letter-spacing: -.045em !important;
line-height: 1.62 !important;
color: var(--news-ink) !important;
word-break: keep-all;
}
body.edt-japan-news-post .entry-content .edt-news-kicker {
margin: 0 0 14px !important;
font-family: "Montserrat", "Noto Sans KR", sans-serif !important;
font-size: 10px !important;
font-weight: 900 !important;
letter-spacing: .17em !important;
line-height: 1.2 !important;
color: var(--news-red) !important;
text-transform: uppercase;
}
body.edt-japan-news-post .entry-content .edt-news-summary {
position: relative;
margin: 0 0 clamp(70px, 9vw, 118px);
padding: clamp(30px, 5vw, 54px);
border: 1px solid var(--news-ink);
background: var(--news-ink);
color: var(--news-white);
overflow: hidden;
}
body.edt-japan-news-post .entry-content .edt-news-summary::after {
content: "↗";
position: absolute;
right: -8px;
bottom: -34px;
font-family: "Montserrat", sans-serif;
font-size: clamp(110px, 20vw, 210px);
font-weight: 900;
line-height: 1;
color: rgba(255,255,255,.055);
pointer-events: none;
}
body.edt-japan-news-post .entry-content .edt-news-summary .edt-news-kicker {
color: var(--news-acid) !important;
}
body.edt-japan-news-post .entry-content .edt-news-summary strong {
position: relative;
z-index: 1;
display: block;
max-width: 700px;
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(30px, 4.6vw, 58px);
font-weight: 900;
letter-spacing: -.065em;
line-height: 1.14;
color: var(--news-white);
word-break: keep-all;
}
body.edt-japan-news-post .entry-content .edt-news-summary p:last-child {
position: relative;
z-index: 1;
max-width: 650px;
margin: 22px 0 0 !important;
font-size: 16px !important;
line-height: 1.8 !important;
color: rgba(255,255,255,.72) !important;
}
body.edt-japan-news-post .entry-content .edt-news-metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: 40px 0 56px;
border: 1px solid var(--news-ink);
}
body.edt-japan-news-post .entry-content .edt-news-metric {
min-width: 0;
padding: clamp(25px, 4vw, 42px);
background: var(--news-white);
}
body.edt-japan-news-post .entry-content .edt-news-metric + .edt-news-metric {
border-left: 1px solid var(--news-ink);
}
body.edt-japan-news-post .entry-content .edt-news-metric--accent {
background: var(--news-acid);
}
body.edt-japan-news-post .entry-content .edt-news-metric-label {
display: block;
margin-bottom: 20px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
font-weight: 900;
letter-spacing: .12em;
color: var(--news-muted);
}
body.edt-japan-news-post .entry-content .edt-news-metric-value {
display: block;
font-family: "Noto Sans KR", sans-serif;
font-size: clamp(34px, 5.2vw, 62px);
font-weight: 900;
letter-spacing: -.075em;
line-height: 1;
color: var(--news-ink);
white-space: nowrap;
}
body.edt-japan-news-post .entry-content .edt-news-metric-note {
display: block;
margin-top: 18px;
font-size: 13px;
line-height: 1.6;
color: var(--news-muted);
}
body.edt-japan-news-post .entry-content .edt-news-delta {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
margin: -1px 0 64px;
padding: 22px 26px;
border: 1px solid var(--news-ink);
background: var(--news-red);
color: #fff;
}
body.edt-japan-news-post .entry-content .edt-news-delta b {
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: clamp(24px, 4vw, 42px);
letter-spacing: -.045em;
}
body.edt-japan-news-post .entry-content .edt-news-delta span {
font-size: 14px;
line-height: 1.6;
}
body.edt-japan-news-post .entry-content .edt-news-fact-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 34px 0 54px;
}
body.edt-japan-news-post .entry-content .edt-news-fact {
min-height: 170px;
padding: 24px;
border: 1px solid var(--news-ink);
background: rgba(255,255,255,.84);
}
body.edt-japan-news-post .entry-content .edt-news-fact em {
display: block;
margin-bottom: 26px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 9px;
font-weight: 900;
font-style: normal;
letter-spacing: .14em;
color: var(--news-red);
}
body.edt-japan-news-post .entry-content .edt-news-fact strong {
display: block;
font-size: 19px;
letter-spacing: -.035em;
line-height: 1.45;
word-break: keep-all;
}
body.edt-japan-news-post .entry-content .edt-news-fact p {
margin: 12px 0 0 !important;
font-size: 13px !important;
line-height: 1.65 !important;
color: var(--news-muted) !important;
}
body.edt-japan-news-post .entry-content .edt-news-alert {
margin: 46px 0;
padding: clamp(25px, 4vw, 40px);
border: 1px solid var(--news-ink);
border-left: 12px solid var(--news-red);
background: #fff7f2;
}
body.edt-japan-news-post .entry-content .edt-news-alert--acid {
border-left-color: var(--news-ink);
background: var(--news-acid);
}
body.edt-japan-news-post .entry-content .edt-news-alert strong {
display: block;
margin-bottom: 12px;
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 900;
letter-spacing: -.045em;
line-height: 1.35;
}
body.edt-japan-news-post .entry-content .edt-news-alert p {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.8 !important;
color: #303530 !important;
}
body.edt-japan-news-post .entry-content .edt-news-timeline {
counter-reset: news-step;
margin: 34px 0 58px;
border-top: 1px solid var(--news-ink);
}
body.edt-japan-news-post .entry-content .edt-news-step {
counter-increment: news-step;
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 18px;
padding: 25px 0;
border-bottom: 1px solid var(--news-line);
}
body.edt-japan-news-post .entry-content .edt-news-step::before {
content: "0" counter(news-step);
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
color: var(--news-red);
}
body.edt-japan-news-post .entry-content .edt-news-step strong {
display: block;
margin-bottom: 6px;
font-size: 18px;
letter-spacing: -.03em;
}
body.edt-japan-news-post .entry-content .edt-news-step p {
margin: 0 !important;
font-size: 14px !important;
line-height: 1.75 !important;
color: var(--news-muted) !important;
}
body.edt-japan-news-post .entry-content .edt-news-checklist {
display: grid;
gap: 10px;
margin: 34px 0 58px !important;
padding: 0 !important;
list-style: none !important;
}
body.edt-japan-news-post .entry-content .edt-news-checklist li {
position: relative;
margin: 0 !important;
padding: 18px 20px 18px 58px;
border: 1px solid var(--news-ink);
background: rgba(255,255,255,.88);
font-size: 15px !important;
line-height: 1.65 !important;
}
body.edt-japan-news-post .entry-content .edt-news-checklist li::before {
content: "✓" !important;
position: absolute;
left: 20px;
top: 17px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--news-acid);
font-size: 13px;
font-weight: 900;
line-height: 24px;
color: var(--news-ink);
text-align: center;
}
body.edt-japan-news-post .entry-content .edt-news-cta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 46px 0 72px;
}
body.edt-japan-news-post .entry-content .edt-news-cta a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
padding: 18px 22px;
border: 1px solid var(--news-ink);
background: var(--news-white);
font-size: 14px;
font-weight: 800;
line-height: 1.45;
color: var(--news-ink);
text-decoration: none;
}
body.edt-japan-news-post .entry-content .edt-news-cta a:first-child {
background: var(--news-ink);
color: #fff;
}
body.edt-japan-news-post .entry-content .edt-news-sources {
margin: 54px 0 0;
padding: 28px;
border-top: 1px solid var(--news-ink);
border-bottom: 1px solid var(--news-ink);
background: rgba(255,255,255,.52);
}
body.edt-japan-news-post .entry-content .edt-news-sources strong {
display: block;
margin-bottom: 14px;
font-family: "Montserrat", "Noto Sans KR", sans-serif;
font-size: 10px;
letter-spacing: .15em;
color: var(--news-red);
}
body.edt-japan-news-post .entry-content .edt-news-sources ul {
margin: 0 !important;
padding-left: 18px !important;
}
body.edt-japan-news-post .entry-content .edt-news-sources li {
margin: 7px 0 !important;
font-size: 13px !important;
line-height: 1.7 !important;
}
@media screen and (max-width: 720px) {
body.edt-japan-news-post .edt-article-hero-media {
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1 / 1;
background: #11120f !important;
}
body.edt-japan-news-post .edt-article-hero-media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
body.edt-japan-news-post #floating-search-container {
right: 16px !important;
left: auto !important;
}
body.edt-japan-news-post .edt-article-reading {
padding-right: 18px !important;
padding-left: 18px !important;
background-size: 54px 54px !important;
}
body.edt-japan-news-post .entry-content .edt-news-lead {
padding-left: 18px !important;
border-left-width: 6px;
font-size: 22px !important;
line-height: 1.55 !important;
}
body.edt-japan-news-post .entry-content .edt-news-metric-grid,
body.edt-japan-news-post .entry-content .edt-news-fact-grid,
body.edt-japan-news-post .entry-content .edt-news-cta {
grid-template-columns: 1fr;
}
body.edt-japan-news-post .entry-content .edt-news-metric + .edt-news-metric {
border-top: 1px solid var(--news-ink);
border-left: 0;
}
body.edt-japan-news-post .entry-content .edt-news-metric-value {
white-space: normal;
}
body.edt-japan-news-post .entry-content .edt-news-delta {
grid-template-columns: 1fr;
}
body.edt-japan-news-post .entry-content .edt-news-fact {
min-height: 0;
}
body.edt-japan-news-post .entry-content .edt-news-step {
grid-template-columns: 46px minmax(0, 1fr);
}
}
/* =========================================================
EVERYDAY TRIP · DAILY JAPAN WEATHER MAGAZINE v1
The jwx-* classes stay in each article; this shared skin CSS preserves
layout after Tistory sanitizes inline styles during publication.
========================================================= */
body.edt-weather-article-page .entry-content .tt_article_useless_p_margin > figure:first-of-type {
display: none !important;
}
body.edt-weather-article-page .entry-content {
color: #17232b !important;
}
.jwx{--ink:#171715;--paper:#f4f0e7;--red:#f0523d;--blue:#1969aa;--line:#c9c2b5;color:var(--ink);font-family:Pretendard,"Noto Sans KR",Arial,sans-serif;line-height:1.55;background:var(--paper);padding:0 0 64px;overflow-x:hidden}.jwx *{box-sizing:border-box}.jwx-hero{position:relative;padding:64px 6vw 48px;border-top:8px solid var(--ink);border-bottom:1px solid var(--line);overflow:hidden}.jwx-hero:after{content:"WEATHER";position:absolute;right:-18px;bottom:-54px;font:900 clamp(72px,15vw,210px)/1 Arial;color:rgba(23,23,21,.045);letter-spacing:-.08em}.jwx-kicker,.jwx-section-title p{margin:0 0 14px;color:var(--red);font-size:12px;font-weight:800;letter-spacing:.17em}.jwx h1{position:relative;z-index:1;margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(54px,9vw,122px);line-height:.9;letter-spacing:-.065em}.jwx-date{margin:22px 0 0;font-size:18px;font-weight:800}.jwx-lead{max-width:790px;margin:20px 0 0;font-size:18px}.jwx-stamp{display:inline-block;margin-top:26px;padding:8px 12px;border:1px solid var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em}.jwx-section{padding:54px 6vw 0}.jwx-section-title{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:24px;align-items:start;border-top:2px solid var(--ink);padding-top:16px;margin-bottom:20px}.jwx-section-title h2{margin:0;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(30px,4.5vw,58px);line-height:1.07;letter-spacing:-.045em}.jwx-note{margin:0 0 22px;color:#69645c;font-size:13px}.jwx-quick-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.jwx-quick-card{min-height:200px;padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.jwx-quick-head{display:flex;align-items:center;gap:8px}.jwx-quick-head strong{font-size:18px}.jwx-rank{display:grid;place-items:center;width:25px;height:25px;background:var(--ink);color:white;border-radius:50%;font-size:11px}.jwx-icon{margin-left:auto;font-size:24px}.jwx-condition{margin:25px 0 4px;color:#655f56;font-size:13px}.jwx-temp{display:flex;align-items:baseline;justify-content:space-between;margin:0}.jwx-temp b{font:700 34px/1 Georgia,serif}.jwx-temp span{font-size:12px}.jwx-mini{display:flex;flex-direction:column;gap:5px;margin-top:20px;font-size:11px}.jwx-uv{display:inline-block;width:max-content;padding:2px 6px;border-radius:2px;font-size:.88em}.jwx-uv-low{background:#dfeadb;color:#285a23}.jwx-uv-moderate{background:#fff0a8;color:#6d5500}.jwx-uv-high{background:#ffd4a5;color:#8c3b00}.jwx-uv-very-high{background:#ffc0ae;color:#8c1900}.jwx-uv-extreme{background:#6f267a;color:#fff}.jwx-uv-none{background:#ddd;color:#444}.jwx-city-list{display:grid;gap:28px}.jwx-city{border:1px solid var(--line);background:#f8f5ee}.jwx-city-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}.jwx-city-head p{margin:0;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.14em}.jwx-city-head h3{margin:4px 0 2px;font-family:Georgia,"Noto Serif KR",serif;font-size:38px;letter-spacing:-.04em}.jwx-city-head div>span{font-size:11px;color:#777}.jwx-city-now{display:grid!important;grid-template-columns:auto auto;align-items:center;column-gap:12px;text-align:right}.jwx-city-now>span{grid-row:1/3;font-size:42px!important}.jwx-city-now b{font:700 42px/1 Georgia,serif}.jwx-city-now small{font-size:11px}.jwx-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.jwx-metrics>div{min-height:84px;padding:17px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.jwx-metrics>div:nth-child(4n){border-right:0}.jwx-metrics span{display:block;margin-bottom:6px;color:#716b62;font-size:11px}.jwx-metrics b{font-size:15px}.jwx-advice{display:grid;grid-template-columns:90px 1fr;gap:5px 16px;padding:20px 28px;background:#1b1b19;color:white}.jwx-advice b{grid-row:1/3;color:#ff6b55;font-size:12px;letter-spacing:.08em}.jwx-advice span{font-weight:700}.jwx-advice small{color:#c8c5bf}.jwx-forecast summary{cursor:pointer;padding:18px 28px;font-weight:800;list-style:none}.jwx-forecast summary::-webkit-details-marker{display:none}.jwx-forecast summary:after{content:"＋";float:right;color:var(--red)}.jwx-forecast[open] summary:after{content:"−"}.jwx-forecast summary span{margin-left:12px;color:#827c73;font-size:11px;font-weight:400}.jwx-table-wrap{overflow:auto;border-top:1px solid var(--line)}.jwx table{width:100%;min-width:820px;border-collapse:collapse;font-size:12px}.jwx th,.jwx td{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.jwx th{background:#e7e1d6;font-size:10px;letter-spacing:.06em}.jwx tr:nth-child(even) td{background:#f2eee6}.jwx-monthly{margin-top:30px;padding-top:54px;padding-bottom:54px;background:#1b1b19;color:white}.jwx-monthly .jwx-section-title{border-color:white}.jwx-explain{display:grid;grid-template-columns:1fr 2fr;gap:20px;margin-bottom:16px;padding:18px;border:1px solid #484641}.jwx-explain b{color:#ff6b55}.jwx-monthly .jwx-note{color:#aaa69f}.jwx-month-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#4a4843;border:1px solid #4a4843}.jwx-month-card{padding:24px;background:#222220}.jwx-month-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}.jwx-month-head h3{margin:0;font:700 26px/1 Georgia,"Noto Serif KR",serif}.jwx-month-head span{color:#8e8a83;font-size:10px}.jwx-prob{margin-top:16px}.jwx-prob>b{display:block;margin-bottom:5px;font-size:12px}.jwx-prob>div{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.jwx-prob i{position:relative;overflow:hidden;padding:6px 5px;background:#343431;font-size:10px;font-style:normal;white-space:nowrap}.jwx-prob i:after{content:"";position:absolute;left:0;bottom:0;width:calc(var(--p) * 1%);height:2px}.jwx-prob i.low:after{background:#4fa3e3}.jwx-prob i.normal:after{background:#c7c2b7}.jwx-prob i.high:after{background:#f45b44}.jwx-prob small{display:block;margin-top:5px;color:#aaa69f;font-size:10px}.jwx-weeks{display:flex;flex-direction:column;gap:3px;margin-top:18px;padding-top:12px;border-top:1px solid #45433f;font-size:10px;color:#aaa69f}.jwx-weeks b{color:white}.jwx-sources ul{padding-left:20px}.jwx-sources li{margin:10px 0}.jwx-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.jwx-links a{padding:10px 13px;border:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:800;text-decoration:none}.jwx-links a:hover{background:var(--ink);color:white}.jwx-fine{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);color:#777;font-size:10px}
.jwx-region-chip{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;background:#e7f3f8;color:#1f6f96;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.06em}.jwx-jnto-panel{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(320px,.95fr);overflow:hidden;border:1px solid #1a3342;border-radius:22px;background:#142a36;color:white;box-shadow:0 22px 60px rgba(29,85,112,.18)}.jwx-jnto-lead{padding:34px;background:linear-gradient(150deg,#17445b 0%,#1f7397 62%,#39a5c7 100%)}.jwx-jnto-lead>span{display:block;color:#fff1b8;font-size:11px;font-weight:900;letter-spacing:.13em}.jwx-jnto-lead>b{display:block;margin-top:18px;font:900 clamp(38px,7vw,96px)/.9 Georgia,serif;letter-spacing:-.07em;white-space:nowrap}.jwx-jnto-lead>b small{margin-left:6px;font:800 15px/1 Pretendard,sans-serif;letter-spacing:0}.jwx-jnto-lead>strong{display:inline-flex;margin-top:20px;padding:8px 11px;border-radius:999px;background:#ff654d;color:white;font-size:13px}.jwx-jnto-lead>p{margin:14px 0 0;color:#dceef5}.jwx-jnto-metrics{display:grid;grid-template-columns:1fr 1fr;background:#fff;color:#17232b}.jwx-jnto-metrics>span{display:flex;flex-direction:column;justify-content:center;padding:28px;border-left:1px solid #d6e6ed}.jwx-jnto-metrics b{display:block;margin-top:12px;font:800 clamp(26px,3.4vw,44px)/1 Georgia,serif;letter-spacing:-.04em}.jwx-jnto-metrics small{display:block;margin-top:10px;color:#e8553d;font-weight:800}.jwx-jnto-note{margin:18px 0 0;padding:18px 20px;border-left:5px solid #f2b744;background:#fff7db;color:#334650}.jwx-jnto-note b{color:#e8553d}.jwx-jnto-source{display:inline-block;margin-top:14px;color:#1c6e96;font-size:11px;font-weight:900;text-decoration:none}.jwx-advice{display:grid;grid-template-columns:minmax(120px,.35fr) minmax(260px,1.65fr);gap:12px 24px;padding:26px 28px;border-left:8px solid #ff654d;background:linear-gradient(135deg,#102c3b 0%,#174f69 62%,#247da0 100%);color:white}.jwx-advice>div{grid-row:1/4}.jwx-advice>div span{display:block;color:#75d3f1;font-size:9px;font-weight:900;letter-spacing:.18em}.jwx-advice>div b{display:block;margin-top:7px;color:#ffca55;font-size:18px;line-height:1.15}.jwx-advice>strong{font-size:clamp(20px,2.5vw,30px);line-height:1.3;letter-spacing:-.035em}.jwx-advice>p{margin:0;color:#e7f4f8;font-size:13px}.jwx-advice>p b{color:#ffca55}.jwx-advice>small{color:#b9d7e3}.jwx-sources{padding-bottom:20px}.jwx-expert{margin-top:34px;padding-top:54px;padding-bottom:54px;border-top:8px solid #ff654d;background:#fff4dd}.jwx-expert-head{max-width:860px}.jwx-expert-head>span{color:#e8553d;font-size:11px;font-weight:900;letter-spacing:.16em}.jwx-expert-head>h2{margin:10px 0 8px;font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(38px,6vw,76px);line-height:.96;letter-spacing:-.055em}.jwx-expert-head>p{margin:0;color:#5b5142}.jwx-expert-panel{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:1px solid #2f2b25;border-left:1px solid #2f2b25}.jwx-expert-panel>article{min-height:240px;padding:28px;border-right:1px solid #2f2b25;border-bottom:1px solid #2f2b25;background:#fffdf8}.jwx-expert-panel em{color:#e8553d;font-size:10px;font-style:normal;font-weight:900;letter-spacing:.15em}.jwx-expert-panel strong{display:block;margin-top:18px;font-size:24px;line-height:1.2;letter-spacing:-.035em}.jwx-expert-panel p{margin:16px 0 0;color:#4f4a42;font-size:14px;line-height:1.75}
@media(max-width:980px){.jwx-quick-grid{grid-template-columns:repeat(2,1fr)}.jwx-metrics{grid-template-columns:repeat(2,1fr)}.jwx-metrics>div:nth-child(2n){border-right:0}.jwx-metrics>div:nth-child(4n){border-right:0}.jwx-jnto-panel{grid-template-columns:1fr}}
@media(max-width:640px){.jwx{padding-bottom:40px}.jwx-hero{padding:42px 20px 34px}.jwx h1{font-size:46px;letter-spacing:-.08em;white-space:nowrap}.jwx-date,.jwx-lead{font-size:15px}.jwx-section{padding:40px 20px 0}.jwx-section-title{display:block}.jwx-section-title p{margin-bottom:8px}.jwx-quick-grid{grid-template-columns:1fr}.jwx-quick-card{min-height:155px}.jwx-city-head{padding:20px;align-items:flex-start}.jwx-city-head h3{font-size:30px}.jwx-city-now>span{font-size:32px!important}.jwx-city-now b{font-size:32px}.jwx-metrics{grid-template-columns:1fr 1fr}.jwx-metrics>div{min-height:92px;padding:14px}.jwx-advice{grid-template-columns:1fr;padding:22px 20px}.jwx-advice>div{grid-row:auto}.jwx-forecast summary{padding:16px 20px}.jwx-forecast summary span{display:block;margin:4px 0 0}.jwx-jnto-panel{border-radius:16px}.jwx-jnto-lead{padding:26px 22px}.jwx-jnto-metrics{grid-template-columns:1fr}.jwx-jnto-metrics>span{padding:22px;border-top:1px solid #d6e6ed;border-left:0}.jwx-links{flex-direction:column}.jwx-links a{text-align:center}.jwx-expert-panel{grid-template-columns:1fr}.jwx-expert-panel>article{min-height:0;padding:22px 20px}}
/* National overview was introduced after the original component stylesheet. */
.jwx-national {
display: grid;
grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.6fr);
gap: 1px;
margin-top: 30px;
border: 1px solid #a9cadb;
border-radius: 16px;
background: #a9cadb;
overflow: hidden;
}
.jwx-national-primary { padding: 24px; background: #fff; color: #17232b; }
.jwx-national-primary > span { display: block; margin-bottom: 7px; color: #e8553d; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.jwx-national-primary > b { display: block; font-size: clamp(28px, 5vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.jwx-national-primary > small { display: block; margin-top: 8px; color: #607480; font-size: 11px; }
.jwx-national-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #f1f9fc; color: #294454; }
.jwx-national-metrics > span { display: flex; flex-direction: column; justify-content: center; min-height: 88px; padding: 16px; border-right: 1px solid #d6e8ef; border-bottom: 1px solid #d6e8ef; font-size: 11px; }
.jwx-national-metrics > span:nth-child(2n) { border-right: 0; }
.jwx-national-metrics b { display: block; margin-top: 5px; color: #17232b; font-size: 18px; }
@media (max-width: 760px) {
.jwx-national { grid-template-columns: 1fr; }
.jwx-national-metrics { grid-template-columns: 1fr 1fr; }
}