@charset "utf-8";
/* new2026 스킨 ↔ CMS 셸 보정 (시안 CSS 뒤에 로드)
 * 시안 원본 CSS 는 수정하지 않고 CMS 래퍼가 만드는 차이만 여기서 맞춘다. 선택자 1줄 원칙.
 */
:root { --n26-bridge-gap: 12px; --n26-bridge-radius: 14px; --n26-bridge-log-h: 280px; --n26-bridge-fs: 15px; }

/* 코어 래퍼·여백 해제: 시안은 자체 고정 헤더와 섹션 여백을 사용 */
body.skin-n26 #wrapper { padding-top: 0; }
body.skin-n26 .sub-content { padding: 0; }
body.skin-n26 .sub-content > .container { width: auto; max-width: none; margin: 0; padding: 0; }
body.skin-n26 #pb-page-wrap { margin: 0; padding: 0; }
body.skin-n26 .pb-page, body.skin-n26 .pb-row, body.skin-n26 .pb-col { margin: 0; padding: 0; }
body.skin-n26 .pb-row-inner { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
body.skin-n26 .pb-col { width: auto; max-width: none; flex: none; }

/* 코어 접근성 h1·건너뛰기 링크는 시안 디자인에 노출되지 않게 */
body.skin-n26 #skipToContent a:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* iframe 자리표시자(생성 전) */
.n26-embed { display: block; width: 100%; min-height: 240px; background: #f2f4f7; }

/* AI 챗봇 대화 영역 */
.chatbot-panel__log { display: flex; flex-direction: column; gap: var(--n26-bridge-gap); max-height: var(--n26-bridge-log-h); margin: 0 0 var(--n26-bridge-gap); overflow-y: auto; font-size: var(--n26-bridge-fs); line-height: 1.6; }
.chatbot-panel__bubble { max-width: 88%; padding: 10px 14px; border-radius: var(--n26-bridge-radius); word-break: keep-all; overflow-wrap: anywhere; }
.chatbot-panel__bubble--me { align-self: flex-end; background: var(--brand, #1a86da); color: #fff; }
.chatbot-panel__bubble--bot { align-self: flex-start; background: #f2f4f7; color: #111; }
.chatbot-panel__bubble a { color: inherit; text-decoration: underline; }
.chatbot-panel__bubble ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.chatbot-panel__typing { display: inline-flex; gap: 4px; }
.chatbot-panel__typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa3ad; animation: n26-typing 1s infinite ease-in-out; }
.chatbot-panel__typing i:nth-child(2) { animation-delay: .15s; }
.chatbot-panel__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes n26-typing { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chatbot-panel__typing i { animation: none; } }

/* 게시판 상세(n26board 스킨: 포트폴리오·블로그) */
:root { --n26-bv-pt: calc(var(--header-h, 88px) + 80px); --n26-bv-pb: 120px; --n26-bv-max: 960px; --n26-bv-gap: 24px; --n26-bv-gap-lg: 56px; --n26-bv-fs-title: clamp(28px, 3.4vw, 46px); --n26-bv-fs-meta: 15px; --n26-bv-fs-body: 18px; --n26-bv-fs-label: 13px; --n26-bv-radius: var(--radius, 20px); }
.bv { padding: var(--n26-bv-pt) 0 var(--n26-bv-pb); }
.bv__inner { max-width: var(--n26-bv-max); }
.bv__head { display: flex; flex-direction: column; gap: var(--n26-bv-gap); margin: 0 0 var(--n26-bv-gap-lg); }
.bv__back { align-self: flex-start; font-size: var(--n26-bv-fs-label); font-weight: 700; color: var(--brand); }
.bv__back::before { content: "\2190\00a0"; }
.bv__title { font-size: var(--n26-bv-fs-title); font-weight: 700; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.bv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--n26-bv-fs-meta); color: var(--mute); }
.bv__cat { padding: 4px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.bv__award { padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600; }
.bv__figure { margin: 0 0 var(--n26-bv-gap-lg); overflow: hidden; border-radius: var(--n26-bv-radius); background: var(--paper); }
.bv__figure img { width: 100%; height: auto; }
.bv--portfolio .bv__figure { display: flex; justify-content: center; padding: var(--n26-bv-gap); }
.bv--portfolio .bv__figure img { width: auto; max-width: 100%; border-radius: calc(var(--n26-bv-radius) / 2); }
.bv__body { margin: 0 0 var(--n26-bv-gap-lg); font-size: var(--n26-bv-fs-body); line-height: 1.8; color: var(--ink-2); }
.bv__body img { height: auto; margin: var(--n26-bv-gap) auto; border-radius: var(--n26-bv-radius); }
.bv__body p { margin: 0 0 1em; }
.bv__body h2, .bv__body h3 { margin: 1.6em 0 .6em; font-weight: 700; color: var(--ink); }
.bv__body a { color: var(--brand); text-decoration: underline; }
.bv__files { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--n26-bv-gap-lg); padding: var(--n26-bv-gap); border: 1px solid var(--line); border-radius: var(--n26-bv-radius); font-size: var(--n26-bv-fs-meta); }
.bv__files:not(:has(li)) { display: none; }
.bv__pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--n26-bv-gap); padding: var(--n26-bv-gap) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bv__pager-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bv__pager-item span { font-size: var(--n26-bv-fs-label); font-weight: 600; color: var(--mute); }
.bv__pager-item b { overflow: hidden; font-size: var(--n26-bv-fs-meta); font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.bv__pager-item--next { text-align: right; }
.bv__pager-item.is-empty b { color: var(--mute); font-weight: 400; }
a.bv__pager-item:hover b { color: var(--brand); }
.bv__admin { display: flex; justify-content: flex-end; gap: 8px; margin: var(--n26-bv-gap) 0 0; }
.bv__admin:empty { display: none; }
.bv__admin .board-actions { display: flex; gap: 8px; }
.bv__admin .btn-outline { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--n26-bv-fs-meta); color: var(--ink-2); }
.bv__admin .btn-outline:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 768px) { :root { --n26-bv-pt: calc(var(--header-h, 64px) + 40px); --n26-bv-pb: 80px; --n26-bv-gap-lg: 36px; --n26-bv-fs-body: 16px; } .bv__pager { grid-template-columns: 1fr 1fr; } .bv__list { grid-column: 1 / -1; grid-row: 2; justify-self: center; } }
.bv__inner { width: 100%; margin-left: auto; margin-right: auto; }
.bv__figure img { max-width: 100%; display: block; }
.bv__body img { max-width: 100%; }
.bv__shots { display: flex; flex-direction: column; gap: var(--n26-bv-gap); margin: 0 0 var(--n26-bv-gap-lg); }
.bv__shot { margin: 0; }
.bv__shot img { width: 100%; height: auto; border-radius: var(--n26-bv-radius); }
.bv__video { width: 100%; height: auto; margin: 0 0 var(--n26-bv-gap-lg); border-radius: var(--n26-bv-radius); background: var(--ink); }
.bv__link { margin: 0 0 var(--n26-bv-gap); font-size: var(--n26-bv-fs-meta); }
.bv__link a { color: var(--brand); }

/* 포트폴리오 상세(운영 portfolio_view.php 구성): 1460 콘텐츠 폭, 전체 캡처, 하단 고정 버튼 */
:root { --n26-pv-max: 1460px; --n26-pv-side: 30px; --n26-pv-float-h: 56px; --n26-pv-float-gap: 8px; --n26-pv-float-bottom: 24px; --n26-pv-mark-w: 66px; --n26-pv-fs-btn: 16px; }
.pv { padding: var(--n26-bv-pt) 0 calc(var(--n26-bv-pb) + var(--n26-pv-float-h)); }
.pv__inner { width: 100%; max-width: var(--n26-pv-max); margin: 0 auto; padding: 0 var(--n26-pv-side); box-sizing: border-box; }
.pv__head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin: 0 0 var(--n26-bv-gap-lg); }
.pv__back { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: auto; padding: 0 20px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.pv__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv__back:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.pv__tit { display: flex; align-items: center; gap: var(--n26-bv-gap); }
.pv__mark { flex: none; width: var(--n26-pv-mark-w); height: auto; }
.pv__name { font-size: var(--n26-bv-fs-title); font-weight: 700; line-height: 1.3; color: var(--ink); word-break: keep-all; }
.pv__cat { margin-top: 6px; font-size: var(--n26-bv-fs-meta); color: var(--mute); }
.pv__shot { margin: 0 0 var(--n26-bv-gap-lg); overflow: hidden; border-radius: var(--n26-bv-radius); background: var(--paper); box-shadow: 0 20px 50px rgba(14, 16, 20, .1); }
.pv__shot img { display: block; width: 100%; max-width: 100%; height: auto; }
.pv__shot--mo { display: none; }
.pv__float { position: fixed; left: 50%; bottom: var(--n26-pv-float-bottom); z-index: 90; display: flex; gap: var(--n26-pv-float-gap); transform: translateX(-50%); }
.pv__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--n26-pv-float-h); padding: 0 28px; border-radius: 999px; font-size: var(--n26-pv-fs-btn); font-weight: 600; white-space: nowrap; color: #fff; box-shadow: 0 10px 28px rgba(14, 16, 20, .22); transition: background .25s; }
.pv__btn::after { content: "\2192"; }
.pv__btn--case { background: var(--brand); }
.pv__btn--case:hover { background: var(--brand-deep); }
.pv__btn--site { background: var(--ink); }
.pv__btn--site:hover { background: var(--brand); }
@media (max-width: 768px) { .pv__back { height: 40px; padding: 0 14px; font-size: 13px; } }
@media (max-width: 768px) { :root { --n26-pv-side: 20px; --n26-pv-float-h: 48px; --n26-pv-float-bottom: 16px; --n26-pv-mark-w: 44px; --n26-pv-fs-btn: 14px; } .pv__inner:has(.pv__shot--mo) .pv__shot--pc { display: none; } .pv__shot--mo { display: block; max-width: 420px; margin-left: auto; margin-right: auto; } .pv__float { left: 16px; right: 124px; transform: none; } .pv__btn { flex: 1; min-width: 0; padding: 0 8px; font-size: 13px; } .pv__btn::after { content: none; } }

