/* BUILD 133: exact cascade consolidation of the production banner layers. Source order is preserved. */

/* source: 4q-launch-banner-editorial-r1.css */
/* 4Q 123 / launch-banner editorial visual refinement only.
   Scoped to the exact current launch title. No data or route changes. */
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) {
  min-height: 164px;
  max-height: none;
  padding: 21px 32px;
  background: linear-gradient(108deg,#fffdf9 0%,#fcf7f6 40%,#f4e0e6 100%);
  border: 0;
  isolation:isolate;
  position:relative;
  align-items:center;
  box-sizing:border-box;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image)::after {
  content:"";
  position:absolute;
  right:7%;top:9%;bottom:9%;width:28%;
  background: url('/assets/brand-q-ribbon.webp') no-repeat center / contain;
  opacity:.19;pointer-events:none;z-index:0;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy {
  position:relative;z-index:1;display:flex;align-items:center;
  justify-content:flex-start;gap:0;padding:0;inset:auto;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div {max-width:71%;min-width:0;}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div::before {
  content:"4Q OFFICIAL OPEN";display:block;margin-bottom:9px;
  color:#a45676;font:800 10px/1.3 "DM Sans",sans-serif;letter-spacing:.16em;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-title {
  font-size:clamp(25px,2.6vw,29px);line-height:1.22;
  margin-bottom:9px;letter-spacing:-.055em;color:#36232d;font-weight:850;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) p {
  font-size:13px;line-height:1.65;color:#66545d;max-width:600px;
}
/* The existing whole-card click behavior remains unchanged.
   Visual CTA is decoration only; no nested button/link. */
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div::after {
  content:"첫 이야기 남기기  →";display:table;
  margin-top:14px;padding:12px 18px;min-height:44px;box-sizing:border-box;
  border-radius:10px;background:#683249;color:#fff;
  font:800 13px/20px "Noto Sans KR",sans-serif;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image):hover .promo-copy > div::after {background:#54243a;}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:focus-visible {outline:3px solid #8d4161;outline-offset:-4px;}
@media(max-width:750px) {
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) {
    min-height:190px;max-height:none;padding:20px 19px 30px;
  }
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image)::after {
    right:2%;top:16%;bottom:6%;width:40%;opacity:.12;
  }
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div {max-width:100%;padding-right:0;}
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-title {font-size:22px;margin-bottom:7px;}
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) p {font-size:12px;line-height:1.55;max-width:85%;}
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div::after {margin-top:12px;min-height:44px;}
}
@media(max-width:390px){
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) {min-height:210px;max-height:none;padding:19px 18px 38px;}
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) p {max-width:92%;}
}

/* 4Q BUILD 123 — compact launch carousel slide (R3).
   Replaces R2 visual-only CSS; preserves carousel track and click routing. */
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) {
  min-height: 120px;
  max-height: 148px;
  padding: 14px 25px;
  background: linear-gradient(108deg,#fffdfa 0%,#fcf7f6 47%,#f4e1e8 100%);
  align-items: center;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image)::after {
  right: 8%; top: 12%; bottom: 12%; width: 20%; opacity: .13;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy {align-items:center}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div {max-width:76%}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div::before {
  content:"4Q OFFICIAL OPEN";margin-bottom:5px;font-size:9px;letter-spacing:.13em;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-title {
  font-size:clamp(18px,1.85vw,22px);line-height:1.22;margin-bottom:5px;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) p {
  font-size:11px;line-height:1.5;max-width:560px;
}
/* R2 added a decorative fake CTA; remove it entirely. */
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div::after {
  content:none!important;display:none!important;
}
/* Any actual CTA remains part of the whole-slide click, but is not shown. */
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-action,
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div > a,
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div > button {display:none!important}
@media(max-width:750px) {
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) {
    min-height:132px;max-height:160px;padding:16px 18px;
  }
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image)::after {
    right:3%;top:18%;bottom:12%;width:32%;opacity:.09;
  }
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-copy > div {max-width:100%}
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) .promo-title {font-size:18px;margin-bottom:5px}
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) p {font-size:11px;line-height:1.45;max-width:82%}
}
@media(max-width:390px) {
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) {
    min-height:140px;max-height:160px;padding:15px 17px;
  }
  #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]:not(.has-image) p {max-width:90%}
}


