/* ToYouPick Korean, Explained FINAL v6
   Layout coordinates are locked to the first approved PC/mobile mockups. */
.kx6{
  --pink:#f45f98; --ink:#171717;
  position:relative; overflow:hidden;
  width:min(1031px,calc(100% - 32px)); aspect-ratio:1031/168;
  min-height:140px; margin:24px auto 26px;
  border-radius:16px;
  background:linear-gradient(105deg,#fff6f3 0%,#fff0f2 58%,#ffedf2 100%);
  color:var(--ink);
  box-shadow:0 5px 18px rgba(230,105,145,.05);
}
.kx6-brand{
  position:absolute; left:2.4%; top:14%; width:16%;
  font:600 clamp(22px,2.2vw,34px)/.95 "Segoe Script","Brush Script MT",cursive;
  color:var(--pink); transform:rotate(-4deg);
}
.kx6-today{
  position:absolute; left:4.4%; top:66%; font-weight:800;
  font-size:clamp(11px,1vw,14px);
}
.kx6-today::after{content:" 〰"; color:var(--pink)}
.kx6-art{
  position:absolute; left:19.2%; top:4%; width:26%; height:96%;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
}
.kx6-art img{
  display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom;
}
.kx6-copy{position:absolute; left:46.1%; top:10%; width:37.5%}
.kx6-title{font-size:clamp(22px,2.25vw,32px);line-height:1.04;margin:0 0 4px;font-weight:900;letter-spacing:-.8px}
.kx6-roman{font-size:clamp(11px,1vw,14px);color:#555;margin-bottom:9px}
.kx6-text{font-size:clamp(11px,1vw,14px);line-height:1.5;margin:0}
.kx6-action{position:absolute;right:1.8%;bottom:12%;width:13.5%;text-align:center}
.kx6-more{display:inline-flex;align-items:center;justify-content:center;background:var(--pink);color:#171717!important;text-decoration:none;font-weight:850;font-size:clamp(10px,.9vw,13px);padding:.7em 1.15em;border-radius:999px;white-space:nowrap}
.kx6-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#ea6597;font-size:21px;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer}
.kx6-prev{left:5px}.kx6-next{right:5px}
.kx6-count{position:absolute;right:12px;bottom:4px;font-size:10px;color:#aaa}

@media(max-width:700px){
 .kx6{
   width:calc(100% - 28px); aspect-ratio:386/229; min-height:0;
   margin:18px 14px 22px; border-radius:15px;
   background:linear-gradient(112deg,#fff4f2,#ffeaf1);
 }
 .kx6-brand{
   left:31%; top:7%; width:42%; transform:none;
   font-size:clamp(12px,3.5vw,14px); line-height:1;
 }
 .kx6-brand br{display:none}
 .kx6-today{
   left:4.2%; top:7%; color:var(--pink);
   font-size:clamp(13px,4vw,16px);
 }
 .kx6-today::after{content:""}
 .kx6-art{
   left:2.8%; top:23%; width:42%; height:70%;
 }
 .kx6-copy{left:49.2%; top:23%; width:46%}
 .kx6-title{font-size:clamp(23px,7vw,28px);margin-bottom:3px}
 .kx6-roman{font-size:clamp(11px,3.2vw,13px);margin-bottom:7px}
 .kx6-text{
   font-size:clamp(12px,3.5vw,14px);line-height:1.42;
   display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden
 }
 .kx6-action{left:49.2%;right:auto;bottom:7%;width:auto}
 .kx6-more{font-size:clamp(11px,3.2vw,13px);padding:.72em 1.3em}
 .kx6-arrow{width:28px;height:28px;font-size:20px}
 .kx6-prev{left:3px}.kx6-next{right:3px}
 .kx6-count{display:none}
}


/* v8 — artwork normalization
   Items 02–09 were re-cropped to remove large blank canvas.
   Keep every illustration large and centered on both PC and mobile. */
.kx6-art img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
}

/* v133 — clickable Korean artwork */
.kx6-art{cursor:pointer}
.kx6-art:focus-visible{outline:2px solid #ff5b91;outline-offset:3px;border-radius:12px}

/* v134 — Korean Explained visual polish */
.kx6-art{background:transparent}
.kx6-art img{
  background:transparent;
  object-position:center center;
}
.kx6-copy{top:14%}
@media(max-width:700px){
  .kx6-copy{top:25%}
  .kx6-art{top:22%;height:72%}
}

/* v156 — 대문 카드 정리
   1) '자세히 보기' 버튼이 본문 4번째 줄을 덮던 문제
   2) 'Today's Korean' 과 필기체 'Korean, Explained' 가 겹치던 문제
   3) 진한 핑크 버튼이 히어로 CTA 와 같은 세기라 시선이 분산되던 문제 → 테두리형으로 */
.kx6-more{
  background:#fff;
  color:var(--pink)!important;
  border:1.5px solid var(--pink);
  box-shadow:none;
}
.kx6-more:hover{background:#fff5f8}
@media(max-width:700px){
  /* 필기체 브랜드를 오른쪽 끝으로 물려 제목과 겹치지 않게 */
  .kx6-brand{left:auto; right:4.2%; width:44%; text-align:right}
  /* 본문 3줄 + 버튼 자리 확보 */
  .kx6-copy{top:23%; width:47.5%}
  .kx6-text{-webkit-line-clamp:3; font-size:clamp(11.5px,3.25vw,13px); overflow-wrap:break-word}
  .kx6-action{left:49.2%; right:auto; bottom:6%; width:auto}
}