/* 2026-10-08 artui(그록 봇): /article (view2.html) 레이아웃 보강
1) 구매 카드 아래 포인트 미션 카드 (.cda-pm, 상품 페이지 view.html 의 pmbtn2 버튼/카드 스타일을 .cda 범위로 복사)
2) 넓은 화면 왼쪽 '캠퍼스다운 읽을거리' (.cda-reads, 서버 렌더 cd_sidecards.block_html + cd_sidecards.css). 1400px 미만: 본문 아래로
3) 오른쪽 세로 광고(160x600, slot 5643080660)를 가운데 카드 바로 오른쪽 sticky 상자(.cda-adrail, '광고' 라벨)로. 1280px 미만: 숨김(예전처럼)
광고 iframe/ins 자체는 손대지 않음. 롤백: view2.html 의 artui 부분 + 이 파일 링크 삭제 */
.cda-stage{position:relative}
/* ---- 1) 포인트 미션 카드 ---- */
.cda-pm{margin:20px 0 44px} /* 아래 광고(.ad-container margin 28px)와 최소 44px */
.cda-pm .cda-hook__block{align-items:center;padding:18px 20px 18px 18px;
background:linear-gradient(145deg,#fffaf0 0%,#fff6e5 55%,#fff 100%);border-color:rgba(240,150,30,.24)}
.cda-pm .cda-hook__block::before{background:linear-gradient(90deg,#ffc23d,#ff8f1f,#ff5c8a)}
.cda-pm .cda-hook__icon{background:linear-gradient(135deg,#ffc23d,#ff8f1f);color:#fff;box-shadow:0 6px 14px rgba(240,138,18,.30)}
.cda-pm .cda-hook__txt{margin:0 0 12px}
.cda .cda-pm a.cda-pm__btn,.cda .cda-pm a.cda-pm__btn:link,.cda .cda-pm a.cda-pm__btn:visited{
position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;
width:100%;max-width:520px;box-sizing:border-box;min-height:48px;padding:11px 16px;border-radius:12px;
font-size:14.5px;font-weight:800;line-height:1.45;letter-spacing:-.01em;text-decoration:none;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;text-align:center;
background:linear-gradient(135deg,#ffd166 0%,#ffb238 48%,#ff8f1f 100%);border:1px solid #f08a12;
color:#3d1f00;-webkit-text-fill-color:#3d1f00;
box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(240,138,18,.30),0 1px 2px rgba(120,60,0,.18);
transition:transform .18s ease,box-shadow .18s ease}
.cda .cda-pm a.cda-pm__btn::before{content:"";position:absolute;inset:0 0 50% 0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));border-radius:inherit}
.cda .cda-pm a.cda-pm__btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-18deg);transition:left .6s ease;opacity:.9}
.cda .cda-pm a.cda-pm__btn:hover,.cda .cda-pm a.cda-pm__btn:focus{
background:linear-gradient(135deg,#ffcb52 0%,#ffa726 48%,#fb8312 100%);border-color:#e57c08;color:#2e1700;-webkit-text-fill-color:#2e1700}
.cda .cda-pm a.cda-pm__btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 22px rgba(240,138,18,.36),0 2px 4px rgba(120,60,0,.18)}
.cda .cda-pm a.cda-pm__btn:hover::after{left:125%}
.cda .cda-pm a.cda-pm__btn:active{transform:translateY(0)}
.cda .cda-pm a.cda-pm__btn:focus-visible{outline:3px solid #ffcf70;outline-offset:2px}
.cda-pm .cdv-mission__coin{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;
font:900 14px/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#8a4a00;-webkit-text-fill-color:#8a4a00;
background:radial-gradient(circle at 35% 30%,#fffbe6 0%,#ffe680 38%,#ffc93c 70%,#f2a50c 100%);
border:2px solid #fff4c2;box-shadow:0 0 0 1px #d98a06,0 2px 4px rgba(120,60,0,.28),inset 0 -2px 0 rgba(180,100,0,.25)}
.cda-pm .cdv-mission__label{min-width:0;text-align:center}
@media (max-width:720px){
.cda-pm{margin:16px 0 40px}
.cda-pm .cda-hook__block{align-items:flex-start;padding:14px}
.cda .cda-pm a.cda-pm__btn{max-width:none}
}
/* ---- 2) 캠퍼스다운 읽을거리 (기본 = 좁은 화면: 본문 아래, 광고와 여백) ---- */
.cda-reads{margin:40px 0 36px}
.cda-reads .cd-sidecards{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:18px;border-top:1px solid #eef0f6}
.cda-reads .cd-sidecards__eyebrow{grid-column:1 / -1}
.cda-reads .cd-sc__it--top .cd-sc__th{aspect-ratio:12 / 5}
.cda-reads .cd-sc__pt{color:#1f2937}
@media (max-width:520px){.cda-reads .cd-sidecards{grid-template-columns:1fr}}
@media (min-width:1400px){
.cda-reads{position:absolute;top:0;bottom:0;right:calc(100% + 24px);width:236px;margin:0}
.cda-reads .cd-sidecards{display:flex;flex-direction:column;gap:10px;padding-top:0;border-top:0}
.cda-reads .cd-sc__it--top .cd-sc__th{aspect-ratio:16 / 9}
}
@media (min-width:1400px) and (min-height:980px){
.cda-reads .cd-sidecards{position:sticky;top:92px}
}
@media (min-width:1600px){.cda-reads{width:256px;right:calc(100% + 28px)}}
/* ---- 3) 오른쪽 세로 광고 상자 (가운데 카드 오른쪽 22px, 카드 윗선 맞춤, sticky) ---- */
.cda-adrail{display:none}
@media screen and (min-width:1280px){
.cda-adrail{display:block;position:absolute;top:0;bottom:0;left:calc(100% + 22px);width:184px;z-index:1}
.cda-adrail__box{position:sticky;top:92px;box-sizing:border-box;width:184px;padding:6px 11px 11px;
background:#fff;border:1px solid #e3e6ef;border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cda-adrail__lbl{display:block;margin:0 0 6px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;color:#8a8fa0;text-align:left}
.cda-adrail__slot{width:160px;min-height:600px;overflow:hidden}
/* 구매 버튼과 광고 사이 150px 이상: 카드 오른쪽 칸 안쪽 여백 */
.cda-stage .cda-hero__grid{padding-right:84px}
.cda-stage .cda-ctabox{padding-right:120px}
}
/* 1280~1359px: 카드+광고 상자가 가로 넘침 없이 들어가도록 가운데 칸만 조금 좁힘 (가운데 정렬 유지) */
@media screen and (min-width:1280px) and (max-width:1359px){.cda-main{max-width:836px}}
/* 참고문헌 위키 버튼(refwiki) 모바일 가로 넘침 2px 보정: width:100% + padding */
.cda a.cd-refs__wiki-btn{box-sizing:border-box;max-width:100%;white-space:normal;text-align:center}
@media (prefers-reduced-motion:reduce){
.cda .cda-pm a.cda-pm__btn,.cda .cda-pm a.cda-pm__btn::after{transition:none}
.cda .cda-pm a.cda-pm__btn:hover{transform:none}
}