/* 매직오브 포스트 공개·블로거 화면 — magicorb.co.kr 블로그 남색(기능서 0장, 2026-10-31 폐하 지시), 머리·바닥·로고는 www.magicorb.co.kr(corp.css) 값.
   화면 파일(blade)에는 style= 를 쓰지 않고 여기 이름(class)으로만 꾸밈 */
:root { --bg:#060D19; --card:#0A1422; --soft:#101C35; --line:#1A2740; --ink:#F2F5FF; --sub:#A8B5D1; --btn:#3E55C9; --btn-hover:#4D63D8; --accent:#91A6FF; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); word-break:keep-all; overflow-wrap:anywhere;
       font:400 16px/1.6 "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
.wrap { width:100%; max-width:1440px; margin:0 auto; padding:0 64px; }
main.page { flex:1; padding-top:40px; padding-bottom:120px; }

.btn { flex:none; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 18px; border:0; border-radius:8px;
       background:var(--btn); color:#fff; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--btn-hover); }
.btn-line { background:transparent; border:1px solid var(--line); color:var(--ink); }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px; }
.muted { color:var(--sub); }
.field { display:block; margin:14px 0; }
.field input[type=text] { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--ink); font-size:16px; }
.check { display:flex; gap:8px; align-items:flex-start; margin:8px 0; }
.choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice label { display:block; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--soft); cursor:pointer; }
.choice input:checked + span { color:var(--accent); font-weight:700; }
.err { color:#FF8A8A; font-size:14px; }
.title { font-size:22px; margin:0 0 8px; }
.lead { margin:0 0 20px; }
.small { font-size:14px; margin:10px 0 4px; }
.box { max-width:560px; margin:24px auto; }
.box-sm { max-width:420px; margin-top:40px; }
.center { text-align:center; }
.wide { width:100%; }
.group { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:16px 0; }

/* 캠페인 카드·목록·상세(5단계) */
.camp-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; margin:24px 0; }   /* PC 4줄(2026-11-01 폐하 지시 "4개를 1줄로") · 1180px 이하 3 · 900px 이하(휴대폰 포함) 2(같은 날 폐하 지시 "모바일 가로 한 줄에 2개") */
.camp-card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; overflow:hidden; }
.camp-body { display:flex; flex-direction:column; gap:6px; padding:24px 24px 24px; }
/* 대표 사진 — 사이트 규격 그림 비율 384:280, 마우스 올리면 1.03배(손가락 기기는 없음) */
.camp-photo { display:block; aspect-ratio:384 / 280; overflow:hidden; background:var(--soft); }
.camp-photo img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
@media (hover:hover) { .camp-card:hover .camp-photo img { transform:scale(1.03); } }
.detail-photo { display:block; width:100%; max-height:440px; aspect-ratio:4 / 3; object-fit:cover; border-radius:8px; margin-bottom:20px; }
.detail-photo.gift { aspect-ratio:auto; max-height:360px; object-fit:contain; background:#fff; padding:16px; }
html { scroll-behavior:smooth; }
#info { scroll-margin-top:110px; }
.camp-card:hover { border-color:var(--btn); }
.pill-type { align-self:flex-start; display:inline-block; padding:2px 8px; border-radius:6px; background:var(--soft); color:var(--accent); font-size:12px; font-weight:700; }
.camp-meta { color:var(--sub); font-size:13px; }
.camp-title { font-size:clamp(17px,1.6vw,22px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camp-offer { color:var(--sub); font-size:14px; }
.camp-count { color:var(--accent); font-size:13px; font-weight:700; }
.search { display:flex; gap:8px; margin:8px 0; }
.search-in, .sel, .area, .field input[type=text] { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--ink); font:inherit; }
.area { min-height:96px; padding:10px 12px; }
.sorts, .my-nav { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 4px; }
.sorts a, .my-nav a, .my-nav span { padding:6px 12px; border-radius:8px; color:var(--sub); text-decoration:none; font-size:14px; }
.sorts a.on, .my-nav a.on { background:var(--soft); color:var(--ink); font-weight:700; }
.my-nav span { opacity:.5; }
.detail { max-width:760px; margin:0 auto; }
.detail-offer { font-size:17px; margin:0 0 6px; }
.detail-sec { margin:22px 0; }
.sub { font-size:18px; margin:0 0 10px; }
.ticks { margin:0; padding-left:18px; line-height:1.9; }
.dates { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.dates div { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.dates span { display:block; color:var(--sub); font-size:13px; }
.apply-bar { position:sticky; bottom:0; padding:12px 0 16px; background:var(--bg); }
.ok { color:#7EE2B0; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0; }
.row p { margin:4px 0 0; }
.ch { margin:12px 0; }
.steps { line-height:1.9; }
.code { font-size:18px; padding:4px 10px; background:var(--soft); border-radius:6px; color:var(--accent); }
@media (max-width:1180px) { .camp-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:900px) { .camp-grid { grid-template-columns:1fr 1fr; gap:16px; } .dates { grid-template-columns:1fr 1fr; } .camp-body { padding:16px; } }
@media (max-width:560px) {
  .camp-grid { gap:12px; }
  .camp-body { padding:12px; gap:4px; }
  .camp-title { font-size:15px; }
  .camp-offer, .camp-meta, .camp-count { font-size:12px; }
  .camp-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pill-type, .pill-soon { font-size:11px; }
}
.pager { display:flex; gap:14px; justify-content:center; align-items:center; margin:18px 0; font-size:14px; }
.legal { max-width:860px; margin:0 auto; line-height:1.75; }
.legal h2 { font-size:17px; margin:26px 0 8px; }
.legal ol { padding-left:20px; }
.legal-table { width:100%; border-collapse:collapse; font-size:14px; margin:8px 0; }
.legal-table th, .legal-table td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.legal-table th { background:var(--soft); }
@media (max-width:640px) { .legal-table { display:block; overflow-x:auto; } }

/* 로고(구슬 + Magic Orb 글자 그림 + Post) — 폐하 주신 파일, 2026-11-01. 어두운 바탕은 글자를 흰색으로 */
.brand-mark { --wm:19px; --gap:8px; display:inline-flex; align-items:center; gap:var(--gap); line-height:1; }
.brand-mark .brand-orb { width:30px; height:30px; }
.brand-mark .brand-word { height:var(--wm); width:auto; }
/* "Post" 는 Magic Orb 글자 그림과 같은 키(대문자 높이)·같은 줄(밑선)·한 칸 띄움 — 그림 높이(--wm)에 맞춰 계산(2026-11-01 폐하 지시 "Post 비뚤다") */
.brand-mark .brand-post { font-family:"Montserrat", "Pretendard Variable", sans-serif; font-weight:600; letter-spacing:-.035em; color:#001A3B;
  font-size:calc(var(--wm) * 1.05); line-height:var(--wm); height:var(--wm); position:relative; top:calc(var(--wm) * -.075); margin-left:calc(var(--wm) * .14 - var(--gap)); }
.brand-mark.is-dark .brand-post { color:#fff; }

/* 머리 — www.magicorb.co.kr(corp.css) 값: 높이 96px, 로고 구슬 40px·글자 26px·간격 14px, 메뉴 16px·간격 44px, 휴대폰 ☰ 44×44 */
.top { position:sticky; top:0; z-index:30; background:rgba(6,13,25,.92); box-shadow:0 1px 0 var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.top-in { display:flex; align-items:center; height:96px; }
.brand { margin-right:auto; text-decoration:none; }
.brand .brand-mark { --wm:26px; --gap:14px; }
.brand .brand-orb { width:40px; height:40px; }
.menu { display:flex; align-items:center; gap:44px; font-size:16px; }
.menu a, .menu-btn { color:var(--ink); text-decoration:none; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.menu a:hover, .menu a.on, .menu-btn:hover { color:var(--accent); }
.menu form { display:contents; }
.menu-btn { background:none; border:0; font:inherit; cursor:pointer; padding:0; }
.top-toggle { display:none; background:none; border:0; color:var(--ink); width:44px; height:44px; padding:10px; margin-right:-10px; cursor:pointer; }
.top-toggle span { display:block; height:2px; background:currentColor; margin:5px 0; border-radius:2px; transition:transform .25s, opacity .25s; }
.top-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.top-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.top-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1180px) { .wrap { padding:0 40px; } .menu { gap:28px; } }
@media (max-width:900px) {
  .wrap { padding:0 20px; }
  .top-in { height:64px; }
  .brand .brand-mark { --wm:20px; --gap:10px; } .brand .brand-orb { width:32px; height:32px; }
  .top-toggle { display:block; }
  .menu { display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 16px; background:var(--bg); border-bottom:1px solid var(--line); }
  .menu.is-open { display:flex; }
  .menu a, .menu-btn { min-height:48px; border-bottom:1px solid var(--line); }
  main.page { padding-top:24px; padding-bottom:72px; }
}
/* 네이버 로그인 단추 — 네이버 로그인 디자인 가이드(초록 #03C75A · 흰 N 표시 · "네이버 로그인"), 검수에서 다른 색·모양은 반려됨 */
.naver-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; border-radius:8px; background:#03C75A; color:#fff; font-weight:700; font-size:16px; text-decoration:none; }
.naver-btn:hover { background:#02B350; }
.naver-n { font-family:Arial, Helvetica, sans-serif; font-weight:900; font-size:20px; line-height:1; }
.info-table th { width:120px; white-space:nowrap; }

/* 바닥 — www.magicorb.co.kr(corp.css .ft) 값 그대로 */
.ft { border-top:1px solid var(--line); margin-top:60px; color:var(--sub); }
.ft a { color:inherit; text-decoration:none; }
.ft ul { list-style:none; margin:0; padding:0; }
.ft-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(220px, 376px); gap:40px; padding-top:52px; }
.ft-grid li { font-size:16px; line-height:1.4; padding:6px 0; }
.ft-grid li + li { margin-top:8px; }
.ft-grid a:hover, .ft-legal a:hover { color:var(--ink); }
.ft-bottom { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:56px; padding:34px 0 50px; font-size:15px; }
.ft-bottom > span:last-child { min-width:376px; }
.ft-legal a + a::before { content:'·'; margin:0 8px; }
@media (max-width:1180px) { .ft-bottom > span:last-child { min-width:0; } }
@media (max-width:900px) {
  .ft { margin-top:40px; }
  .ft-grid { grid-template-columns:1fr; gap:6px; padding-top:34px; }
  .ft-grid li { font-size:13px; padding:4px 0; line-height:1.5; }
  .ft-grid li + li { margin-top:0; }
  .ft-bottom { margin-top:26px; padding:20px 0 40px; font-size:12px; }
}

/* 준비 중 카드 — 캠페인이 없을 때 빈 화면 대신(사진 자리에 구슬, 2026-11-01 폐하 지시) */
.camp-card.soon { cursor:default; }
.camp-card.soon:hover { border-color:var(--line); }
.camp-photo.soon { display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 45%, #16264a 0%, #0b1426 62%, #08101e 100%); }
.camp-photo.soon img { width:34%; height:auto; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(110,140,255,.35)); }
@media (hover:hover) { .camp-card.soon:hover .camp-photo img { transform:none; } }
.pill-soon { align-self:flex-start; display:inline-block; padding:2px 8px; border-radius:6px; background:#2a2140; color:#d7c4ff; font-size:12px; font-weight:700; }
.ready-head { text-align:center; padding:24px 0 8px; }
.ready-head h1 { margin:0 0 10px; font-size:28px; }
.ready-head p { margin:0; }

/* 1:1 문의 */
.inq-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.inq-row .pill, .inq-row .pill.wait { padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; background:var(--soft); color:var(--accent); }
.inq-row .pill.wait { color:#ffcf7a; }
.inq-list-head { margin-top:28px; }
.inq-body { white-space:pre-wrap; line-height:1.7; }
.inq-answer-head { margin-top:24px; }
.inq-answer { padding:14px 16px; border-radius:8px; background:var(--soft); }

/* 오픈 기념 스페셜 예고 카드(캠페인 카드 모양, 첫 줄 왼쪽부터) */
.camp-photo { position:relative; }
.camp-photo.gift { display:flex; align-items:center; justify-content:center; background:#fff; }
.camp-photo.gift img { width:100%; height:100%; object-fit:contain; }
.special-ribbon { position:absolute; left:12px; top:0; padding:8px 12px 10px; white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; background:#3E55C9; color:#fff; font-weight:700; font-size:13px; border-radius:0 0 6px 6px; }

/* 스페셜 당첨 발표 */
.result-card { margin:16px 0; }
.result-names { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.result-names span { padding:4px 12px; border-radius:999px; background:var(--soft); color:var(--accent); font-weight:700; }
.result-card code { word-break:break-all; font-size:12px; }

@media (max-width:560px) { .special-ribbon { left:6px; padding:5px 7px 6px; font-size:10px; letter-spacing:-.02em; max-width:calc(100% - 12px); } }

/* 블로거 위젯 */
.widget-box { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.widget-preview { width:170px; height:170px; border-radius:12px; flex:none; }
.widget-state { flex:1; min-width:200px; }
.widget-code { width:100%; box-sizing:border-box; font:13px/1.5 ui-monospace,monospace; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--ink); resize:vertical; margin-bottom:10px; word-break:break-all; }
.steps { padding-left:20px; line-height:1.8; margin:0 0 8px; }
.w-card + .w-card { margin-top:14px; }