/* source: 4q-banner-trio-r4.css */
/* 4Q 123 banner trio, compact carousel; append after R3, scoped by exact aria-label. */
#home #promo-carousel.promo-strip{min-height:120px}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."],
#home #promo-carousel .promo-item[aria-label="좋은 후기만으로 결정하지 마세요."],
#home #promo-carousel .promo-item[aria-label="결정하기 전, 한 번 더 확인하세요."]{
  min-height:120px;max-height:148px;padding:16px 25px;position:relative;isolation:isolate;box-sizing:border-box;
}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]{background:linear-gradient(105deg,#fffdfa,#faedf2 65%,#f5dfe8)}
#home #promo-carousel .promo-item[aria-label="좋은 후기만으로 결정하지 마세요."]{background:linear-gradient(105deg,#fffdf9,#f9f3e9 68%,#f0e8dc)}
#home #promo-carousel .promo-item[aria-label="결정하기 전, 한 번 더 확인하세요."]{background:linear-gradient(105deg,#fbfdfb,#edf4ee 68%,#e2ece4)}
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-copy{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;padding:0;inset:auto;
}
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-copy>div{width:min(100%,560px);max-width:min(68%,560px);min-width:0}
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-copy>div::before{display:block;font:800 9px/1.2 "DM Sans",sans-serif;letter-spacing:.15em;color:#a65374;margin-bottom:5px}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."] .promo-copy>div::before{content:"4Q OFFICIAL OPEN"}
#home #promo-carousel .promo-item[aria-label="좋은 후기만으로 결정하지 마세요."] .promo-copy>div::before{content:"WHY 4Q"}
#home #promo-carousel .promo-item[aria-label="결정하기 전, 한 번 더 확인하세요."] .promo-copy>div::before{content:"BEFORE YOUR CHOICE"}
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-title{font-size:clamp(19px,1.9vw,23px);line-height:1.24;margin:0 0 5px;letter-spacing:-.05em;color:#38252f}
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) p{max-width:520px;font-size:11.5px;line-height:1.48;color:#65545e;word-break:keep-all}
/* No extra CTA chip or fake button: the entire slide remains the existing keyboard-accessible link. */
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-copy>div::after{content:none!important;display:none!important}
#home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-action{display:none!important}
#home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]::after{content:"";position:absolute;right:7%;top:9%;bottom:9%;width:23%;background:url('/assets/brand-q-ribbon.webp') no-repeat center / contain;opacity:.15;pointer-events:none;z-index:0}
#home #promo-carousel .promo-item[aria-label="좋은 후기만으로 결정하지 마세요."]::after{content:"Q?";position:absolute;right:10%;top:50%;transform:translateY(-50%);font:800 clamp(54px,8vw,100px)/1 Georgia,serif;color:rgba(116,79,73,.13);pointer-events:none}
#home #promo-carousel .promo-item[aria-label="결정하기 전, 한 번 더 확인하세요."]::after{content:"✓  ✓  ✓";position:absolute;right:7%;top:50%;transform:translateY(-50%);font:700 clamp(25px,4vw,52px)/1.2 sans-serif;letter-spacing:.12em;color:rgba(65,98,77,.22);pointer-events:none}
#home #promo-carousel .promo-item:focus-visible{outline:3px solid #823c5b;outline-offset:-3px}
@media(max-width:750px){
 #home #promo-carousel.promo-strip{min-height:140px}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]){min-height:140px;max-height:none;padding:15px 17px 27px}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-copy>div{max-width:85%;width:85%}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-title{font-size:18px}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) p{font-size:10.5px;line-height:1.45;max-width:100%}
 #home #promo-carousel .promo-item[aria-label="4Q, 이제 시작합니다."]::after{right:1%;width:30%;opacity:.12}
 #home #promo-carousel .promo-item[aria-label="좋은 후기만으로 결정하지 마세요."]::after{right:3%;opacity:.55}
 #home #promo-carousel .promo-item[aria-label="결정하기 전, 한 번 더 확인하세요."]::after{right:2%;opacity:.65;font-size:24px;letter-spacing:0}
}
@media(max-width:390px){
 #home #promo-carousel.promo-strip{min-height:154px}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]){min-height:154px;padding:14px 16px 30px}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-copy>div{max-width:91%;width:91%}
 #home #promo-carousel .promo-item:is([aria-label="4Q, 이제 시작합니다."],[aria-label="좋은 후기만으로 결정하지 마세요."],[aria-label="결정하기 전, 한 번 더 확인하세요."]) .promo-title{font-size:17px}
}


/* source: 4q-banner-r5.css */
/* 4Q R5 - injected AFTER R4; presentation/controls only. No banner data writes. */
#home #promo-carousel.promo-strip{min-height:156px}
#home #promo-carousel .promo-item.promo-launch,
#home #promo-carousel .promo-item.promo-why,
#home #promo-carousel .promo-item.promo-guide{min-height:156px;max-height:none;padding:17px 26px 36px;align-items:center;box-sizing:border-box;overflow:hidden}
#home #promo-carousel .promo-item.promo-launch{background:linear-gradient(105deg,#fffdfa,#faedf2 65%,#f5dfe8)}
#home #promo-carousel .promo-item.promo-why{background:linear-gradient(105deg,#fffdf9,#f9f3e9 68%,#f0e8dc)}
#home #promo-carousel .promo-item.promo-guide{background:linear-gradient(105deg,#fbfdfb,#edf4ee 68%,#e2ece4)}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy{width:100%;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;min-width:0}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div{width:min(68%,560px);max-width:560px;min-width:0}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{font-size:clamp(20px,1.9vw,23px);line-height:1.22;margin:0 0 5px}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) p{max-width:520px;font-size:11.5px;line-height:1.45;margin:0}
/* BUILD 123 may render an actual CTA chip: include it in height instead of pretending absent. */
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-cta{margin-top:8px;min-height:30px;padding:5px 12px;box-sizing:border-box}
#home #promo-carousel .promo-item.promo-launch::after{right:7%;width:24%;opacity:.18}
#home #promo-carousel .promo-item.promo-why::after{right:10%;font-size:clamp(48px,7vw,90px)}
#home #promo-carousel .promo-item.promo-guide::after{content:"Q ✓";right:7%;font:700 clamp(34px,5vw,72px)/1 Georgia,serif;letter-spacing:-.06em;color:rgba(65,98,77,.22)}
/* Show dots without consuming slide copy area; control is compact, visually separate. */
#home #promo-carousel .promo-dots{display:flex!important;visibility:visible!important;left:24px;bottom:11px;z-index:5;gap:7px;align-items:center}
#home #promo-carousel .promo-dots button{cursor:pointer;min-width:20px;min-height:16px;background:transparent;position:relative}
#home #promo-carousel .promo-dots button::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:4px;border-radius:4px;background:#c9b6c0}
#home #promo-carousel .promo-dots button.active::after{background:#8d4562}
#home #promo-carousel .promo-controls.r5-controls{display:flex!important;visibility:visible!important;left:auto;right:15px;top:auto;bottom:6px;transform:none;z-index:6;padding:2px 5px;gap:4px;background:rgba(255,255,255,.85)}
#home #promo-carousel .promo-controls.r5-controls #promo-pause{width:31px;height:29px;font-size:12px}
#home #promo-carousel .promo-controls.r5-controls #promo-count{font-size:10px}
#home #promo-carousel button:focus-visible{outline:2px solid #70384f;outline-offset:2px}
#home #promo-carousel .promo-viewport{touch-action:pan-y}
@media(max-width:750px){
 #home #promo-carousel.promo-strip{min-height:164px}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){min-height:164px;max-height:none;padding:16px 17px 33px}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div{width:88%;max-width:88%}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{font-size:17px}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) p{font-size:10.5px;line-height:1.4}
 #home #promo-carousel .promo-item.promo-guide::after{right:3%;font-size:32px}
 #home #promo-carousel .promo-dots{left:17px;bottom:9px}
 #home #promo-carousel .promo-controls.r5-controls{right:9px;bottom:5px}
}
@media(max-width:390px){#home #promo-carousel.promo-strip{min-height:172px}#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){min-height:172px;padding:14px 16px 35px}}
@media(prefers-reduced-motion:reduce){#home #promo-carousel .promo-track{transition:none!important}}


/* source: 4q-banner-r6.css */
/* 4Q R6 — restrained carousel typography. Loaded after R4 and R5. */
#home #promo-carousel.promo-strip {min-height:150px;}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) {
  box-sizing:border-box; min-height:150px; max-height:none; padding:19px 28px 36px;
  border:1px solid #e9e2df; border-radius:16px; display:flex; align-items:center;
  overflow:hidden; box-shadow:none; color:#352930;
}
#home #promo-carousel .promo-item.promo-launch{background:#f8ebef;}
#home #promo-carousel .promo-item.promo-why{background:#f7f3ec;}
#home #promo-carousel .promo-item.promo-guide{background:#f0f3ef;}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy{
  width:100%; min-width:0; flex:1 1 auto; display:flex; align-items:center; position:relative; z-index:2;
}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div{
  width:min(72%,640px); max-width:640px; min-width:0;
}
/* Replace both R4 decorative pseudo label and R5 decorations with one quiet editorial label. */
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div::before{
  display:block!important; margin:0 0 7px; font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:.09em; color:#92536b;
}
#home #promo-carousel .promo-item.promo-launch .promo-copy>div::before{content:'4Q OPEN'!important;}
#home #promo-carousel .promo-item.promo-why .promo-copy>div::before{content:'ABOUT 4Q'!important;}
#home #promo-carousel .promo-item.promo-guide .promo-copy>div::before{content:'Q상식'!important;}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{
  font-size:clamp(20px,1.85vw,23px);font-weight:750;line-height:1.26;letter-spacing:-.035em;
  margin:0 0 6px;color:#34252c;word-break:keep-all;
}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) p{
  font-size:13px; line-height:1.45; color:#675c61; margin:0; max-width:600px;
  word-break:keep-all; overflow-wrap:break-word;
}
/* All actual CTA chips: same minimal treatment. No additional fake CTA. */
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:32px;
  margin-top:9px;padding:5px 12px;box-sizing:border-box;border-radius:8px;
  font-size:12px;font-weight:700;color:#573343;background:#fff;border:1px solid #e8dade;
  box-shadow:none;white-space:nowrap;
}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-action{display:none!important;}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div::after{content:none!important;display:none!important;}
/* One genuine Q ribbon on launch; no Q? / checks / generic clip art on other slides. */
#home #promo-carousel .promo-item.promo-launch::after{
  content:''!important;display:block!important;position:absolute;left:auto;right:7%;top:14%;bottom:14%;
  width:22%;transform:none!important;background:url('/assets/brand-q-ribbon.webp') center/contain no-repeat;
  opacity:.13!important;pointer-events:none;z-index:0;
}
#home #promo-carousel .promo-item.promo-why::after,
#home #promo-carousel .promo-item.promo-guide::after{content:none!important;display:none!important;}
/* Preserve R5 dots/pause UI and hover/focus behavior. */
#home #promo-carousel .promo-item:focus-visible{outline:2px solid #723d51;outline-offset:-3px;}
@media(max-width:750px){
 #home #promo-carousel.promo-strip{min-height:166px;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){min-height:166px;max-height:none;padding:17px 18px 38px;border-radius:13px;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div{width:92%;max-width:92%;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{font-size:18px;line-height:1.3;margin-bottom:5px;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) p{font-size:12px;line-height:1.4;max-width:93%;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-cta{min-height:34px;margin-top:8px;}
 #home #promo-carousel .promo-item.promo-launch::after{width:25%;right:1%;top:20%;bottom:20%;opacity:.075!important;}
 #home #promo-carousel .promo-dots{bottom:10px;}
}
@media(max-width:390px){
 #home #promo-carousel.promo-strip{min-height:174px;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){min-height:174px;padding:16px 16px 38px;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{font-size:17px;}
 #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) p{font-size:11.5px;}
}


