/* =========================================================
   글 상세 (news-detail · blog-detail) — main.css + about.css + board.css 위에 얹음
   .prose 안은 Wix CMS/블로그의 본문(리치 텍스트)이 그대로 들어오는 자리
   ========================================================= */

.art{ padding-top:calc(var(--header) + 56px); background:#fff }
.crumb--light{ color:var(--text-sub) }
.crumb--light a:hover{ color:var(--text-strong) }
.crumb--light [aria-current]{ color:var(--text-strong) }

/* 읽은 정도 막대 */
.rprog{ position:fixed; z-index:99; left:0; right:0; top:var(--header); height:3px; pointer-events:none }
.rprog i{ display:block; height:100%; background:linear-gradient(90deg,var(--point),#7A4BEA,var(--cyan)); transform-origin:left; scale:0 1 }

/* ---------- 글 머리 ---------- */
.post__head{ max-width:calc(720px + var(--pad) * 2) }
/* 블로그: 글 머리를 본문 칸(12칸 중 4~9)에 맞춤 */
.art--blog .post__head{ max-width:calc(1600px + var(--pad) * 2); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap) }
.art--blog .post__head > *{ grid-column:4 / 10 }
@media (max-width:1024px){ .art--blog .post__head{ display:block; max-width:calc(720px + var(--pad) * 2) } }
.post__meta{ margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:16px; color:var(--text-sub); font-variant-numeric:tabular-nums }
.post__read{ display:inline-flex; align-items:center; gap:14px }
.post__read::before{ content:""; width:3px; height:3px; border-radius:50%; background:currentColor }
.post__title{ margin-top:20px; font-size:clamp(30px,3.4vw,50px); font-weight:700; line-height:1.3; letter-spacing:-.045em; color:var(--text-strong); text-wrap:balance }
.post__lead{ margin-top:22px; font-size:20px; line-height:1.65; color:var(--text-sub) }
.post__by{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px }
.post__org{ display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--text-strong) }
.post__org img{ height:23px; width:auto }
.post__org span{ padding-left:10px; border-left:1px solid var(--line-strong); line-height:1 }

.post__cover{ margin-top:48px }
.post__coverimg{ max-width:960px; margin:0 auto; aspect-ratio:16 / 9; border-radius:var(--r-xl); overflow:hidden; background:#ECEAF3 }
.post__coverimg img{ width:100%; height:100%; object-fit:cover }
.post__cover--wide .post__coverimg{ max-width:1200px; aspect-ratio:1140 / 660; background:#0E0C1C }

/* 공유 */
.share{ display:flex; align-items:center; gap:8px }
.share__label{ margin-right:6px; font-size:16px; font-weight:600; color:var(--text-sub) }
.share__btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--bg-light); color:var(--text-strong); transition:background-color .3s var(--ease), color .3s var(--ease) }
.share__btn:hover{ background:var(--point); color:#fff }
.si{ width:18px; height:18px; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat }
.si--link{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") }
.si--in{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 20.4h-3.6v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.2V9h3.4v1.6h.1c.5-.9 1.7-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zM7.1 20.4H3.5V9h3.6v11.4z'/%3E%3C/svg%3E") }
.si--fb{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.3c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2H7.5v3.6h2.8V22H14v-9.9h2.8l.4-3.6H14z'/%3E%3C/svg%3E") }
.ico-out{ display:inline-block; width:18px; height:18px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat }
.ico-grid{ display:inline-block; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat }

/* ---------- 본문 ---------- */
.prose{ max-width:720px; margin:80px auto 0; font-size:18px; line-height:1.85; color:var(--text-body); word-break:keep-all; overflow-wrap:anywhere }
.prose > * + *{ margin-top:1.4em }
.prose h2{ margin-top:2.6em; font-size:30px; font-weight:700; line-height:1.4; letter-spacing:-.04em; color:var(--text-strong); scroll-margin-top:calc(var(--header) + 40px) }
.prose h3{ margin-top:2em; font-size:22px; font-weight:700; line-height:1.45; letter-spacing:-.03em; color:var(--text-strong) }
.prose h2 + *,.prose h3 + *{ margin-top:.9em }
.prose a{ color:var(--point); font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px }
.prose strong{ font-weight:700; color:var(--text-strong) }
.prose figure{ margin:2.4em 0 }
.prose figure img{ width:100%; border-radius:var(--r-lg) }
.prose figcaption{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--text-sub); text-align:center }
.prose ul,.prose ol{ padding-left:1.4em }
.prose ul{ list-style:disc } .prose ol{ list-style:decimal }
.prose li::marker{ color:var(--point); font-weight:700 }
.prose li + li{ margin-top:.5em }
.prose blockquote{ padding:4px 0 4px 26px; border-left:3px solid var(--point); font-size:20px; font-weight:500; line-height:1.7; color:var(--text-strong) }
.prose blockquote cite{ display:block; margin-top:10px; font-size:16px; font-style:normal; font-weight:600; color:var(--text-sub) }
.prose blockquote.pull{ position:relative; margin:2.4em 0; padding:40px 0 36px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:28px; font-weight:700; line-height:1.5; letter-spacing:-.035em }
.prose blockquote.pull::before{ content:"“"; display:block; height:40px; font-size:72px; line-height:1; background:linear-gradient(90deg,var(--point),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent }
.prose .callout{ padding:28px 32px; border-radius:20px; background:var(--point-soft); box-shadow:inset 0 0 0 1px var(--point-light) }
.prose .callout b{ display:block; font-size:17px; color:var(--deep) }
.prose .callout p{ margin-top:8px }
.prose .tbl{ overflow-x:auto; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line) }
.prose table{ width:100%; min-width:520px; border-collapse:collapse; font-size:16px; line-height:1.6 }
.prose th,.prose td{ padding:14px 20px; text-align:left; border-bottom:1px solid var(--line) }
.prose th{ background:var(--bg-light); font-weight:700; color:var(--text-strong) }
.prose tr:last-child td{ border-bottom:0 }
.demo-note{ padding:14px 18px; border-radius:12px; border:1.5px dashed #E6C34A; background:#FFFBEA; font-size:16px !important; line-height:1.6; color:#7A5B00 }

/* ---------- 본문 아래 ---------- */
.press,.pcontact,.art--news .pnav{ max-width:720px; margin-left:auto; margin-right:auto }
.press{ margin-top:72px }
.press__title{ font-size:20px; font-weight:700; color:var(--text-strong); padding-bottom:16px; border-bottom:1px solid var(--text-strong) }
.press__list a{ display:grid; grid-template-columns:120px 1fr 20px; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line) }
.press__media{ font-size:16px; font-weight:700; color:var(--point) }
.press__head{ font-size:17px; font-weight:500; color:var(--text-strong); transition:color .3s var(--ease) }
.press__list a:hover .press__head{ color:var(--point) }
.pcontact{ margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 20px; padding:24px 28px; border-radius:16px; background:var(--bg-light) }
.pcontact b{ font-size:17px; color:var(--text-strong) }
.pcontact p{ margin-top:4px; font-size:16px; color:var(--text-sub) }

.post__end{ margin-top:64px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px }
.ptags{ display:flex; flex-wrap:wrap; gap:8px }
.ptags a{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; background:var(--bg-light); font-size:16px; font-weight:600; color:var(--text-body); transition:color .3s var(--ease), background-color .3s var(--ease) }
.ptags a:hover{ color:var(--point); background:var(--point-light) }
.author{ margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; padding:28px 32px; border-radius:20px; background:var(--bg-light) }
.author__logo{ flex:none; display:grid; place-items:center; padding:18px 20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line) }
.author__logo img{ width:104px; height:auto }
.author div{ flex:1 1 240px }
.author b{ font-size:18px; color:var(--text-strong) }
.author p{ margin-top:4px; font-size:16px; color:var(--text-sub) }

.pnav{ margin-top:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.pnav__it{ display:flex; flex-direction:column; gap:6px; padding:28px 0; min-width:0 }
.pnav__it span{ font-size:16px; color:var(--text-sub) }
.pnav__it b{ font-size:17px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s var(--ease) }
.pnav__it--next{ text-align:right }
a.pnav__it:hover b{ color:var(--point) }
.pnav__it.is-none b{ color:var(--text-sub); font-weight:500 }
.pnav__list{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 18px; border-radius:16px; font-size:16px; font-weight:600; color:var(--text-strong); transition:background-color .3s var(--ease), color .3s var(--ease) }
.pnav__list:hover{ background:var(--bg-light); color:var(--point) }

/* ---------- 블로그: 목차 + 본문 ---------- */
.post__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:start; margin-top:80px }
.post__grid .prose{ margin-top:0; max-width:none }
.post__main{ grid-column:4 / 10 }
.toc{ grid-column:1 / 4; position:sticky; top:calc(var(--header) + 48px); padding-right:32px }
.toc__box summary{ list-style:none; cursor:default; font-size:16px; font-weight:700; letter-spacing:.06em; color:var(--text-strong) }
.toc__box summary::-webkit-details-marker{ display:none }
.toc__list{ margin-top:16px; border-left:1px solid var(--line) }
.toc__list a{ display:block; margin-left:-1px; padding:8px 0 8px 18px; border-left:2px solid transparent; font-size:16px; line-height:1.5; color:var(--text-sub); transition:color .3s var(--ease), border-color .3s var(--ease) }
.toc__list a:hover{ color:var(--text-strong) }
.toc__list a.is-on{ color:var(--point); border-left-color:var(--point); font-weight:600 }

/* ---------- 관련 글 ---------- */
.related{ margin-top:120px; padding:120px 0; background:var(--bg-light) }
.related__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-bottom:24px; margin-bottom:40px; border-bottom:1px solid var(--text-strong) }
.related__title{ font-size:32px; font-weight:700; letter-spacing:-.04em; color:var(--text-strong) }
.page-article .cta{ background:var(--bg-light); padding-top:0 }

.toast{ position:fixed; left:50%; bottom:32px; z-index:200; translate:-50% 16px; padding:14px 22px; border-radius:999px; font-size:16px; font-weight:600;
  color:#fff; background:var(--text-strong); box-shadow:0 20px 40px -16px rgba(18,16,34,.5); opacity:0; pointer-events:none; transition:opacity .35s var(--ease), translate .35s var(--ease) }
.toast.is-on{ opacity:1; translate:-50% 0 }

@media (max-width:1024px){
  .post__main{ grid-column:1 / -1; width:100%; max-width:720px; margin:0 auto }
  .toc{ grid-column:1 / -1; position:static; width:100%; max-width:720px; margin:0 auto 48px; padding:0 }
  .toc__box{ padding:20px 24px; border-radius:16px; background:var(--bg-light) }
  .toc__box summary{ cursor:pointer; display:flex; justify-content:space-between }
  .toc__box summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--text-sub) }
  .toc__box[open] summary::after{ content:"−" }
}
@media (max-width:767px){
  .art{ padding-top:calc(var(--header) + 32px) }
  .post__meta{ margin-top:24px }
  .post__lead{ font-size:17px }
  .post__cover{ margin-top:32px }
  .post__coverimg{ border-radius:var(--r-lg) }
  .prose{ margin-top:48px; font-size:17px }
  .post__grid{ margin-top:48px }
  .prose h2{ font-size:24px } .prose h3{ font-size:20px }
  .prose blockquote{ font-size:18px } .prose blockquote.pull{ font-size:22px }
  .prose .callout{ padding:22px 22px }
  .press__list a{ grid-template-columns:1fr 20px; gap:4px 12px }
  .press__media{ grid-column:1 / -1 }
  .pnav{ grid-template-columns:1fr 1fr; gap:0 16px }
  .pnav__list{ grid-column:1 / -1; grid-row:2; flex-direction:row; justify-content:center; border-top:1px solid var(--line); border-radius:0; padding:16px }
  .pnav__it{ padding:20px 0 }
  .pnav__it b{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:16px }
  .author{ padding:22px }
  .related{ margin-top:80px; padding:80px 0 }
  .related__title{ font-size:26px }
  .related .bgrid3{ grid-template-columns:1fr; gap:36px }
  .related .bgrid3 li:nth-child(3){ display:none }
}