/* v1.18 (2026-10-15 Claude) 첫 화면 신간 광고 영역
   - 높이를 1.6배로 (PC 132 → 211px, 휴대폰 104 → 166px)
   - 오른쪽 5분의 1은 슬라이드와 따로 서 있는 「광고 중인 책」 목록 (다섯 자리, 1분마다 맨 위가 맨 아래로)
   - 책 제목은 25자까지, 두 줄까지 들어가게 자리를 잡는다 */
.adzone.adzone-v118{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);align-items:stretch}
.home-luxe .adzone-v118 .adroll{height:211px;border-radius:0 0 0 16px}
.adzone-v118 .adside{
  min-width:0;display:flex;flex-direction:column;
  padding:10px 14px 8px;
  border:1px solid rgba(112,85,135,.12);border-left:0;border-radius:0 0 16px 0;
  background:linear-gradient(180deg,#fffafd 0%,#f7f2fb 100%);
  box-shadow:0 12px 28px rgba(90,67,104,.06);
}
.adzone-v118 .adside-head{
  margin:0 0 4px;font:700 10.5px/1.4 var(--font-sans);letter-spacing:.08em;color:#7a4bb0;
}
.adzone-v118 .adside-list{
  position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  list-style:none;margin:0;padding:0;
}
.adzone-v118 .adside-list li{
  flex:1 1 0;min-height:0;display:flex;align-items:center;
  border-top:1px solid rgba(122,75,176,.12);
}
.adzone-v118 .adside-list li:first-child{border-top:0}
.adzone-v118 .adside-list a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  position:relative;padding-left:12px;
  font:600 12.5px/1.3 var(--font-sans);color:#352c45;text-decoration:none;word-break:keep-all;overflow-wrap:anywhere;
}
.adzone-v118 .adside-list a:before{
  content:"";position:absolute;left:1px;top:.5em;width:5px;height:5px;transform:rotate(45deg);background:#c27aa8;
}
.adzone-v118 .adside-list a:hover{color:#7a4bb0}
.adzone-v118 .adside-list li.is-empty a{color:#9a90a6;font-weight:500}
.adzone-v118 .adside-list li.is-empty a:before{background:#d8cde3}
/* 1분마다 한 칸 위로 — 맨 위 책이 사라지며 아래에 다시 붙는다 */
.adzone-v118 .adside-list.is-moving li{transition:transform .7s ease,opacity .7s ease}
.adzone-v118 .adside-list li.is-leaving{opacity:0}

@media (max-width:700px){
  .adzone.adzone-v118{grid-template-columns:1fr}
  .home-luxe .adzone-v118 .adroll{height:166px;border-radius:0}
  .adzone-v118 .adside{border-left:1px solid rgba(112,85,135,.12);border-top:0;border-radius:0 0 14px 14px;padding:9px 13px 6px}
  .adzone-v118 .adside-list{flex:none;height:auto;overflow:hidden}
  .adzone-v118 .adside-list li{flex:none;padding:6px 0}
  .adzone-v118 .adside-list a{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .adzone-v118 .adside-list.is-moving li{transition:none}
}

/* v1.18.1 (2026-10-15 Claude) 「광고 중인 책」 글자를 빼고 그 자리까지 책 제목을 키운다.
   칸 폭에 맞춰 글씨가 커지고 작아진다(PC 넓은 화면 15px, 좁은 PC 12px 안팎) — 25자가 두 줄 안에 들어가게. */
.adzone-v118 .adside{container-type:inline-size;padding:8px 14px 6px}
.adzone-v118 .adside-list a{font-size:clamp(12px,6.4cqw,15px);line-height:1.28;padding-left:13px}
.adzone-v118 .adside-list a:before{top:.52em}
@media (max-width:700px){
  .adzone-v118 .adside-list a{font-size:14px}
}

/* v1.19 (2026-10-15 Claude) 「고급 서재의 오래된 금테 액자」 — ChatGPT 디자인 자산(flos_adside_design_pack)
   벨벳 바탕 + 앤티크 골드 테두리(9조각, 모서리 그대로·변만 늘어남) + 금빛 다이아몬드 표식 + 금선 구분선.
   테두리는 목록이 1분마다 움직여도 그대로 있게 칸(.adside)의 ::after에 그린다. 글자는 HTML 그대로(고운바탕). */
.adzone-v118 .adside{
  position:relative;isolation:isolate;
  padding:13px 15px 11px;border:0;border-radius:0 0 16px 0;
  background:
    linear-gradient(180deg,rgba(74,46,57,.42) 0%,rgba(52,30,42,.58) 100%),
    url("/assets/img/adside-velvet.webp") center/160px repeat,#4a2e39;
  box-shadow:0 12px 28px rgba(60,30,44,.16),inset 0 0 26px rgba(20,6,14,.45);
}
.adzone-v118 .adside:after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border:24px solid transparent;border-image:url("/assets/img/adside-frame.webp") 48 stretch;
}
.adzone-v118 .adside:before{
  content:"";position:absolute;z-index:3;pointer-events:none;
  left:50%;top:1px;width:40px;height:17px;transform:translateX(-50%);
  background:url("/assets/img/adside-crest.webp") center/contain no-repeat;
  filter:drop-shadow(0 1px 1px rgba(20,6,14,.5));
}
.adzone-v118 .adside-list li{border-top:0}
.adzone-v118 .adside-list li{position:relative}
.adzone-v118 .adside-list li+li:before{
  content:"";position:absolute;left:6%;right:6%;top:-3px;height:7px;pointer-events:none;
  background:url("/assets/img/adside-mark.webp") center/6px 7px no-repeat,
    linear-gradient(90deg,rgba(169,134,73,0) 0%,rgba(169,134,73,.75) 18%,rgba(169,134,73,.75) 82%,rgba(169,134,73,0) 100%) center/100% 1px no-repeat;
}
.adzone-v118 .adside-list a{
  padding-left:15px;font-size:clamp(12px,6cqw,14px);line-height:1.27;
  font-family:"Gowun Batang",var(--font-serif);font-weight:700;color:#f5ebdd;
  text-shadow:0 1px 2px rgba(20,6,14,.55);
}
.adzone-v118 .adside-list a:before{
  left:0;top:.36em;width:10px;height:11px;transform:none;
  background:url("/assets/img/adside-mark.webp") center/contain no-repeat;
}
.adzone-v118 .adside-list a:hover{color:#fff4e4;text-decoration:underline;text-decoration-color:rgba(197,154,82,.7);text-underline-offset:3px}
.adzone-v118 .adside-list li.is-empty a{color:#bfaf9d;font-weight:400;opacity:.78}
.adzone-v118 .adside-list li.is-empty a:before{background:url("/assets/img/adside-mark.webp") center/contain no-repeat;opacity:.45}
@media (max-width:700px){
  .adzone-v118 .adside{border:0;border-radius:0 0 14px 14px;padding:16px 18px 13px}
  .adzone-v118 .adside-list li{padding:7px 0}
}

/* v1.20 (2026-10-16 Claude) 신간 광고 그림 비율을 PC·휴대폰 모두 9:2로 고정 (이상준님: "pc광고이미지비율과 모바일광고이미지 비율을 정확히 맞추자.
   모바일에선 비율대로 그대로 축소되는 거지. 그래야 광고주들이 pc비율에 맞는 이미지 하나만 만들면 되잖아.")
   기준은 지금 넓은 PC의 슬라이드(약 953×211). 높이를 고정하지 않고 비율로 정해서, 화면 폭이 줄면 그대로 함께 줄어든다.
   PC는 남는 폭을 오른쪽 책 목록에, 휴대폰 책 목록 칸은 다음 단계에서 따로 만든다(지금은 아래에 그대로). 광고 신청 화면 미리보기도 같은 9:2. */
.adzone.adzone-v118{align-items:start}
.home-luxe .adzone-v118 .adroll{height:auto;aspect-ratio:9/2}
.adzone-v118 .adside{align-self:stretch}
@media (max-width:700px){
  .home-luxe .adzone-v118 .adroll{height:auto;aspect-ratio:9/2}
  .home-luxe .adzone-v118 .adslide:not(.adslide-creative){padding:4px 12px 15px;gap:1px}
  .home-luxe .adzone-v118 .adslide .tag,.home-luxe .adzone-v118 .adslide .desc{display:none}
  .home-luxe .adzone-v118 .adslide .label{font-size:15px}
  .home-luxe .adzone-v118 .adslide .meta{font-size:9px}
  .adzone-v118 .adcontrols{bottom:4px;gap:7px}
  .adzone-v118 .addots button{width:6px;height:6px}
  .adzone-v118 .addots button[aria-current="true"]{width:14px}
  .adzone-v118 .adstop{width:18px;height:18px;font-size:8px}
}

/* v1.21 (2026-10-16 Claude) 휴대폰 — 신간 광고 슬라이드(9:2)를 가운데 두고 금테 벨벳 액자가 빙 둘러싼다.
   이상준님: "모바일 신간광고영역을 비율 그대로 축소해서 가운데 위치시키고 그걸 금테두리로 되고 안이 빈 막대로 둘러싸고
   그 빈 막대 속 공간에 책 제목 5개 1분에 한 번씩 순환시켜. 5개 책제목은 항상 노출되어야 해."
   위 막대에 두 권(왼쪽·오른쪽), 아래 막대에 세 권(오른쪽·가운데·왼쪽). 1분마다 시계 방향으로 한 칸씩 돈다(flos-home-adside-v1.js).
   액자(.adside)는 광고 영역 전체를 덮는 뒤판, 슬라이드는 그 위 가운데. 칸 자리는 li의 순서(nth-child)로 정한다. */
@media (max-width:700px){
  .adzone.adzone-v118{display:block;position:relative;padding:30px 14px}
  .home-luxe .adzone-v118 .adroll{
    position:relative;z-index:3;margin:0;border-radius:4px;
    border:1px solid rgba(197,154,82,.55);box-shadow:0 0 0 1px rgba(20,6,14,.35),0 3px 10px rgba(20,6,14,.35);
  }
  .adzone-v118 .adside{position:absolute;inset:0;z-index:1;padding:0;border-radius:14px;overflow:hidden}
  .adzone-v118 .adside:after{border-width:18px}
  .adzone-v118 .adside:before{display:none}
  .adzone-v118 .adside-list{position:absolute;inset:0;display:block;height:auto;overflow:visible}
  .adzone-v118 .adside-list li{
    position:absolute;height:30px;padding:0;display:flex;align-items:center;justify-content:center;
    transition:opacity .45s ease;
  }
  .adzone-v118 .adside-list li+li:before{display:none}
  .adzone-v118 .adside-list li:nth-child(1){top:0;left:20px;width:calc(50% - 20px)}
  .adzone-v118 .adside-list li:nth-child(2){top:0;left:50%;width:calc(50% - 20px)}
  .adzone-v118 .adside-list li:nth-child(3){bottom:0;right:20px;width:calc((100% - 40px)/3)}
  .adzone-v118 .adside-list li:nth-child(4){bottom:0;left:calc(20px + (100% - 40px)/3);width:calc((100% - 40px)/3)}
  .adzone-v118 .adside-list li:nth-child(5){bottom:0;left:20px;width:calc((100% - 40px)/3)}
  .adzone-v118 .adside-list a{
    display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    font-size:11.5px;line-height:1.3;padding-left:12px;
  }
  .adzone-v118 .adside-list a:before{top:.25em;width:8px;height:9px}
  .adzone-v118 .adside-list.is-fading li{opacity:0}
}

/* v1.22 (2026-10-16 Claude) 휴대폰 액자 막대의 책 제목 = 프리텐다드 600, 10px (이상준님: "프린텐다드600의 10px로 가자. 모바일 말이야.")
   고운바탕 700 11.5px보다 글자 폭이 좁아 한 칸에 두세 자 더 들어간다. PC 오른쪽 목록은 고운바탕 그대로. */
@media (max-width:700px){
  .adzone-v118 .adside-list a{
    font-family:var(--font-sans);font-weight:600;font-size:10px;line-height:1.3;letter-spacing:-.02em;
    padding-left:11px;
  }
  .adzone-v118 .adside-list li.is-empty a{font-weight:500}
  .adzone-v118 .adside-list a:before{top:.2em;width:7px;height:8px}
}