/* source: 4q-banner-r7.css */
/* 4Q R7 — quiet carousel controls and consistent editorial spacing. Loaded after R6. */
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){
  padding-left:26px!important;padding-right:26px!important;
  border:1px solid #e9e2e2!important;border-radius:16px!important;
  box-shadow:none!important;
}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div{
  width:min(76%,620px)!important;max-width:620px!important;
}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{
  font-size:clamp(19px,1.8vw,22px)!important;line-height:1.25!important;letter-spacing:-.025em!important;
}
#home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-cta{
  min-height:32px!important;border-radius:8px!important;box-shadow:none!important;
}
/* No bottom-right pill/counter. Keep a discreet pause action next to the slide indicators for accessibility. */
#home #promo-carousel .promo-controls.r5-controls{
  display:flex!important;position:absolute!important;
  left:105px!important;right:auto!important;bottom:7px!important;top:auto!important;
  width:auto!important;min-width:0!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;transform:none!important;gap:0!important;z-index:6!important;
}
#home #promo-carousel .promo-controls.r5-controls #promo-count{display:none!important;}
#home #promo-carousel .promo-controls.r5-controls #promo-pause{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:28px!important;height:26px!important;min-width:28px!important;padding:0!important;
  background:transparent!important;border:0!important;border-radius:5px!important;
  box-shadow:none!important;color:#8b6373!important;font-size:12px!important;
}
#home #promo-carousel .promo-controls.r5-controls #promo-pause:hover{background:rgba(107,57,79,.07)!important;}
#home #promo-carousel .promo-controls.r5-controls #promo-pause:focus-visible{
  outline:2px solid #75445b!important;outline-offset:1px!important;
}
@media(max-width:750px){
  #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){padding-left:18px!important;padding-right:18px!important;}
  #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-copy>div{
    width:94%!important;max-width:94%!important;
  }
  #home #promo-carousel .promo-controls.r5-controls{left:96px!important;bottom:5px!important;}
  #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide) .promo-title{font-size:17px!important;}
}
@media(max-width:390px){
  #home #promo-carousel .promo-item:is(.promo-launch,.promo-why,.promo-guide){padding-left:16px!important;padding-right:16px!important;}
  #home #promo-carousel .promo-controls.r5-controls{left:95px!important;}
}


