.jb-modal-open { overflow: hidden; }
.jb-modal[hidden] { display: none; }
.jb-modal { position: fixed; inset: 0; z-index: 9999; overflow: auto; background: rgba(0,0,0,.95); color: white; overscroll-behavior: contain; }
.jb-modal-frame { position: relative; width: min(1100px,calc(100vw - 48px)); margin: 100px auto 24px; }
.jb-modal-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: white; color: #222; font-size: 28px; font-weight: 400; line-height: 1; padding: 0; display: grid; place-items: center; z-index: 1; }
.jb-item-panel { background: #141414; color: white; border-radius: 20px; max-height: calc(100vh - 140px); overflow: auto; scrollbar-width: none; }
.jb-item-panel::-webkit-scrollbar, .jb-item-media::-webkit-scrollbar, .jb-item-body::-webkit-scrollbar { display: none; }
.jb-item-media { position: relative; width: 100%; aspect-ratio: 16/9; min-height: 520px; background: #000; }
.jb-item-media > iframe { display: block; width: 100%; height: 100%; position: absolute; inset: 0; border: 0; }
.jb-item-media > img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.jb-item-body { min-width: 0; padding: 16px 22px; border-top: 1px solid rgba(255,255,255,.1); }
.jb-item-title { font-size: 28px; font-weight: 700; line-height: 1.3; color: inherit; margin: 0 0 16px; }
.jb-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 16px; margin-bottom: 20px; color: #a0a0a0; font-size: 14px; }
.jb-item-meta > span { color: #4f8ef7; font-weight: 600; }
.jb-description { color: #a0a0a0; line-height: 1.8; }
.jb-description > :first-child { margin-top: 0; }
.jb-description h1, .jb-description h2, .jb-description h3, .jb-description h4, .jb-description h5, .jb-description h6 { color: inherit; }
.jb-description p { margin: 0 0 16px; }
.jb-description a { color: #4f8ef7; }
.jb-description img { max-width: 100%; height: auto; }
.jb-item-panel.is-instagram { display: grid; grid-template-columns: 600px 500px; height: calc(100vh - 140px); max-height: calc(100vh - 140px); overflow: hidden; }
.is-instagram .jb-item-media { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; overflow: auto; scrollbar-width: none; background: white; }
.is-instagram .jb-item-body { height: 100%; max-width: 500px; overflow: auto; scrollbar-width: none; }
.is-instagram .jb-item-media > blockquote { margin: 0; padding: 24px; color: #1b2436; }
/* Instagram embed.js supplies inline widths/heights; override that external embed styling only. */
.is-instagram .jb-item-media .instagram-media { min-width: 0 !important; width: 100% !important; max-width: 600px !important; margin: 0 auto !important; }
.is-instagram .jb-item-media iframe.instagram-media { position: static; display: block; height: min(94vh,1120px) !important; min-height: 620px !important; border: 0; }
.is-instagram .jb-item-media iframe[src*="/reel/"] { max-width: 560px !important; }
.jb-item-panel.is-facebook-post .jb-item-media { aspect-ratio: auto; min-height: 0; }
.is-facebook-post .jb-item-media > iframe { position: static; height: min(654px,calc(100vh - 140px)); }
.jb-modal-loading, .jb-modal-error { padding: 40px 22px; background: #141414; border-radius: 20px; text-align: center; }
.jb-modal-loading h2, .jb-modal-error h2 { color: white; font-size: 22px; }
.jb-modal-error a { color: #4f8ef7; }
.jb-modal-spinner { display: block; width: 32px; height: 32px; margin: 20px auto; border: 3px solid #555; border-top-color: #4f8ef7; border-radius: 50%; animation: jb-spin .7s linear infinite; }
.jb-portfolios-page { display: flow-root; margin: 0; padding: 0 20px 60px; background: white; }
.jb-portfolios-page.wp-block-group > .jb-portfolios-heading { text-align: center; max-width: 900px; margin: 100px auto 40px; }
.jb-portfolios-heading h1 { margin: 0 0 16px; font-size: 30px; color: #1b2436; }
.jb-portfolios-heading p { margin: 0; color: #666; }
.jb-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; }
.jb-portfolio-card { background: white; border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.jb-portfolio-card:hover { box-shadow: 0 12px 40px rgba(79,142,247,.15); transform: translateY(-4px); }
.jb-portfolio-card > a { color: #1b2436; display: block; text-decoration: none; height: 100%; }
.jb-portfolio-cover img { display: block; width: 100%; height: 240px; object-fit: cover; }
.jb-portfolio-card-body { padding: 24px; }
.jb-portfolio-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.jb-client-initial { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: #f8f9fa; color: #4f8ef7; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.jb-portfolio-identity h3 { font-size: 20px; font-weight: 700; color: inherit; line-height: 1.3; margin: 0 0 4px; }
.jb-portfolio-label { font-size: 13px; color: #666; letter-spacing: .5px; text-transform: uppercase; }
.jb-portfolio-card-meta { display: flex; gap: 16px; border-top: 1px solid #e5e5e5; padding: 12px 0; margin-bottom: 16px; }
.jb-portfolio-card-meta > div { flex: 1; min-width: 0; text-align: center; }
.jb-portfolio-card-meta span { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
.jb-portfolio-card-meta strong { display: block; font-size: 14px; font-weight: 600; color: #1a1a1a; }
.jb-item-panel.is-portfolio { background: white; color: #1b2436; }
.is-portfolio .jb-item-media { aspect-ratio: auto; min-height: 0; background: white; }
/* 포트폴리오 대표 이미지는 작은 세로 카드(예: 297×396)가 많다 — 원본보다 키우지 않고 가운데에 둔다(늘리면 흐려지고 cover로 잘림, 2026-10-26 리뷰). */
.is-portfolio .jb-item-media > img { position: static; width: auto; max-width: 100%; height: auto; max-height: 60vh; margin: 0 auto; object-fit: contain; }
.is-portfolio .jb-item-body { border-top-color: #e5e5e5; }
.is-portfolio .jb-item-meta { border-bottom-color: #e5e5e5; color: #666; }
.is-portfolio .jb-description { color: #5a667a; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.is-portfolio .jb-description > * { grid-column: 1/-1; min-width: 0; }
.is-portfolio .jb-description > img, .is-portfolio .jb-description > p:has(> img):not(:has(a)) { grid-column: auto; }
.is-portfolio .jb-description > p:has(> img ~ img) { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.is-portfolio .jb-description p > img { display: block; width: 100%; height: auto; }
.is-portfolio .jb-description a:has(img) { display: inline-block; max-width: 100%; margin-right: 8px; }
.jb-detail-page { background: #0a0a0a; padding: 110px 0 60px; margin: 0; }
.jb-detail-page.jb-detail-portfolio { background: white; }
.jb-direct-detail { width: min(1100px,calc(100vw - 48px)); margin: auto; }
.jb-direct-detail > .jb-item-panel { max-height: none; }
.jb-direct-detail > .is-instagram { height: calc(100vh - 140px); }
.jb-back-link { display: inline-block; color: #4f8ef7; text-decoration: none; margin-top: 24px; }
@media (max-width: 1200px) {
  .jb-item-media { min-height: 420px; }
  .jb-item-panel.is-instagram { grid-template-columns: minmax(320px,1fr) 420px; height: calc(100vh - 110px); max-height: calc(100vh - 110px); }
}
@media (max-width: 1024px) {
  .jb-modal-frame { margin-top: 72px; }
  .jb-item-panel.is-instagram { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; height: calc(100vh - 100px); max-height: calc(100vh - 100px); }
  .is-instagram .jb-item-body { max-width: none; height: auto; max-height: calc((100vh - 100px) * .42); }
}
@media (max-width: 768px) {
  .jb-modal-frame { width: calc(100vw - 20px); margin: 52px auto 18px; }
  .jb-modal-close { width: 32px; height: 32px; top: -40px; }
  .jb-item-panel { border-radius: 12px; max-height: calc(100vh - 86px); }
  .jb-item-media { min-height: 220px; }
  .jb-item-title { font-size: 22px; }
  .jb-portfolio-grid { grid-template-columns: minmax(0,1fr); }
  .is-portfolio .jb-description, .is-portfolio .jb-description > p:has(> img ~ img) { grid-template-columns: minmax(0,1fr); }
  .jb-direct-detail { width: calc(100vw - 20px); }
}

.jb-item-media > video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.jb-item-panel.is-instagram.is-embed-unavailable { display: block; height: auto; overflow: auto; }
.is-instagram.is-embed-unavailable .jb-item-media { aspect-ratio: 16/9; height: auto; min-height: 0; background: #000; }
.is-instagram.is-embed-unavailable .jb-item-body { height: auto; max-width: none; max-height: none; overflow: visible; }