/* PBP 0.1.1: integrated replacement for the supplied header CSS. */
@media(min-width:64em){.s-products-list .s-product-card-mobile{display:none!important}}
@media(max-width:63.99em){.s-products-list .s-product-card-pc{display:none!important}}
.s-product-card-pc__media,.s-product-card-mobile__media,.s-product-card-mobile__image--wrap{aspect-ratio:16/9!important;width:100%;height:auto;overflow:hidden;position:relative;border-radius:20px!important;background-color:var(--accent-color)}
.s-product-card-pc__image,.s-product-card-mobile__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.s-product-card-pc .c-post-card-pc__tag,.s-product-card-mobile__tag{padding:4px 12px!important;background:#fff!important;border:1px solid #000!important;border-radius:14.5px!important;width:fit-content;margin-bottom:5px;text-align:center}
.s-product-card-pc .c-post-card-pc__tag--link,.s-product-card-mobile__tag--link{font-family:AppleSDGothicNeo,"Noto Sans KR",sans-serif!important;font-weight:600!important;font-size:14px!important;line-height:14px!important;color:#000!important}
.s-product-card-pc__title,.s-product-card-mobile__title{font-family:AppleSDGothicNeo,"Noto Sans KR",sans-serif;font-weight:800;font-size:24px;line-height:36px;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.s-product-card-pc__title a{font:inherit;letter-spacing:inherit}
@media(max-width:63.99em){.s-product-card-mobile__title{font-size:18px;line-height:26px}}
.s-product-card-pc__price--label{font-size:10px;font-weight:700;line-height:1.4;max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-product-card-pc__price--number{font-family:AppleSDGothicNeo,"Noto Sans KR",sans-serif;font-size:18px;font-weight:800;line-height:21px;color:#505050}
.s-product-card-mobile .s-product-card-pc__prices{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.kg-image-card,.kg-image-card .kg-image,.kg-image-card img,.kg-embed-card,.kg-gallery-image img,.kg-card img{border-radius:0!important}
.pbp-product-header{background:#f4f4f4;padding:40px 20px}
.pbp-product-header__inner{max-width:1104px;margin:auto;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;align-items:center}
.pbp-product-header__media img{display:block;width:100%;max-height:520px;object-fit:contain}
.pbp-product-header__info{min-width:0;overflow-wrap:anywhere}
.pbp-product-header__info h1{font-size:32px;line-height:1.4;margin:16px 0;font-weight:800}
.pbp-product-header__info p{font-size:17px;line-height:1.7}
.pbp-product-header__tag{display:inline-block;padding:4px 12px;background:#fff;border:1px solid #000;border-radius:20px;color:#000}
.s-product__article{min-width:0;flex:1}
@media(max-width:63.99em){.pbp-product-header__inner{grid-template-columns:minmax(0,1fr);gap:24px}.pbp-product-header__info h1{font-size:26px}.pbp-product-header__media img{max-height:360px}.s-product__main--inner{flex-direction:column-reverse;gap:28px}.s-product__aside{width:100%}}

/* 0.1.2: keep product information and purchase action together. */
.pbp-product-header__inner{align-items:start}
.pbp-product-header__info .s-product-sell__container{position:static;top:auto;width:100%;margin-top:24px}
.pbp-product-header__info .s-product-sell{width:100%;margin:0;padding:24px;background:#fff;border:1px solid #deded8;border-radius:16px;box-sizing:border-box}
.pbp-product-header__info .s-product-sell__prices{margin-top:0}
.pbp-product-header__info .s-product-sell__payment--button{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;background:#111;color:#fff;border:1px solid #111;border-radius:8px}
.pbp-product-header__info .s-product-sell__payment--button.disabled{background:#e9e9e9;color:#777;pointer-events:none}
.s-product .s-product__main--inner{display:block;width:100%;max-width:900px;margin:0 auto}
.s-product .s-product__article,.s-product .s-product__article--book{width:100%;max-width:100%;margin:0;padding:0;flex:none}
.s-product .s-product__content{width:100%;max-width:100%;overflow-wrap:anywhere}
.s-product .s-product__content .kg-image-card{width:100%;max-width:100%;margin-left:0;margin-right:0}
.s-product .s-product__content img{max-width:100%;height:auto}
@media(max-width:63.99em){.pbp-product-header{padding:24px 20px}.pbp-product-header__inner{gap:20px}.pbp-product-header__info .s-product-sell{padding:20px}.pbp-product-header__info h1{margin:12px 0}.s-product .s-product__main{padding-top:28px}}

/* 0.1.3: the thumbnail itself is a native product link, with no overlay. */
.s-products-list a.pbp-product-thumbnail{display:block;cursor:pointer;color:inherit;text-decoration:none;isolation:isolate}
.s-products-list .s-product-card-pc .c-post-card-pc__tag,.s-products-list .s-product-card-mobile__tag{padding:0!important}
.s-products-list .c-post-card-pc__tag--link,.s-products-list .s-product-card-mobile__tag--link{display:block;padding:4px 12px;border-radius:inherit;cursor:pointer;text-decoration:none}
.s-products-list a.pbp-product-thumbnail:focus-visible,.s-products-list .c-post-card-pc__tag--link:focus-visible,.s-products-list .s-product-card-mobile__tag--link:focus-visible{outline:3px solid #111;outline-offset:3px}

/* 0.2.18: purchase panel fills its 40% column. */
@media (min-width:64em){
  .pbp-product-header__info .s-product-sell__container{width:100%;max-width:100%;box-sizing:border-box}
}

/* 0.1.5: Bluedot CMS 2-depth navigation support. */
.c-nav__item--has-children{position:relative}
.c-nav__item-row{display:flex;align-items:center}
.c-nav__submenu-toggle{display:none;margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.c-nav__submenu-toggle svg{display:block;width:12px;height:8px;transition:transform .18s ease}
.c-nav__submenu{margin:0;padding:0;list-style:none}
.c-nav__submenu-link{text-decoration:none;color:inherit}
@media (min-width:64em){
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row{gap:6px}
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row>.c-nav__submenu-toggle{display:block;pointer-events:none}
  .c-header__nav>.c-nav__item--has-children>.c-nav__submenu{position:absolute;z-index:1000;top:calc(100% + 12px);left:50%;min-width:180px;padding:10px 0;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 10px 28px rgba(0,0,0,.12);transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
  .c-header__nav>.c-nav__item--has-children>.c-nav__submenu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .c-header__nav>.c-nav__item--has-children:hover>.c-nav__submenu,.c-header__nav>.c-nav__item--has-children:focus-within>.c-nav__submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  .c-header__nav .c-nav__submenu-item{margin:0;padding:0}
  .c-header__nav .c-nav__submenu-link{display:block;padding:10px 18px;white-space:nowrap;font-size:14px;line-height:1.35}
  .c-header__nav .c-nav__submenu-link:hover,.c-header__nav .c-nav__submenu-link:focus,.c-header__nav .c-nav__submenu-link--current{background:#f5f5f5;color:#000}
}
@media (max-width:63.99em){
  .c-header-drawer .c-nav__item--has-children{width:100%}
  .c-header-drawer .c-nav__item-row{width:100%;justify-content:space-between}
  .c-header-drawer .c-nav__item-row>.c-nav__link{flex:1;min-width:0}
  .c-header-drawer .c-nav__submenu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px}
  .c-header-drawer .c-nav__item.is-subnav-open>.c-nav__item-row .c-nav__submenu-toggle svg{transform:rotate(180deg)}
  .c-header-drawer .c-nav__submenu{display:none;width:100%;padding:2px 0 10px 18px;box-sizing:border-box}
  .c-header-drawer .c-nav__item.is-subnav-open>.c-nav__submenu{display:block}
  .c-header-drawer .c-nav__submenu-item{margin:0;padding:0}
  .c-header-drawer .c-nav__submenu-link{display:block;padding:9px 0;font-size:.92em;line-height:1.4;opacity:.72}
  .c-header-drawer .c-nav__submenu-link--current{opacity:1;font-weight:700}
}

/* 0.1.6: visible, restrained desktop dropdown for Bluedot 2-depth navigation. */
@media (min-width:64em){
  /* The original Suwon header clips everything outside its fixed 85px height. */
  .c-header__outer{position:relative;z-index:300;overflow:visible!important}
  .c-header__outer>.o-grid{overflow:visible!important}
  .c-header{overflow:visible!important}
  .c-header__behaviors,.c-header__member,.c-header__nav--outer,.c-header__nav{overflow:visible!important}

  /* Keep the parent item stable; the legacy hover rule adds a border and moves it. */
  .c-header__nav>li.c-nav__item--has-children:hover{padding-bottom:0;margin-bottom:0;border-bottom:0}
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row{position:relative;gap:5px;height:32px;align-items:center}
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row>.c-nav__link{display:flex;align-items:center;height:32px}
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row>.c-nav__submenu-toggle{display:flex;align-items:center;justify-content:center;width:14px;height:32px;color:#777}
  .c-header__nav>.c-nav__item--has-children:hover>.c-nav__item-row>.c-nav__link,
  .c-header__nav>.c-nav__item--has-children:focus-within>.c-nav__item-row>.c-nav__link{box-shadow:inset 0 -2px 0 currentColor}
  .c-header__nav>.c-nav__item--has-children:hover>.c-nav__item-row>.c-nav__submenu-toggle svg,
  .c-header__nav>.c-nav__item--has-children:focus-within>.c-nav__item-row>.c-nav__submenu-toggle svg{transform:rotate(180deg)}

  /* Dropdown: align to parent label, reduce visual weight, leave a hover bridge. */
  .c-header__nav>.c-nav__item--has-children>.c-nav__submenu{
    position:absolute;
    z-index:10000;
    top:calc(100% + 8px);
    left:-14px;
    min-width:190px;
    max-width:280px;
    margin:0;
    padding:7px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid rgba(0,0,0,.09);
    border-radius:6px;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
    transform:translateY(5px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
  }
  .c-header__nav>.c-nav__item--has-children>.c-nav__submenu:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    height:10px;
  }
  .c-header__nav>.c-nav__item--has-children:hover>.c-nav__submenu,
  .c-header__nav>.c-nav__item--has-children:focus-within>.c-nav__submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .c-header__nav .c-nav__submenu-item{margin:0!important;padding:0!important;border:0!important}
  .c-header__nav .c-nav__submenu-link{
    display:block;
    padding:10px 12px;
    border-radius:3px;
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    letter-spacing:-.01em;
    color:#222;
    text-decoration:none;
  }
  .c-header__nav .c-nav__submenu-link:hover,
  .c-header__nav .c-nav__submenu-link:focus-visible,
  .c-header__nav .c-nav__submenu-link--current{background:#f4f4f1;color:#000;outline:none}
}

/* 0.1.7: PBP editorial dropdown refinement. */
@media (min-width:64em){
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row{gap:4px}
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row>.c-nav__submenu-toggle{
    width:12px;
    margin-left:1px;
    color:#8a8a8a;
  }
  .c-header__nav>.c-nav__item--has-children>.c-nav__item-row>.c-nav__submenu-toggle svg{
    width:9px;
    height:6px;
    transition:transform .16s ease,color .16s ease;
  }
  .c-header__nav>.c-nav__item--has-children:hover>.c-nav__item-row>.c-nav__submenu-toggle,
  .c-header__nav>.c-nav__item--has-children:focus-within>.c-nav__item-row>.c-nav__submenu-toggle{color:#111}

  .c-header__nav>.c-nav__item--has-children>.c-nav__submenu{
    top:calc(100% + 11px);
    left:-12px;
    min-width:196px;
    max-width:260px;
    padding:6px 0 7px;
    background:#fff;
    border:1px solid #e8e8e5;
    border-top:2px solid #111;
    border-radius:0 0 4px 4px;
    box-shadow:0 10px 24px rgba(0,0,0,.07);
    transform:translateY(4px);
  }
  .c-header__nav>.c-nav__item--has-children>.c-nav__submenu:before{
    top:-13px;
    height:13px;
  }
  .c-header__nav .c-nav__submenu-item+ .c-nav__submenu-item{border-top:1px solid #f2f2ef!important}
  .c-header__nav .c-nav__submenu-link{
    position:relative;
    display:flex;
    align-items:center;
    min-height:38px;
    padding:8px 18px;
    border-radius:0;
    white-space:nowrap;
    font-family:AppleSDGothicNeo,"Noto Sans KR",var(--type-sans-serif);
    font-size:13.5px;
    font-weight:500;
    line-height:1.35;
    letter-spacing:-.015em;
    color:#333;
    background:transparent;
    transition:background-color .12s ease,color .12s ease,padding-left .12s ease;
  }
  .c-header__nav .c-nav__submenu-link:hover,
  .c-header__nav .c-nav__submenu-link:focus-visible{
    padding-left:21px;
    background:#f7f7f4;
    color:#000;
  }
  .c-header__nav .c-nav__submenu-link--current{
    padding-left:21px;
    background:#f7f7f4;
    color:#000;
    font-weight:700;
  }
  .c-header__nav .c-nav__submenu-link--current:before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    width:4px;
    height:4px;
    margin-top:-2px;
    border-radius:50%;
    background:#111;
  }
}

@media (max-width:63.99em){
  .c-header-drawer .c-nav__item--has-children>.c-nav__item-row{border-bottom:0}
  .c-header-drawer .c-nav__submenu-toggle{color:#777}
  .c-header-drawer .c-nav__submenu-toggle svg{width:10px;height:7px}
  .c-header-drawer .c-nav__submenu{
    margin:2px 0 10px 1px;
    padding:2px 0 2px 15px;
    border-left:1px solid #deded9;
  }
  .c-header-drawer .c-nav__submenu-link{
    padding:8px 0;
    font-size:.9em;
    font-weight:500;
    opacity:.68;
  }
  .c-header-drawer .c-nav__submenu-link:hover,
  .c-header-drawer .c-nav__submenu-link:focus-visible,
  .c-header-drawer .c-nav__submenu-link--current{opacity:1;color:#111}
}


/* 0.2.44 아이폰에서 홈 뉴스레터 '구독하기' 글자가 안 보이던 문제.
   버튼 글자색이 지정돼 있지 않아 iOS가 기본 버튼 색(다크 모드에서는 흰색)을 써서 흰 바탕에 묻힘.
   글자색·기본 모양을 명시하고, 누른 뒤 검은색이 남는 현상(터치 hover)도 마우스가 있는 기기에서만 적용 */
.s-products__header--subscribe--button{-webkit-appearance:none;appearance:none;color:#000!important;-webkit-text-fill-color:#000;background-color:#fff;color-scheme:light}
.s-products__header--subscribe--button:hover{background-color:#fff;color:#000!important;-webkit-text-fill-color:#000}
@media (hover:hover){.s-products__header--subscribe--button:hover{background-color:#000;color:#fff!important;-webkit-text-fill-color:#fff}}
/* 같은 상자의 이메일 입력칸: 입력한 글자가 연한 회색(#D9D9D9)이라 잘 안 보이던 것을 진하게, 안내 문구만 연하게 */
.s-products__header--subscriber--input--form .c-form-group__input{color:#222!important;-webkit-text-fill-color:#222;-webkit-appearance:none;appearance:none}
.s-products__header--subscriber--input--form .c-form-group__input::placeholder{color:#ADB5BF;-webkit-text-fill-color:#ADB5BF;opacity:1}