/* 빌더 편집 캔버스: 행·컬럼 편집 상자(흰 배경·테두리)가 시안 섹션을 덮지 않게 */
body.skin-n26.pb-builder-active .pb-row.pb-row--builder { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
body.skin-n26.pb-builder-active .pb-row.pb-row--builder:hover { box-shadow: inset 0 0 0 2px rgba(61, 130, 196, .45); }
body.skin-n26.pb-builder-active .pb-col { display: block; background: transparent; border: 0; border-radius: 0; }
body.skin-n26.pb-builder-active .pb-col:hover { background: transparent; box-shadow: inset 0 0 0 1px rgba(61, 130, 196, .55); }
body.skin-n26.pb-builder-active .pb-widget-inner { background: transparent; border-radius: 0; overflow: visible; }

/* 공개 화면은 섹션이 #main 직계. 편집 캔버스는 행 래퍼 안이므로 같은 스냅 규칙을 자손에도 적용 */
@media (min-width: 1101px) {
  body.pb-builder-shell.page-snap #main .faq { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: var(--snap-top) 0 var(--snap-bot); }
  body.pb-builder-shell.page-snap #main .contact-sec { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: var(--snap-top) 0 var(--snap-bot); }
  body.pb-builder-shell.page-snap #main .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 48px; align-content: center; }
}
@media (min-width: 1241px) {
  body.pb-builder-shell.page-snap #main .contact-sec .inner { width: calc(var(--wide) / var(--fit, 1)); }
  body.pb-builder-shell.page-snap #main .faq { width: var(--wide); }
}