:root{
  /* 1. Typography ================ */

  --typo-body:16px;

  --typo-display-1:36px;
  --typo-display-2:28px;
  --typo-display-3:26px;
  --typo-display-4:24px;
  --typo-display-5:22px;
  --typo-display-6:19px;

  --typo-pragraph-1:17px;
  --typo-pragraph-2:16px;
  --typo-pragraph-3:15px;
  --typo-pragraph-4:14px;
  --typo-pragraph-5:13px;
  --typo-pragraph-6:12px;


  /* 2. Colors ================ */
  --text-primary:#875A31;
  --text-secondary:#FFE28A;
  --text-danger:#D63637;
  --text-body:#333333;
  --text-gray-dark:#666666;
  --text-gray:#777777;
  --text-gray-light:#999999;
  --text-white:var(--white-100);

  /* White */
  --white-5:rgba(255, 255, 255, 0.05);
  --white-10:rgba(255, 255, 255, 0.1);
  --white-20:rgba(255, 255, 255, 0.2);
  --white-30:rgba(255, 255, 255, 0.3);
  --white-40:rgba(255, 255, 255, 0.4);
  --white-50:rgba(255, 255, 255, 0.5);
  --white-60:rgba(255, 255, 255, 0.6);
  --white-70:rgba(255, 255, 255, 0.7);
  --white-80:rgba(255, 255, 255, 0.8);
  --white-90:rgba(255, 255, 255, 0.9);
  --white-100:#ffffff;

  /* Black */
  --black-4:rgba(0, 0, 0, 0.04);
  --black-5:rgba(0, 0, 0, 0.05);
  --black-6:rgba(0, 0, 0, 0.06);
  --black-7:rgba(0, 0, 0, 0.07);
  --black-8:rgba(0, 0, 0, 0.08);
  --black-9:rgba(0, 0, 0, 0.09);
  --black-10:rgba(0, 0, 0, 0.1);
  --black-15:rgba(0, 0, 0, 0.15);
  --black-20:rgba(0, 0, 0, 0.2);
  --black-30:rgba(0, 0, 0, 0.3);
  --black-40:rgba(0, 0, 0, 0.4);
  --black-50:rgba(0, 0, 0, 0.5);
  --black-60:rgba(0, 0, 0, 0.6);
  --black-70:rgba(0, 0, 0, 0.7);
  --black-80:rgba(0, 0, 0, 0.8);
  --black-90:rgba(0, 0, 0, 0.9);
  --black-100:#000000;

  /* 3. Spacing / Units  ================ */
  --unit-05x:4px;
  --unit-075x:6px;
  --unit-1x:8px;
  --unit-2x:16px;
  --unit-3x:24px;
  --unit-4x:32px;
  --unit-5x:40px;
  --unit-6x:48px;
  --unit-7x:56px;
  --unit-8x:64px;
  --unit-9x:72px;
  --unit-10x:80px;
  --unit-15x:120px;
  --unit-20x:160px;
  --unit-25x:200px;
  --unit-30x:240px;
  --unit-35x:280px;
  --unit-40x:320px;
  --unit-45x:360px;
  --unit-50x:400px;
  --unit-full:999px;


  /* 4. Semantic Tokens ================ */

  /* Color - Text */
  --color-text-primary:var(--text-primary);
  --color-text-secondary:var(--text-secondary);
  --color-text-warning:var(--text-danger);
  --color-text-body:var(--text-body);
  --color-text-gray-light:var(--text-gray-light);
  --color-text-gray:var(--text-gray);
  --color-text-gray-dark:var(--text-gray-dark);
  --color-text-black:var(--black-100);
  --color-text-white:var(--text-white);
  --color-text-icon:var(--text-body);

  /* Color - Background */
  --color-bg-surface:var(--black-5);
  --color-bg-input:var(--black-5);
  --color-bg-focus:var(--black-100);

  /* Color - Border */
  --color-border-default:var(--black-10);
  --color-border-light:var(--black-7);
  --color-border-blockquote:var(--black-10);

  /* Color - Overlay */
  --color-overlay-strong:var(--black-50);
  --color-overlay-medium:var(--black-40);
  --color-overlay-default:var(--black-30);
  --color-overlay-light:var(--black-15);

  --container-lg:1520px;
  --container-md:1160px;
  --container-sm:840px;
}


/* Desktop Typography Overrides ================ */
@media (min-width:768px){
  :root{--typo-display-1:48px}
}

@media (min-width:1070px){
  :root{
  --typo-display-1:70px;
  --typo-display-2:48px;
  --typo-display-3:40px;
  --typo-display-4:32px;
  --typo-display-5:26px;
  --typo-display-6:21px;

  --typo-pragraph-1:18px;
  --typo-pragraph-2:16px;
  --typo-pragraph-3:15px;
  --typo-pragraph-4:14px;
  --typo-pragraph-5:13px;
  --typo-pragraph-6:12px;
  }
}
@media(min-width:1070px){
  .container-xxl{max-width:var(--container-lg)}
}