/* source: 4q-banner-r8-fix.css */
/* R8 FIX: remove pause and count UI, keep manually-selectable dots */
#home #promo-carousel #promo-pause,
#home #promo-carousel .promo-play-toggle,
#home #promo-carousel .promo-status,
#home #promo-carousel .promo-controls,
#home #promo-pause,
#home .promo-play-toggle,
#home .promo-status,
#home .promo-controls { display:none !important; }
/* Existing R5/R7 layouts remain unchanged to avoid another cascade conflict. */
@media (max-width: 750px) {
  #home #promo-carousel .promo-item { overflow: hidden; }
}


/* source: 4q-banner-auto-124.css */
/* 4Q BUILD 124: autoplay only, with unobtrusive slide-position dots. */
#promo-carousel .promo-controls,
#promo-carousel .promo-control,
#promo-carousel .promo-play-toggle,
#promo-carousel .promo-status,
#promo-carousel .promo-rotation,
#promo-carousel #promo-pause,
#promo-carousel .promo-pause,
#promo-carousel .promo-prev,
#promo-carousel .promo-next,
#promo-carousel button[aria-label*="이전 배너"],
#promo-carousel button[aria-label*="다음 배너"],
#promo-carousel button[aria-label*="일시정지"],
#promo-carousel button[aria-label*="자동 슬라이드 재생"] {
  display:none !important;
}
/* Override the previous R7 rule (#home #promo-carousel .promo-controls.r5-controls),
   which used !important and otherwise resurrects the pause icon. */
