/* opillusion — 인지착각 콘텐츠 (세모테 disc 톤: #7454B6 계열, 차분·깔끔) */
body { background:#f7f6fb; color:#3a3350; font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif; }
.opi-wrap { max-width:760px; padding-bottom:50px; }

.opi-nav { background:#fff; border:1px solid #e6e1f2; border-radius:10px; margin-top:14px; }
.opi-nav .navbar-brand img { height:28px; }
.opi-nav .nav > li > a { font-size:13.5px; font-weight:700; color:#6b6386; }
.opi-nav .nav > li.active > a,
.opi-nav .nav > li > a:hover { color:#7454B6; background:#f3f0fa; }

.opi-card { background:#fff; border:1px solid #e6e1f2; border-radius:12px; padding:26px 24px; margin-bottom:16px; }
.opi-hero { text-align:center; }
.opi-kicker { font-size:11px; font-weight:800; letter-spacing:1.4px; color:#a99cd0; }
.opi-h1 { font-size:26px; font-weight:900; color:#2f2947; margin:8px 0 10px; line-height:1.35; }
.opi-h2 { font-size:18px; font-weight:900; color:#2f2947; margin:0 0 14px; }
.opi-h3 { font-size:15px; font-weight:800; color:#7454B6; margin:0 0 8px; }
.opi-lead { font-size:14.5px; line-height:1.8; color:#5d5674; margin:0; }
.opi-muted { color:#8a83a3; }

.opi-figure { text-align:center; margin:20px 0 6px; }
.opi-figure img { max-width:100%; height:auto; border-radius:10px; border:1px solid #ece8f6; }
.opi-caption { font-size:12px; color:#8a83a3; margin-top:8px; }

/* 투표 */
.opi-vote-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px 0 4px; }
.opi-vote-btn { flex:1; min-width:140px; border:2px solid #d9d0ef; background:#fff; border-radius:10px;
  padding:15px 12px; font-size:15px; font-weight:800; color:#4b4468; cursor:pointer; transition:.15s; }
.opi-vote-btn:hover { border-color:#7454B6; background:#f7f4fd; }
.opi-vote-btn.picked { border-color:#7454B6; background:#7454B6; color:#fff; }
.opi-vote-note { font-size:12px; color:#8a83a3; text-align:center; margin:10px 0 0; }

.opi-result-row { margin-bottom:12px; }
.opi-result-top { display:flex; justify-content:space-between; font-size:13.5px; font-weight:800; color:#4b4468; margin-bottom:5px; }
.opi-result-top .pct { color:#7454B6; }
.opi-bar { height:15px; background:#efebf9; border-radius:5px; overflow:hidden; }
.opi-bar span { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#8f74d1,#7454B6); }
.opi-bar.b2 span { background:linear-gradient(90deg,#d9b45f,#c79a3c); }
.opi-total { text-align:center; font-size:13px; color:#6b6386; margin-top:14px; }
.opi-total strong { color:#7454B6; font-size:16px; }
.opi-mine { display:inline-block; font-size:11px; font-weight:800; color:#7454B6; background:#f0ebfa; border-radius:20px; padding:3px 10px; margin-top:8px; }

/* 댓글 */
.opi-form .form-control { height:42px; border:1.5px solid #e0daf0; border-radius:8px; font-size:14px; box-shadow:none; }
.opi-form textarea.form-control { height:auto; min-height:76px; resize:vertical; }
.opi-form .btn-opi { background:#7454B6; border:0; color:#fff; font-weight:800; border-radius:8px; height:42px; padding:0 22px; }
.opi-form .btn-opi:hover { background:#5f43a0; color:#fff; }
.opi-msg { font-size:12.5px; font-weight:700; margin-top:8px; }
.opi-msg.err { color:#c0392b; }
.opi-msg.ok { color:#2b8a5f; }

.opi-comment { border-top:1px solid #f0edf7; padding:13px 2px; }
.opi-comment:first-child { border-top:0; }
.opi-c-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:5px; }
.opi-c-nick { font-size:13.5px; font-weight:800; color:#4b4468; }
.opi-c-time { font-size:11.5px; color:#a49dbb; }
.opi-c-body { font-size:14px; line-height:1.7; color:#4b4468; word-break:break-all; margin:0; }
.opi-tag { font-size:10.5px; font-weight:800; border-radius:20px; padding:2px 8px; }
.opi-tag.blue_black { background:#2c3e70; color:#fff; }
.opi-tag.white_gold { background:#f4e3b6; color:#7a5c14; }
.opi-tag.same { background:#eae4f8; color:#5f43a0; }
.opi-tag.different { background:#fbe6d8; color:#a3562a; }
.opi-empty { text-align:center; color:#a49dbb; font-size:13.5px; padding:22px 0; }

/* 단계형 공개 (3편) */
.opi-step { display:none; }
.opi-step.on { display:block; }
.opi-hintbox { background:#f7f4fd; border:1px dashed #cbbdea; border-radius:10px; padding:16px 18px; font-size:14px; color:#5d5674; line-height:1.8; margin:14px 0; }
.opi-answer { font-size:64px; font-weight:900; color:#7454B6; letter-spacing:6px; margin:10px 0 6px; }
.btn-opi-lg { background:#7454B6; border:0; color:#fff; font-weight:800; border-radius:10px; padding:13px 26px; font-size:15px; }
.btn-opi-lg:hover { background:#5f43a0; color:#fff; }
.btn-opi-ghost { background:#fff; border:2px solid #d9d0ef; color:#6b6386; font-weight:800; border-radius:10px; padding:11px 22px; font-size:14px; }

/* 통찰 섹션 */
.opi-insight { background:#f3f0fa; border:1px solid #ddd4f0; }
.opi-insight .opi-h2 { color:#5f43a0; }
.opi-insight p { font-size:14px; line-height:1.85; color:#544c6d; margin:0 0 10px; }
.opi-insight p:last-child { margin-bottom:0; }
.opi-todo { font-size:12.5px; color:#8a83a3; border-top:1px dashed #cfc5e8; padding-top:10px; margin-top:12px; }

.opi-ads { margin:16px 0; }

/* 공유 섹션 */
.opi-share-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.opi-sb { border:0; font-weight:800; font-size:13px; border-radius:10px; padding:11px 16px; min-width:96px;
  cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
.opi-sb.kakao { background:#fee500; color:#3c1e1e; }
.opi-sb.fb { background:#1877f2; color:#fff; }
.opi-sb.x { background:#111; color:#fff; }
.opi-sb.copy { background:#fff; border:2px solid #d9d0ef; color:#5f43a0; padding:10px 16px; }
.opi-sb:hover { filter:brightness(.95); color:inherit; text-decoration:none; }
.opi-sb.fb:hover, .opi-sb.x:hover { color:#fff; }
.opi-share-url { display:flex; align-items:center; gap:8px; max-width:440px; margin:0 auto;
  background:#f7f4fd; border:1px solid #e0daf0; border-radius:9px; padding:9px 12px; }
.opi-share-url input { flex:1; border:0; background:transparent; font-size:12px; color:#6b6386; min-width:0; text-overflow:ellipsis; }
.opi-share-url button { border:0; background:#7454B6; color:#fff; font-weight:800; font-size:12px;
  border-radius:6px; padding:6px 12px; cursor:pointer; flex:none; }
#opi-share-msg { font-size:12px; color:#7454B6; font-weight:700; margin-top:10px; min-height:16px; text-align:center; }

/* 다른 편 링크 */
.opi-more-item { display:block; text-align:center; text-decoration:none; padding:10px 4px; }
.opi-more-thumb { display:block; height:64px; background-size:cover; background-position:center; border-radius:8px; border:1px solid #ece8f6; margin-bottom:7px; }
.opi-more-name { font-size:12.5px; font-weight:700; color:#5d5674; }
.opi-more-item:hover .opi-more-name { color:#7454B6; }

@media (max-width:480px) {
  .opi-h1 { font-size:21px; }
  .opi-card { padding:20px 16px; }
  .opi-vote-btn { min-width:0; font-size:14px; padding:13px 8px; }
  .opi-answer { font-size:52px; }
}

/* 본인 댓글 수정 */
.opi-edit-btn { border:0; background:none; color:#8a83a3; font-size:11.5px; font-weight:700;
  padding:2px 6px; cursor:pointer; border-radius:5px; }
.opi-edit-btn:hover { background:#f3f0fa; color:#7454B6; }
.opi-edit-form { display:none; margin-top:8px; }
.opi-edit-form.on { display:block; }
.opi-edit-form .form-control { height:40px; border:1.5px solid #d9d0ef; border-radius:8px; font-size:14px; box-shadow:none; }
.opi-edit-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.opi-edit-cancel { border:1.5px solid #e0daf0; background:#fff; color:#6b6386; font-weight:700;
  font-size:13px; border-radius:8px; padding:7px 16px; cursor:pointer; }
.opi-edit-save { height:34px; padding:0 18px; font-size:13px; }