/* Selected homepage concept: Korean cover titles and five vector logo studies. */
body:not([data-review="true"]) .review-bar,
body:not([data-review="true"]) .logo-picker { display: none; }
.logo-picker { padding: 16px max(28px, calc((100% - 1240px) / 2)); background: #edf1f8; border-bottom: 1px solid #dce3ef; }
.logo-picker summary { cursor: pointer; font-size: 12px; color: #26364f; }
.logo-picker summary strong { margin-left: 5px; }
.logo-picker summary > span { margin-left: 18px; font-size: 10px; color: #687890; }
.logo-options { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.logo-options button { padding: 12px 14px 9px; border: 1px solid #d8e0ec; border-radius: 7px; background: #fff; text-align: left; }
.logo-options button[aria-pressed=true] { border-color: #2456df; box-shadow: 0 0 0 1px #2456df; }
.logo-option-label { display: flex; align-items: center; gap: 6px; color: #63748d; font-size: 10px; }
.logo-option-label b { color: #8a98ad; font-size: 9px; }
.logo-option-label i { visibility: hidden; margin-left: auto; color: #2456df; font-style: normal; font-size: 13px; }
[aria-pressed=true] > .logo-option-label i { visibility: visible; }
.logo-options .logo-image { display: block; width: 100%; height: 53px; margin-top: 8px; object-fit: contain; object-position: left center; }
.logo-file-link { display: block; width: fit-content; font-size: 10px; color: #536a91; margin: 9px 0 0 auto; }
.selected-logo .logo-image { display: block; width: 208px; height: 54px; object-fit: contain; object-position: left center; }
.paper-cover strong { font-family: 'Malgun Gothic','Apple SD Gothic Neo',sans-serif; line-height: 1.3; font-weight: 750; letter-spacing: -.07em; }
.hard .paper-cover strong { font-family: 'Batang',serif; line-height: 1.4; }
.hero-book .paper-cover strong { font-size: 34px; margin-top: 24px; }
.saddle .paper-cover { box-shadow: inset 5px 0 4px #19382512; }
.saddle-staple { position: absolute; z-index: 5; left: 2px; width: 4px; height: 13%; border: 1px solid #63716e; border-radius: 3px; background: linear-gradient(90deg,#85918e 0%,#f5faf8 43%,#d3ddd8 65%,#7b8782 100%); box-shadow: 1px 1px 1px #243e3450; transform: rotate(-2deg); }
.staple-top { top: 23%; }
.staple-bottom { top: 65%; }
.workspace-art .saddle-staple,.friendly-product-art .saddle-staple,.reorder-mini .saddle-staple { width: 2px; left: 0; border-width: .5px; box-shadow: none; }
.workspace-art .paper-cover strong,.mini-book .paper-cover strong,.reorder-mini .paper-cover strong { line-height: 1.2; }
@media(max-width:1200px) {
  .nav-standard .nav-inner { gap: 27px; }
  .selected-logo .logo-image { width: 185px; height: 49px; }
  .logo-picker { padding: 14px 28px; }
  .logo-options { gap: 8px; }
  .logo-options button { padding: 10px; }
  .logo-option-label { font-size: 9px; }
  .hero-book .paper-cover strong { font-size: 29px; }
}
@media(max-width:1000px) {
  .hero-book .paper-cover strong { font-size: 26px; }
  .logo-options { display: flex; overflow-x: auto; padding: 2px 2px 7px; scroll-snap-type: x proximity; }
  .logo-options button { flex: 0 0 180px; scroll-snap-align: start; }
}
@media(max-width:700px) {
  .logo-picker { padding: 12px 18px; }
  .logo-picker summary { font-size: 11px; }
  .logo-picker summary > span { display: block; font-size: 9px; margin: 5px 0 0 15px; }
  .logo-options { margin-top: 10px; gap: 9px; }
  .logo-options button { flex-basis: 164px; padding: 9px 11px; }
  .logo-options .logo-image { height: 42px; margin-top: 4px; }
  .logo-file-link { font-size: 9px; margin-top: 4px; }
  .selected-logo .logo-image { width: 185px; height: 49px; }
  .hero-book .paper-cover strong { font-size: 27px; }
  .product-art-bg .paper-cover strong { font-size: 17px; line-height: 1.35; }
  .product-art-bg .saddle-staple { width: 3px; left: 1px; }
}

/* 2026-09-20: 상품 대화상자의 그림을 CSS 도형에서 제품 사진으로 바꿨다(사용자 지시).
   사진은 정사각형·투명 배경이라 bg-* 색 위에 그대로 얹힌다.

   처음에 height:88% 로 줬더니 사진이 잘렸다. .product-dialog-art 는
   display:grid + place-items:center 인데, align-self 가 center 인 그리드 항목에서는
   퍼센트 높이의 기준 높이가 잡히지 않아 원본 560px 이 그대로 나오고
   overflow:hidden 에 잘린다. 그래서 크기를 픽셀로 직접 준다.

   띠 높이도 넓혔다(기본 210px -> 268px, 700px 이하 199px -> 232px).
   사진은 띠보다 28px 작게 두어 위아래에 여백이 남는다. */
.product-dialog-art { height: 268px; }
.product-dialog-art .product-photo { width: 240px; height: 240px; max-width: 100%; object-fit: contain; display: block; }

@media(max-width:700px) {
  .product-dialog-art { height: 232px; }
  .product-dialog-art .product-photo { width: 204px; height: 204px; }
}