.component{background-color:#CCCCCC; display:none}
.scroll-top{border-radius:0}


/* Button ================ */
.btn{display:inline-flex; min-width:90px; width:fit-content; justify-content:center; align-items:center; border:1px solid currentColor; font-size:14px; border-radius:0; gap:var(--unit-1x); color:inherit; background-color:transparent; overflow:revert; transition:0.5s}
.btn::before{display:none}
.btn.dark{border:1px solid var(--color-text-white); color:var(--color-text-white) !important}
.btn.btn-lg{padding:14px var(--unit-4x); height:54px; min-height:54px}
.btn.btn-md{padding-left:24px; padding-right:20px; padding-top:14px; padding-bottom:14px}
.btn.btn-sm{padding:var(--unit-1x) var(--unit-2x)}
.btn.btn-txt{border:none; background-color:transparent; padding:14px 0; min-width:auto; font-size:var(--typo-pragraph-2)}
.btn.btn-txt:hover::before{background-color:transparent}
.ico{background-size:contain; background-position:center; background-repeat:no-repeat; flex-shrink:0}
.icon-wrap.long{width:24px}
.icon-wrap.long .ico-arrow{width:22px}
.measure-probe {position:absolute; visibility:hidden; white-space:nowrap; font:inherit; letter-spacing:inherit; text-transform:inherit; line-height:inherit}


.icon-wrap{width:20px; height:20px; display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden; flex-shrink:0}
.ico-arrow{display:inline-block; position:relative; width:16px; height:1px; background-color:currentColor}
.ico-arrow::after{content:""; position:absolute; top:50%; right:0; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:translateY(-50%) rotate(45deg)}
.page-link .ico-arrow{width:12px; transform:rotate(-45deg)}
.ico-arrow::after{width:7px; height:7px}
.btn.txt-lg{font-size:var(--typo-pragraph-2)}
.btn.txt-md{font-size:var(--typo-pragraph-3)}
.btn.txt-sm{font-size:var(--typo-pragraph-4)}
.btn-share{background-color:var(--comp-color-bg-basic)}
.ico-chevron{display:inline-block; width:8px; height:8px; margin-left:-4px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg)}
.btn-share{min-width:auto; font-size:var(--typo-pragraph-3); font-weight:500; font-weight:500; padding:12px 16px; gap:6px; border:none; margin-top:16px}
.ico-share{width:18px; height:18px; background-image:url('./images/ui/ico_share.svg')}
.btn-circle{min-width:40px; width:40px; height:40px; border-radius:99px;; border:1px solid #fff; display:flex; align-items:center; justify-content:center; overflow:hidden}
.btn-circle .icon-wrap{width:20px; height:20px; flex-shrink:0; gap:12px; transform:rotate(-45deg); overflow:visible}
.btn-circle .icon-wrap .ico{transform:translateX(-15px); transition:.35s}
.section-wallpaper .list-link:hover .btn-circle .icon-wrap .ico{transform:translateX(14px)}

/****** animation ******/
.btn .icon-wrap{transition:.25s}
.btn:hover .icon-wrap{transform:translateX(4px)}
.page-link:hover .icon-wrap{transform:translate(2px, -2px) !important}
.page-link .icon-wrap{transition:.6s}
.page-link{gap:2px}
/* btn clip hover */
.btn .clip{position:relative; display:inline-block; overflow:hidden; vertical-align:middle; width:100%}
.clip-line{width:100%; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; white-space:nowrap}


/* header ================ */
:root{
  --header-height:70px;
  --header-gap:clamp(24px, 5vw, 90px)
}
@media(min-width:1070px){
  :root{ --header-height:100px}
}
.header .site-nav{height:var(--header-height) !important}
.header .nav-wrap{border-top:1px solid rgba(0, 0, 0, 0.07)}
.header .site-logo{flex-shrink:0}
.header .site-logo .logo{width:155px; height:40px}
.header .logo-dark{display:none}
header div[class^="menu-main-nav"] > .menu > .menu-item > a{font-size:18px}
.header .sub-menu .menu-item:not(:first-child){margin-top:8px}
.header .nav-mobile-btn{margin-top:-1px}
@media(min-width:1070px){
  .header .sub-menu .menu-item:not(:first-child){margin-top:0}
  header div[class^="menu-main-nav"] > .menu > .menu-item > a{font-size:var(--typo-pragraph-1)}
  .header .site-logo{width:170px; height:36px}
  .header .site-nav .menu{gap:var(--header-gap); margin:0}
  .header .search-btn{margin-left:var(--header-gap)}
}
/* animation */
.header .site-nav{animation:header-drop 1s ease}
@keyframes header-drop{
  from{transform:translateY(-100px)}
  to{transform:translateY(0)}
}

.header .page-link .icon-wrap,
.footer .page-link .icon-wrap{display:inline; margin-left:4px}
.header .page-link .ico-arrow,
.footer .page-link .ico-arrow{vertical-align:middle; margin-top:-2px; transform:rotate(-45deg); color:var(--text-gray-light)}
.header .page-link .ico-arrow::after{width:6px; height:6px}


/* 메가메뉴 */
@media(min-width:1070px){
  .header a{cursor:pointer}
  .header div[class^="menu-main-nav"]{position:relative}
  .header div[class^="menu-main-nav"].is-hovered::after{content:''; position:absolute; left:0; right:0; top:100%; height:420px; pointer-events:auto}
  .header div[class^="menu-main-nav"] > .menu > .menu-item > .sub-menu{display:block !important; padding:0; background-color:transparent; border-radius:0; min-width:136px; opacity:0; transform:translateY(-12px); visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
  .header div[class^="menu-main-nav"] > .menu .sub-menu a{font-size:initial; padding:8px 0; color:inherit; font-weight:500; align-items:flex-start; height:auto}
  .header div[class^="menu-main-nav"] > .menu .sub-menu li:first-child a{padding-top:0}
  .header .site-nav{position:relative}
  .header .nav-wrap{border-top:none; transition:border-color .2s ease}
  .header::after{content:''; width:100%; height:492px; background-color:#fff; position:absolute; left:0; top:0; padding-bottom:48px; box-shadow:0 4px 16px 0 rgba(0, 0, 0, 0.06); pointer-events:none; opacity:0; transform:translateY(-32px) scaleY(0.9); transform-origin:top; visibility:hidden; transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s}
  body.header-dark #header.headroom--top .menu > .menu-item > .sub-menu,
  body.header-dark #header.headroom--top .menu > .menu-item > .sub-menu{background-color:transparent}

  /* hover */
  .header div[class^="menu-main-nav"].is-hovered > .menu > .menu-item > .sub-menu{opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; transition-delay:0s, 0s, 0s}
  .header:has(div[class^="menu-main-nav"].is-hovered)::after{opacity:1; transform:translateY(0) scaleY(1); visibility:visible; transition-delay:0s, 0s, 0s}
  .header:has(div[class^="menu-main-nav"].is-hovered) .nav-wrap{border-color:rgba(0, 0, 0, 0.07)}

  /* 메가메뉴와 검색창이 겹치지 않도록 */
  .global-container.search-overlay .header div[class^="menu-main-nav"].is-hovered > .menu > .menu-item > .sub-menu{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
  .global-container.search-overlay .header:has(div[class^="menu-main-nav"].is-hovered)::after{opacity:0 !important;visibility:hidden !important}
  .global-container.search-overlay .header:has(div[class^="menu-main-nav"].is-hovered) .nav-wrap{border-color:transparent}
  .global-container.search-overlay .header div[class^="menu-main-nav"].is-hovered::after{content:none}

  /* 사막의 뜨는별 */
  body.header-dark #header.headroom--top:has(div[class^="menu-main-nav"].is-hovered) .menu > .menu-item > a,
  body.header-dark #header.headroom--top:has(div[class^="menu-main-nav"].is-hovered) .menu .sub-menu a{color:#333}
  body.header-dark:not(.active-search-btn) #header.headroom--top:has(div[class^="menu-main-nav"].is-hovered) .ico-search:before{filter:invert(0)}
  body.header-dark #header.headroom--top:has(div[class^="menu-main-nav"].is-hovered) .logo{display:block}
  body.header-dark #header.headroom--top:has(div[class^="menu-main-nav"].is-hovered) .logo-dark{display:none}
}


/* Search-bar ================ */
.search-bar{padding-top:110px; padding-bottom:80px}
.search-bar .search-ui .input-field{font-size:16px;padding-top:18px;padding-bottom:18px}
.search-overlay::before{content:''; display:block; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0, 0, 0, 0.40); z-index:99; overflow:hidden}
body.search-overlay-lock{overflow:hidden}
.search-bar,
.search-bar .input{box-shadow:none}
.search-bar .input{box-shadow:inset 0 -1px 0 #333;border-radius:0}
.search-bar .ico-search:before{color:#333}
.search-bar .input input::placeholder{color:var(--color-text-gray)}
@media(min-width:1070px){
  .search-bar{padding-top:156px}
}

/* footer ================ */
footer{display:flex; padding-top:var(--unit-5x); padding-bottom:var(--unit-4x); flex-direction:column; align-items:center; gap:var(--padding-x10)}
footer .footer-inner{display:flex; flex-direction:column; row-gap:var(--unit-4x); padding-top:var(--unit-5x)}
footer .sitemap-wrap .menu:not(.sub-menu) > .menu-item > a,
footer .family{font-weight:600}
footer .sub-menu{display:flex; flex-direction:column; gap:var(--unit-2x)}
footer .menu-item .sub-menu a,
footer .footer-links a{display:block; min-width:52px; color:var(--color-text-gray); font-size:var(--typo-pragraph-4)}
footer .submenu-btn{display:none}
footer .site-logo a{width:140px}
@media(min-width:1070px){
  footer .footer-inner{row-gap:var(--unit-10x); padding-top:88px; padding-bottom:88px}
  footer .family{font-size:var(--typo-pragraph-4)}
}
footer hr{width:100%; height:1px; background-color:rgba(0, 0, 0, 0.08); border:none; margin-top:0; margin-bottom:0}
/* animation */
footer .menu-item a{transition:.25s}
footer .menu-item a:hover{opacity:.7}

/* footer :관련 사이트  */
footer .footer-links .menu{display:flex; flex-direction:column; gap:var(--unit-1x)}
footer .footer-links{display:flex; flex-direction:column; gap:var(--unit-2x)}
footer .info-wrap{align-items:flex-end; row-gap:var(--unit-2x)}
footer .copy{display:flex; flex-direction:column; gap:2px}
footer .copy li{color:var(--color-text-gray-light); font-size:var(--typo-pragraph-6); line-height:1.4}
@media(min-width:1070px){
  footer .footer-links .menu{gap:var(--unit-2x)}
  footer .footer-links{gap:var(--unit-2x); padding-left:var(--unit-10x);}
  footer .menu-item-28 .sub-menu{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap:var(--unit-2x); column-gap:26px;}
}


/* footer :사이트맵 모바일  */
footer .header-sitemap{display:flex; justify-content:space-between}
footer .header-sitemap .title{font-size:var(--typo-pragraph-2); font-weight:600}
footer .btn-toggle{width:20px;height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer}
footer .btn-toggle .ico-chevron{width:10px; height:10px; border-right:2px solid currentColor; border-top:2px solid currentColor; margin-left:0px; transform:rotate(134deg); transition:all 0.5s ease; margin-bottom:2px}
footer .btn-toggle.on .ico-chevron{transform:rotate(315deg); margin-bottom:0px}
footer .toggle-wrap{display:none; margin-top:var(--unit-4x);}
footer .toggle-wrap.on{display:block}
footer .toggle-wrap .menu{display:flex; flex-direction:column; gap:var(--unit-4x)}
footer .toggle-wrap .menu > li{display:flex; flex-direction:column; gap:var(--unit-2x)}
footer .footer-gap-wrap{row-gap:32px}
footer .footer-inner::before{content:''; display:block; width:100%; height:1px; background-color:rgba(0, 0, 0, 0.06)}
footer .footer-gap-wrap{order:1}
footer .footer-inner::before{order:2}
footer .info-wrap{order:3}
@media(min-width:1070px){
  footer .footer-inner::before{displa:none}
  footer .header-sitemap{display:none}
  footer .toggle-wrap{display:block; margin-top:0}
  footer .toggle-wrap .menu{flex-direction:row;column-gap:var(--unit-10x)}
}

/* footer :modal share  */
.addtoany_list a:not(.addtoany_special_service) > span{display:none !important}
.modal-share{position:fixed; display:flex; display:none; justify-content:center; align-items:center; top:0; right:0; bottom:0; left:0; z-index:999; background-color:rgba(0, 0, 0, 0.5)}
.modal-share.on{display:flex; max-width:100%}
.modal-contents{width:300px; border-radius:14px; padding:20px 20px 15px 20px; background-color:#FFF; z-index:101; position:relative}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:15px}
.modal-title{font-size:18px; font-weight:500}
.modal-close{display:inline-block; width:15px; height:15px; background-image:url('/wp-content/themes/watv/images/sns/ico_share_close.svg'); background-size:100%; background-repeat:no-repeat; cursor:pointer}
.modal-share .sns-share .addtoany_shortcode{display:inline}
.modal-share .sns-share .addtoany_shortcode .addtoany_list{display:flex; flex-wrap:wrap}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a,
.modal-share .sns-share .kakaotalk{display:flex; flex-direction:column; align-items:center; width:25%; height:auto; padding-bottom:10px; margin:0 !important; opacity:1; overflow:hidden; position:relative; background-image:inherit}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a::before,
.modal-share .sns-share .kakaotalk::before{content:''; position:relative; display:block; width:40px; height:40px; border-radius:14px; top:0; right:0; bottom:0; left:0; background-position:center; background-repeat:no-repeat; box-shadow:0px 0px 0px 1px rgb(0 0 0 / 7%) inset}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_facebook::before{background-color:#3F5594; background-image:url('/wp-content/themes/watv/images/sns/ico_share_facebook.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_twitter::before{background-color:#1B97F0; background-image:url('/wp-content/themes/watv/images/sns/ico_share_twitter.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_x::before{background-color:#1A1A1A; background-image:url('/wp-content/themes/watv/images/sns/ico_share_x.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_email::before{background-color:#7D7D7D; background-image:url('/wp-content/themes/watv/images/sns/ico_share_mail.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_line::before{background-color:#21CD5B; background-image:url('/wp-content/themes/watv/images/sns/ico_share_line.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_kakao::before{background-color:#FDBF00; background-image:url('/wp-content/themes/watv/images/sns/ico_share_story.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_sms::before{background-color:#4F67ED; background-image:url('/wp-content/themes/watv/images/sns/ico_share_sms.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_copy_link::before{background-color:#FFFFFF; background-image:url('/wp-content/themes/watv/images/sns/ico_share_link.svg')}
.modal-share .sns-share .kakaotalk::before{background-color:#FFE300; background-image:url('/wp-content/themes/watv/images/sns/ico_share_kakaotalk.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list>a:after,
.modal-share .sns-share .kakaotalk:after{content:attr(title); position:relative; display:block; text-align:center; font-size:11px; font-weight:500; color:var(--text-body); margin-top:2px}
.modal-share .sns-share .addtoany_share_save{display:none !important}


/* Head ================ */
.page-head{display:flex; flex-direction:column; row-gap:var(--unit-075x); padding-top:var(--unit-5x); padding-bottom:var(--unit-3x)}
.page-head > *{max-width:580px}
.page-head .eyebrow{font-size:var(--typo-display-6); color:var(--color-text-gray-light); line-
  height:1.3; font-weight:300}
.page-head .eyebrow *{font:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; display:inline-block}
.page-head .title{font-size:var(--typo-display-1); line-height:1.3; font-weight:200}
.page-head .desc-wrap{margin-top:var(--unit-1x); }
.page-head .desc{font-size:var(--typo-pragraph-2); color:var(--color-text-gray); line-height:1.7}
.page-head .desc *{font:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; display:inline-block}

@media(min-width:1070px){  
  .page-head{row-gap:var(--unit-1x); padding-top:var(--unit-10x); padding-bottom:var(--unit-7x)}  
  .page-head .eyebrow{font-size:var(--typo-display-5)}
  .page-head .desc-wrap{margin-top:var(--unit-2x)}
}


/* section layout ================ */
.page-contents:last-of-type{padding-bottom:var(--unit-9x)}
@media (max-width:767px){  .contents{overflow-x:hidden} }
@media(min-width:1070px){ .page-contents:last-of-type{padding-bottom:var(--unit-20x)}}

/* pagination ================ */
.pagination{width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--unit-1x)}
.pagination:not([class^="color-"]) .page-numbers:not(.current){color:var(--color-text-gray-light)}
.pagination .page-numbers:hover{background-color:#f8f8f8}
.pagination .page-numbers.current{background-color:var(--color-bg-surface);color:inherit}
.pagination .page-numbers{display:flex; align-items:center; justify-content:center; width:var(--unit-5x); height:var(--unit-5x); border-radius:4px}
.pagination .next.page-numbers,
.pagination .prev.page-numbers{font-size:0}
.pagination .next.page-numbers::before,
.pagination .prev.page-numbers::before{content:''; display:inline-block; width:14px; height:14px; background-image:url('./images/ui/ico_chevron.svg'); background-repeat:no-repeat; background-position:center; vertical-lign:middle; flex-shrink:0}
.pagination .prev.page-numbers::before{transform:rotate(180deg)}


/* list item - book ================ */
.list-item.book .thum-img{aspect-ratio:3 / 4; padding-bottom:0; object-fit:cover}
.list-item.book .list-link{display:flex; flex-direction:column; gap:var(--unit-2x)}
.list-item.book .thum{position:relative}
.list-item.book .thum:before{content:""; display:block; border:1px solid rgba(0, 0, 0, .1); height:100%; left:0; pointer-events:none; position:absolute; top:0; width:100%; z-index:4; animation:borderani 1s .6s forwards; opacity:0}
@keyframes borderani{
  to{opacity:1}
}


/****** animation ******/
.list-item.book .thum, 
.list-item.book .thum-img{transition:.5s; overflow:hidden}
.list-item.book .list-link:hover .thum{transform:translateY(-6px); box-shadow:0px 6px 10px 0px rgba(0, 0, 0, 0.2)}
.section-new-books .list-item.book .list-link:hover .thum{transform:none; box-shadow:none}
.section-new-books .list-item.book .list-link:hover .thum-img{transform:scale(1.05)}



/* 소개 ================ */
.contents-inner{row-gap:var(--unit-5x)}
.page-about-us .visual{overflow:hidden}
.page-about-us .visual.thum .thum-img{aspect-ratio:3 / 4; background-position:center; background-size:cover; background-repeat:no-repeat}
.page-about-us .text{display:flex; flex-direction:column; row-gap:var(--unit-5x); container-type:inline-size}
.page-about-us .contents-head > div{display:flex; flex-direction:column; row-gap:clamp(var(--unit-1x), 3vw, var(--unit-2x))}
.page-about-us #contents-title {font-size:var(--typo-display-3); color:var(--color-text-body); line-height:1.4; letter-spacing:-.8px; font-weight:500}
.page-about-us #contents-subtitle{font-size:var(--typo-display-5); color:var(--color-text-gray-light); font-weight:500}
.page-about-us #contents-subtitle *{font:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; display:inline-block}
.page-about-us .contents-text-wrap > div p{line-height:1.7}
.page-about-us .contents-text-wrap > div{display:flex; flex-direction:column; gap:var(--unit-5x)}
@media(max-width:1069px){
  .page-about-us .contents-head br{display:block}
}
@media(min-width:1070px){  
  .page-about-us .thum-wrap{padding-right:var(--unit-6x)}
  .page-about-us .row{ --about-spacing:var(--unit-4x); --bs-gutter-x:var(--about-spacing)}
  .page-about-us .contents-head > div{row-gap:clamp(var(--unit-2x), 4vw, var(--unit-4x))}
  .page-about-us .text{height:100%; row-gap:var(--unit-9x); justify-content:space-between}
  .page-about-us .contents-text-wrap > div p{flex:1}
}
@media(min-width:1200px){
  .page-about-us .contents-text-wrap > div{flex-direction:row;gap:var(--unit-4x)}
}

/* 대표이미지 애니메이션 */
/* .page-about-us .visual.thum .thum-img{animation:thum-reveal2 1.9s cubic-bezier(0.78, 0.01, 0.26, 1.02) forwards, thum-zoom 1s ease-out forwards; clip-path:inset(0 100% 0 0)}
@keyframes thum-reveal2{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(0)}
} */

/* poster */
.page-about-us .visual.thum .thum-media{position:relative; width:100%; overflow:hidden}
.page-about-us .visual.thum .thum-poster{position:relative; opacity:1}
.page-about-us .visual.thum.is-video-ready .thum-video{opacity:1; z-index:1}
.page-about-us .visual.thum .thum-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.5s ease}
.page-about-us .visual.thum.is-video-ended .thum-video{opacity:0; transition-duration:1.5s}


/* 연혁 ================ */
.page-history .visual{overflow:hidden}
.page-history .visual.thum .thum-img{aspect-ratio:3 / 4; background-position:center; background-size:cover; background-repeat:no-repeat}
.page-history .year-range{font-size:var(--typo-display-2); line-height:1; letter-spacing:-.96px}
.page-history .text{display:flex;flex-direction:column;row-gap:var(--unit-4x)}
.page-history hr.wp-block-separator{width:100%;border-top:1px solid var(--color-border-default)}
.page-history .wp-block-list{display:flex;flex-direction:column;gap:1em}
.page-history .wp-block-list li{display:flex; color:var(--color-text-gray-dark); font-size:var(--typo-pragraph-3); align-items:center}
.page-history .wp-block-list li a{display:block; text-decoration: underline; text-decoration-color: transparent; text-underline-position: under; text-underline-offset:2px; transition:all .15s}
.page-history .wp-block-list li:hover a{color:var(--text-primary);  text-decoration-color: var(--text-primary)}
.page-history .wp-block-list li a::after{content:''; display:inline-block; width:12px; height:12px; background-image:url('./images/ui/ico_link.svg'); background-size:contain; margin-left:6px; flex-shrink:0; filter: invert(33%) sepia(77%) saturate(342%) hue-rotate(347deg) brightness(96%) contrast(93%)}
.page-history .wp-block-list strong{font-weight:500; min-width:var(--unit-10x); flex-shrink:0; margin-right:var(--unit-2x)}
@media(max-width:767px){
  .page-history .text br{display:block}
  .page-history .contents-inner .visual{position:relative; width:100vw; left:calc(50% - 50vw); padding-right:var(--unit-5x)}
}
@media(min-width:768px){
  .page-history .page-contents.container-xxl{max-width:100%; padding-left:0}
  .page-history .text{padding-left:var(--unit-5x); column-gap:clamp(40px, 10vw, 140px)}
}
@media(min-width:1070px){
  .page-history .row{--history-spacing:var(--unit-4x); --bs-gutter-x:var(--history-spacing)}
  .page-history .thum-wrap{padding-right:clamp(var(--unit-6x), 9vw, 162px)}
  .page-history .text{flex-wrap:wrap; flex-direction:row; column-gap:clamp(20px, 15cqw, 140px); padding-top:var(--unit-5x); padding-bottom:var(--unit-5x); padding-left:0; row-gap:var(--unit-5x)}
  .page-history .wp-block-list{flex:1 1 480px}
  
}
@media(min-width:1200px){
  .page-history .text{container-type:inline-size}
  .page-history .thum-wrap{padding-right:clamp(var(--unit-6x), 9vw, 162px)}
}
@media(min-width:1499px){
  .page-history .text{padding-right:162px}
}
@media(min-width:1825px){
  .page-history .wp-block-list strong{margin-right:88px}
}

/****** history animation ******/
.page-history .visual.thum .thum-img{animation:thum-reveal 1.9s cubic-bezier(0.78, 0.01, 0.26, 1.02) forwards, thum-zoom 1s ease-out forwards; clip-path:inset(0 100% 0 0)}
@keyframes thum-reveal{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0)}
}



/* 도서 목록 ================ */
/* tab-nav */
.slide-nav .category-menu{display:flex; padding-bottom:var(--unit-3x); column-gap:var(--unit-2x)}
.slide-nav .cat-item{padding-top:0; padding-bottom:0}
.slide-nav .cat-item a{font-size:19px; color:var(--color-text-gray-light); font-weight:500; line-height:1.4; transition:all 0.15s ease}
.slide-nav .cat-item a:hover{color:inherit}
.slide-nav .category-menu .cat-item:not(:first-child){margin-left:0}
.slide-nav .category-menu .cat-item.current-cat{border-bottom:none}
.slide-nav .category-menu .cat-item.current-cat a{color:inherit}

/* list */
.category .row{--category-spacing:var(--unit-3x); --bs-gutter-x:var(--category-spacing); row-gap:var(--unit-5x)}
.category .list-wrap{align-items:baseline}
.category .list-item.book .thum-img{aspect-ratio:revert-layer}
.category .list-item.book .list-link{display:inline-block}
.category .post-info{display:flex; flex-direction:column; row-gap:var(--unit-05x); margin-top:var(--unit-2x)}
.category .post-category{color:var(--color-text-gray-light); font-size:var(--typo-pragraph-5); line-height:1.4}
.category .post-title{font-weight:600; line-height:1.4}
.post-tags{position:absolute; z-index:1; display:flex; padding:5px 10px; justify-content:center; align-items:center; background-color:var(--color-text-black); color:var(--color-text-white); font-size:var(--typo-ragraph-4); font-weight:500; line-height:1.4; letter-spacing:-.28px; opacity:0; animation:tag-fadein 0.6s 0.1s ease forwards;}
@keyframes tag-fadein{
  to{opacity:1}
}

.category .category-list{display:flex;  flex-direction:column; gap:var(--unit-5x)}
@media(max-width:767px){
  .slide-nav{width:100%;margin-left:0; margin-right:0}
  .slide-nav .list-wrap{padding-bottom:var(--padding-container-lg); row-gap:var(--unit-4x)}
  .slide-nav .category-menu{padding-left:clamp(20px, 6vw, 36px); padding-right:clamp(20px, 6vw, 36px); overflow-x:scroll; scroll-behavior:smooth; scrollbar-width:none}
  .slide-nav .category-menu::-webkit-scrollbar{display:none}
  .category .category-menu .cat-item{flex-shrink:0}
}
@media(min-width:768px){
  .category .category-menu{flex-wrap:wrap; column-gap:var(--unit-3x); row-gap:var(--unit-2x)}
  .category .row{row-gap:var(--unit-7x)}
}
@media(min-width:1070px){
  .category .category-list{gap:var(--unit-10x)}
  .category .category-menu{padding-bottom:var(--unit-10x); column-gap:var(--unit-4x); row-gap:var(--unit-2x)}
  .category .cat-item a{font-size:var(--typo-display-6)}
  .category .row{--category-spacing:var(--unit-8x); --bs-gutter-x:var(--category-spacing); row-gap:var(--unit-8x)}
}




/* 전시회 ================ */
.page-exhibition .lists .info > *:not(:first-child){margin-top:0}
.page-exhibition .lists{--writing-spacing:var(--unit-2x); --bs-gutter-x:var(--writing-spacing); row-gap:var(--unit-2x)}
.page-exhibition .list-link{padding:var(--unit-5x) var(--unit-4x); min-height:460px}
.page-exhibition .list-item{aspect-ratio:16 / 9; min-height:460px}
.page-exhibition .info{display:flex; flex-direction:column; gap:var(--unit-1x); justify-content:center; max-width:380px}
.page-exhibition .info .title{font-size:var(--typo-display-2); font-weight:500; line-height:1.4; letter-spacing:-1.92px}
.page-exhibition .info .desc{font-size:var(--typo-pragraph-2); line-height:1.65}
.page-exhibition .lists .info .btn{margin-top:var(--unit-2x); }
.page-exhibition .list-overlay .thum::after{background:var(--color-overlay-medium); opacity:1}
.page-exhibition .mother .thum-img{background-image:url('./images/img_exhibition_mother.jpg')}
.page-exhibition .father .thum-img{background-image:url('./images/img_exhibition_father.jpg')}
@media(max-width:767px){ 
  .page-exhibition .page-contents{width:100%} 
  .page-exhibition .father .thum-img{background-position:70%}
}
@media(min-width:768px){ .page-exhibition .list-link{padding:var(--unit-7x)} }
@media(min-width:1070px){
  .page-exhibition .list-item,.page-exhibition .list-link{max-height:700px}
  .page-exhibition .info{gap:var(--unit-2x); max-width:580px}
  .page-exhibition .list-link{padding:var(--unit-9x) var(--unit-15x)}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
  .page-exhibition .mother .thum-img{background-image:url('./images/img_exhibition_mother@2x.jpg')}
  .page-exhibition .father .thum-img{background-image:url('./images/img_exhibition_father@2x.jpg')}
}

/****** animation ******/
.banner-ani a{position:relative; overflow:hidden; display:block}
.banner-ani a:hover .thum-img{scale:1.06}
.banner-ani .thum-img{animation:scale-img 1.5s .5s; transition:scale .8s; scale:1}
@keyframes scale-img {
  0%{transform:scale(1.2)}
  100%{transform:scale(1)}
}


/* 투고 ================ */
.page-writing .lists{--writing-spacing:var(--unit-2x); --bs-gutter-x:var(--writing-spacing); row-gap:var(--unit-2x)}
.page-writing .list-link{align-items:center; justify-content:center; padding:var(--unit-10x) var(--unit-8x); max-height:460px}
.page-writing .list-item{aspect-ratio:3 / 4; max-height:460px}
.page-writing .info{display:flex; flex-direction:column; gap:var(--unit-2x); align-items:center; justify-content:center; text-align:center; max-width:420px}
.page-writing .info .title{font-size:var(--typo-display-4); font-weight:600}
.page-writing .info .desc{font-size:var(--typo-pragraph-2); line-height:1.65; margin-top:0}
.page-writing .info .desc span{display:block; font-size:var(--typo-pragraph-4); opacity:.7; margin-top:var(--unit-05x)}

.page-writing .lists .info .btn{margin-top:var(--unit-2x)}
.page-writing .list-overlay .thum::after{background:var(--color-overlay-medium); opacity:1}
.page-writing .submit .thum-img{background-image:url('./images/img_writing_submit.jpg')}
.page-writing .contest .thum-img{background-image:url('./images/img_writing_contest.jpg')}
@media(max-width:640px){
  .page-writing .submit .thum-img{background-position:right -60px center}
  .page-writing .contest .thum-img{background-position:right -70px center}
}
@media(max-width:767px){
  .page-writing .page-contents{width:100%}
  .page-writing .list-item .desc br{display:block}
}
@media(min-width:1070px){
  .page-writing .submit .thum-img{background-position:right -130px center}
  .page-writing .contest .thum-img{background-position:right -250px center}  
  .page-writing .list-item,
  .page-writing .list-link{max-height:860px}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .page-writing .submit .thum-img{background-image:url('./images/img_writing_submit@2x.jpg')}
  .page-writing .contest .thum-img{background-image:url('./images/img_writing_contest@2x.jpg')}
}


/* 404 ================ */
.error404 .page-contents{display:flex; flex-direction:column; align-items:center; row-gap:20px; padding-top:var(--unit-10x); padding-bottom:var(--unit-15x)}
.error404 .title{font-size:var(--typo-display-5); font-weight:600; letter-spacing:-.52px}
.error404 .desc *{color:var(--color-text-gray-light); line-height:1.7}
.error404 .btns{display:flex; gap:8px; margin-top:12px}
.error404 .page-contents::before{content:''; display:block; width:100px; height:100px; background:url('./images/ui/ico_404.gif') no-repeat center / contain}
.error404 .text-wrap > *:not(:first-child){margin-top:0}
.error404 .text-wrap{display:flex; flex-direction:column; row-gap:var(--unit-1x)}
@media(min-width:1070px){
  .error404 .page-contents{row-gap:28px; padding-top:var(--unit-20x); padding-bottom:var(--unit-20x)}
  .error404 .page-contents::before{width:140px; height:140px}
}


/* admin ui ============ */
.mv-cards-wrap .mv-card label{color:red;}