/* 남호진 원장 쇼츠 영상 블록 — theme/basic/_shorts.php 가 출력한다.
   home = 홈 히어로와 같은 남색, detail = 진료 상세(.st)와 같은 모래색. */
.ss {
    --ss-accent: #263b8b;
    --ss-ink: #142b3b;
    --ss-muted: #5b6475;
    --ss-bg: #eef1f8;
    color: var(--ss-ink);
    font-family: 'NanumSquareWeb', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    word-break: keep-all;
    text-align: left;
    clear: both;
}
.ss--detail {
    --ss-accent: #927552;
    --ss-ink: #242524;
    --ss-muted: #6d6d67;
    --ss-bg: #f6f4f0;
    font-family: 'Noto Sans KR', 'NanumSquareWeb', 'Apple SD Gothic Neo', sans-serif;
}
.ss *, .ss *:before, .ss *:after { box-sizing: border-box; }

.ss .ss-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2.3fr);
    gap: 56px;
    align-items: center;
    width: calc(100% - 72px);
    max-width: 1500px;
    margin: 0 auto 90px;
    padding: 56px 60px;
    border-radius: 36px;
    background: var(--ss-bg);
}
.ss--detail .ss-inner { max-width: 1380px; margin: 0 auto 110px; border-radius: 20px; }

.ss .ss-eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .2em; line-height: 1.6; color: var(--ss-accent); }
.ss .ss-head h2 { margin: 0 0 20px; font-size: clamp(28px, 2.5vw, 40px); font-weight: 800; line-height: 1.32; letter-spacing: -.045em; color: var(--ss-ink); }
.ss .ss-lead { margin: 0; font-size: 17px; line-height: 1.8; color: var(--ss-muted); }
.ss .ss-more { display: inline-flex; align-items: center; gap: 26px; margin-top: 28px; padding: 9px 0; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 700; color: var(--ss-accent); text-decoration: none; }

/* 영상 수(--ss-n)만큼만 칸을 만들고, 한 칸이 너무 넓어지지 않게 막는다. */
.ss .ss-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(var(--ss-n, 3), minmax(0, 1fr)); gap: 20px; width: 100%; max-width: calc(var(--ss-n, 3) * 300px); justify-self: center; margin: 0; padding: 0; list-style: none; }
.ss .ss-item { min-width: 0; margin: 0; padding: 0; list-style: none; }

/* 4편 이상: 한 줄로 두고 옆으로 넘긴다. PC 는 세 장씩 보인다. */
.ss .ss-list--scroll { display: flex; max-width: none; justify-self: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 14px; }
.ss .ss-list--scroll::-webkit-scrollbar { display: none; }
.ss .ss-list--scroll .ss-item { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.ss .ss-nav { display: flex; gap: 10px; margin-top: 30px; }
.ss .ss-step { width: 46px; height: 46px; border: 1px solid var(--ss-accent); border-radius: 50%; background: #fff; color: var(--ss-accent); font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.ss .ss-step:hover:not(:disabled) { background: var(--ss-accent); color: #fff; }
.ss .ss-step:disabled { opacity: .3; cursor: default; }

/* 9:16 틀 — aspect-ratio 를 못 쓰는 옛 브라우저도 같은 비율이 나오게 padding 으로 잡는다. */
.ss .ss-frame { position: relative; overflow: hidden; border-radius: 20px; background: #0d1520; box-shadow: 0 14px 34px rgba(20, 43, 59, .16); }
.ss .ss-frame:before { content: ''; display: block; padding-top: 177.78%; }
.ss .ss-play, .ss .ss-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.ss .ss-play { display: block; margin: 0; padding: 0; background: none; cursor: pointer; }
.ss .ss-play picture { display: block; width: 100%; height: 100%; }
.ss .ss-play img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .45s ease; }
.ss .ss-play:hover img { transform: scale(1.035); }
.ss .ss-play:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.ss .ss-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
/* 누른 뒤 유튜브 플레이어가 뜰 때까지 도는 표시 */
.ss .ss-frame.is-loading:after { content: ''; position: absolute; top: 50%; left: 50%; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: ss-spin .8s linear infinite; pointer-events: none; }
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* 썸네일 가운데에는 영상 자막이 박혀 있어서 재생 단추는 아래 왼쪽에 둔다. */
.ss .ss-icon { position: absolute; left: 14px; bottom: 14px; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.ss .ss-icon:after { content: ''; position: absolute; top: 15px; left: 19px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ss-accent); }
.ss .ss-time { position: absolute; right: 14px; bottom: 26px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; }

.ss .ss-title { margin: 16px 2px 6px; font-size: 18px; font-weight: 800; line-height: 1.42; letter-spacing: -.03em; color: var(--ss-ink); }
.ss .ss-by { margin: 0 2px; font-size: 13px; line-height: 1.5; color: var(--ss-muted); }

@media (max-width: 1180px) {
    .ss .ss-list { justify-self: start; }
    .ss .ss-inner { grid-template-columns: 1fr; gap: 34px; padding: 48px 40px; }
    .ss .ss-head h2 br { display: none; }
}

/* 휴대폰: 가로로 넘겨 보는 줄 하나 */
@media (max-width: 767px) {
    .ss .ss-inner, .ss--detail .ss-inner { width: auto; margin: 0 0 56px; padding: 40px 0 34px; border-radius: 0; gap: 24px; }
    .ss .ss-head { padding: 0 20px; }
    .ss .ss-eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: .16em; }
    .ss .ss-head h2 { margin-bottom: 14px; font-size: 26px; }
    .ss .ss-lead { font-size: 15px; line-height: 1.75; }
    .ss .ss-more { margin-top: 18px; font-size: 14px; }
    .ss .ss-list { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 6px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ss .ss-list::-webkit-scrollbar { display: none; }
    .ss .ss-item, .ss .ss-list--scroll .ss-item { flex: 0 0 62%; max-width: 250px; scroll-snap-align: start; }
    .ss .ss-nav { display: none; }
    .ss .ss-frame { border-radius: 16px; }
    .ss .ss-title { margin-top: 12px; font-size: 16px; }
    .ss .ss-by { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ss .ss-play img { transition: none; }
    .ss .ss-play:hover img { transform: none; }
}