html body #home #promo-carousel .promo-controls.r5-controls,
html body #home #promo-carousel .promo-controls.r5-controls #promo-pause,
html body #home #promo-carousel .promo-controls.r5-controls #promo-count {
  display:none !important;
}
/* Remove decorative CTA arrows, but preserve text and click destinations. */
#promo-carousel .promo-cta::before,
#promo-carousel .promo-cta::after,
#promo-carousel .promo-action::after,
#promo-carousel .promo-copy a::after,
#promo-carousel .promo-copy button::after,
#promo-carousel [data-promo-cta]::after {content:none !important;display:none !important;}
#promo-carousel .promo-cta .cta-arrow,
#promo-carousel .promo-cta .arrow,
#promo-carousel .promo-cta .icon-arrow,
#promo-carousel .promo-copy a .cta-arrow,
#promo-carousel .promo-copy a .arrow,
#promo-carousel .promo-copy button .cta-arrow {display:none !important;}
/* Keep three discreet bars showing which banner is displayed. */
#promo-carousel .promo-dots,
#promo-carousel .promo-indicators {display:flex;align-items:center;}


/* source: 4q-banner-r10.css */
/* 4Q 123 Banner R10: one continuous pastel gradient, no internal card split. */
html body #home #promo-carousel.promo-strip,
html body #promo-carousel.promo-strip {
  background: linear-gradient(112deg,#fffbfb 0%,#fbf5f7 38%,#f6e9ef 74%,#f3e2eb 100%) !important;
  border: 1px solid rgba(153,107,130,.15) !important;
  border-radius: 17px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body #home #promo-carousel .promo-item,
html body #promo-carousel .promo-item,
html body #home #promo-carousel .promo-item.promo-launch,
html body #home #promo-carousel .promo-item.promo-why,
html body #home #promo-carousel .promo-item.promo-guide,
html body #promo-carousel .promo-item.theme-2,
html body #promo-carousel .promo-item.theme-3,
html body #promo-carousel .promo-item.sponsored {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body #home #promo-carousel .promo-viewport,
html body #promo-carousel .promo-viewport,
html body #home #promo-carousel .promo-track,
html body #promo-carousel .promo-track,
html body #home #promo-carousel .promo-slide,
html body #promo-carousel .promo-slide,
html body #home #promo-carousel .promo-footer,
html body #promo-carousel .promo-footer {
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
/* Hide legacy R5/R7/R8/R9 playback / previous-next / status UI entirely. */
html body #home #promo-carousel .promo-controls,
html body #promo-carousel .promo-controls,
html body #home #promo-carousel .promo-controls.r5-controls,
html body #promo-carousel .promo-controls.r5-controls,
html body #promo-carousel #promo-pause,
html body #promo-carousel .promo-pause,
html body #promo-carousel .promo-play-toggle,
html body #promo-carousel .promo-control,
html body #promo-carousel .promo-status,
html body #promo-carousel .promo-rotation,
html body #promo-carousel .promo-prev,
html body #promo-carousel .promo-next,
html body #promo-carousel .promo-arrow,
html body #promo-carousel .promo-navigation,
html body #promo-carousel #promo-count,
html body #promo-carousel button[aria-label*="일시정지"],
html body #promo-carousel button[aria-label*="재생"],
html body #promo-carousel button[aria-label*="이전 배너"],
html body #promo-carousel button[aria-label*="다음 배너"] {
  display: none !important;
  visibility: hidden !important;
}
/* No pseudo-element or icon arrows on CTA buttons/links. */
html body #promo-carousel .promo-cta::after,
html body #promo-carousel .promo-copy a::after,
html body #promo-carousel .promo-copy button::after,
html body #promo-carousel .promo-action::after,
html body #promo-carousel [data-promo-cta]::after {
  content: none !important;
  display: none !important;
}
html body #promo-carousel .promo-cta .cta-arrow,
html body #promo-carousel .promo-cta .icon-arrow,
html body #promo-carousel .promo-cta .arrow,
html body #promo-carousel .promo-copy a .cta-arrow,
html body #promo-carousel .promo-copy a .icon-arrow,
html body #promo-carousel .promo-copy a .arrow {display:none !important;}
/* Keep only the three position bars, with no separate solid footer band. */
html body #home #promo-carousel #promo-dots,
html body #promo-carousel #promo-dots,
html body #home #promo-carousel .promo-indicators,
html body #promo-carousel .promo-indicators {
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 7px !important;
  z-index: 10 !important;
}
html body #promo-carousel #promo-dots[hidden] {display:none !important;}
/* Preserve the Q ribbon artwork and its existing opacity; do not override ::after art. */
@media(max-width:750px){
  html body #home #promo-carousel.promo-strip,
  html body #promo-carousel.promo-strip {border-radius:15px !important;}
}