/* ===== AI/뉴스 — 바이브코딩 팁 카드뷰어 ===== */
:root{
  --teal:#0B3D3A;
  --teal-2:#0F4B47;
  --cream:#FBF3E7;
  --coral:#FF6B4A;
  --yellow:#FFD23F;
  --ink:#141A19;
  --muted:#5C6E6B;
  --paper:#FAF7F2;
  --line:#E4DCCB;
  --card-bg:#FFFFFF;

  --display:'Bricolage Grotesque', ui-sans-serif, sans-serif;
  --body:'Inter', ui-sans-serif, sans-serif;

  --wrap:1040px;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
a{color:inherit;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

/* cover hero */
.cover{background:radial-gradient(1100px 500px at 85% -10%, var(--teal-2), var(--teal) 60%); color:var(--cream); position:relative; overflow:hidden;}
.cover::after{
  content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  background:var(--coral); opacity:0.18; border-radius:50%; filter:blur(10px);
}
.cover-inner{padding:36px 24px 44px; position:relative;}
.cover-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;}
.logo{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:0.02em;}
.issue-tag{
  font-size:11px; letter-spacing:0.1em; font-weight:600; color:var(--teal);
  background:var(--yellow); padding:5px 10px; border-radius:999px; transform:rotate(-4deg); display:inline-block;
}
.cover-title{font-family:var(--display); font-weight:800; font-size:clamp(30px,6vw,48px); line-height:1.15; margin:0 0 16px;}
.accent{color:var(--coral);}
.cover-dek{max-width:48ch; font-size:15px; color:rgba(251,243,231,0.82); margin:0;}

/* date bar */
.date-bar{padding:22px 24px 4px; display:flex; flex-direction:column; gap:12px;}
.date-search input{
  width:100%; font-family:var(--body); font-size:14px; padding:10px 14px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.date-chips{display:flex; gap:8px; flex-wrap:wrap;}
.date-chip{
  font-family:var(--body); font-size:12.5px; font-weight:600; padding:6px 12px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted);
  cursor:pointer;
}
.date-chip.active{background:var(--teal); border-color:var(--teal); color:var(--cream);}
.date-chip:hover{border-color:var(--coral);}

/* carousel */
main{padding:28px 24px 8px;}
.rail-label{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--muted); margin:0 0 16px;}

.carousel-shell{position:relative; display:flex; align-items:center; gap:8px;}
.carousel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px;
  border-radius:20px; scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none;}

.slide{
  flex:0 0 100%; scroll-snap-align:center; background:var(--card-bg);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
}
.slide img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.slide-body{padding:28px 32px 34px;}
.slide-step{font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:0.08em; color:var(--coral);}
.slide-body h2{font-family:var(--display); font-weight:700; font-size:30px; line-height:1.3; margin:10px 0 16px;}
.slide-text{font-size:17px; margin:0 0 18px; color:var(--ink);}
.slide-takeaway{
  font-size:16px; font-weight:600; margin:0; padding:16px 18px;
  background:#F1EFE6; border-radius:12px; color:var(--teal-2);
}

.nav-btn{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:#fff; font-size:22px; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.nav-btn:hover{border-color:var(--coral); color:var(--coral);}

.dots{display:flex; justify-content:center; gap:6px; margin:16px 0 8px;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--line);}
.dot.active{background:var(--coral); width:18px; border-radius:4px; transition:width 0.2s;}

.carousel-error{color:var(--muted); font-size:13px;}

.footer{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:32px 24px; font-size:12px; color:var(--muted);}

@media (min-width:800px){
  .slide{display:grid; grid-template-columns:1fr 1fr; min-height:560px;}
  .slide img{aspect-ratio:auto; height:100%;}
  .slide-body{display:flex; flex-direction:column; justify-content:center;}
}