/* 학원 갤러리 (2026-11-04) — 인스타그램식 어두운 화면. 사이트 톤(남색·주황·고래 머리말)과 일부러 다르게(사용자 결정).
   본문(.gal)과 상세 대화상자(.gal-dlg)만 꾸민다. 헤더·푸터는 사이트 그대로 */
.gal-page{
  --gal-bg:#0b0b0e; --gal-surface:#151519; --gal-raise:#1d1d23; --gal-line:rgba(255,255,255,.09); --gal-line-2:rgba(255,255,255,.16);
  --gal-text:#f4f4f6; --gal-muted:#a3a3ad; --gal-faint:#74747f; --gal-heart:#ff3b5c;
  --gal-ring:conic-gradient(from 200deg,#fdd772,#fb8a34,#f0436b,#fdd772);
  --gal-ease:cubic-bezier(.16,1,.3,1);
  background:var(--gal-bg)!important; color:var(--gal-text);
}
.gal-page ::selection{background:#f0436b;color:#fff}
.gal{container-type:inline-size;max-width:1440px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(8px,1.5vw,20px) 80px;color:var(--gal-text);scrollbar-color:#3a3a44 transparent}
.gal svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gal button,.gal-dlg button{font:inherit;color:inherit;cursor:pointer}
.gal :focus-visible,.gal-dlg :focus-visible{outline:2px solid #fdd772;outline-offset:3px;border-radius:6px}

/* ── 프로필 머리 */
.gal-profile{display:grid;grid-template-columns:minmax(96px,290px) 1fr;align-items:center;gap:clamp(20px,4vw,40px);padding-bottom:40px}
.gal-avatar{justify-self:center;width:clamp(86px,16vw,160px);aspect-ratio:1;border-radius:50%;padding:4px;background:var(--gal-ring)}
.gal-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#eef4ff;border:4px solid var(--gal-bg);display:block}
.gal-id-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gal-handle{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:500;letter-spacing:-.01em;margin:0;color:var(--gal-text)}
.gal-cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:9px;background:var(--gal-raise);color:var(--gal-text);font-weight:700;font-size:.9rem;text-decoration:none;transition:background .2s}
.gal-cta:hover{background:#2a2a32;color:var(--gal-text)}
.gal-stats{display:flex;gap:clamp(18px,4vw,40px);list-style:none;margin:20px 0;padding:0;font-size:1rem;color:var(--gal-text)}
.gal-stats b{font-weight:700;font-variant-numeric:tabular-nums}
.gal-bio{margin:0;line-height:1.55;font-size:.95rem;color:var(--gal-text)}
.gal-bio b{display:block;font-weight:700}
.gal-bio span{color:var(--gal-muted)}

/* ── 하이라이트 */
.gal-highlights{display:flex;gap:clamp(14px,3vw,34px);overflow-x:auto;padding:4px 4px 30px;margin:0 -4px;scrollbar-width:none;scroll-snap-type:x proximity}
.gal-highlights::-webkit-scrollbar{display:none}
.gal-hl{flex:none;width:clamp(68px,10vw,88px);display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;scroll-snap-align:start}
.gal-hl-ring{width:100%;aspect-ratio:1;border-radius:50%;padding:2px;background:var(--gal-line-2);transition:transform .35s var(--gal-ease)}
.gal-hl.is-on .gal-hl-ring{background:var(--gal-ring);padding:3px}
.gal-hl-ring span{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--gal-bg);background:var(--gal-raise) center/cover no-repeat}
.gal-hl-all span{display:grid;place-items:center;color:var(--gal-text)}
.gal-hl-all svg{width:42%;height:42%}
.gal-hl b{font-size:.78rem;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gal-text)}
.gal-hl:not(.is-on) b{color:var(--gal-muted)}
.gal-hl:hover .gal-hl-ring{transform:scale(1.05)}

/* ── 탭 · 센터 */
.gal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--gal-line);margin-bottom:4px;flex-wrap:wrap}
.gal-tabs{display:flex;gap:44px}
.gal-tab{display:flex;align-items:center;gap:6px;height:52px;margin-top:-1px;border:0;border-top:1px solid transparent;background:none;padding:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--gal-faint);transition:color .2s}
.gal-tab svg{width:14px;height:14px}
.gal-tab.is-on{color:var(--gal-text);border-top-color:var(--gal-text)}
.gal-tab:hover{color:var(--gal-text)}
.gal-centers{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.gal-chip{flex:none;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--gal-line-2);background:transparent;color:var(--gal-muted);font-size:.82rem;font-weight:600;transition:all .2s}
.gal-chip.is-on{background:var(--gal-text);border-color:var(--gal-text);color:#0b0b0e}
.gal-chip:not(.is-on):hover{color:var(--gal-text);border-color:var(--gal-faint)}

/* ── 격자: 한 줄 5개, 사진·영상 모두 3:4 — 인스타그램 웹 프로필 격자와 같은 비율(2026-11-05 실측 281×375). 폰은 3개 */
/* 프로필·하이라이트는 가운데 좁게, 격자는 넓게 — 인스타그램 웹과 같은 모양 */
.gal-profile,.gal-highlights{max-width:975px;margin-left:auto;margin-right:auto}
.gal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px}
.gal-tile{position:relative;display:block;overflow:hidden;background:var(--gal-surface);border:0;padding:0;border-radius:2px;aspect-ratio:3/4}
.gal-tile img,.gal-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--gal-ease),filter .4s}
.gal-tile:hover img,.gal-tile:hover video{transform:scale(1.04)}
/* 인스타그램 표지 사진이 없을 때 — 링 색 무늬 + 아이콘 */
.gal-ig-cover{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#fdd772,#fb8a34 45%,#f0436b);color:#fff}
.gal-ig-cover svg{width:34%;max-width:72px;height:auto;fill:none;stroke:currentColor;stroke-width:1.6}
.gal-badge{position:absolute;top:10px;right:10px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.gal-badge svg{width:22px;height:22px;stroke-width:2}
.gal-badge.is-play svg{fill:#fff;stroke:none}
.gal-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px;background:rgba(0,0,0,.42);color:#fff;font-weight:700;font-size:1rem;opacity:0;transition:opacity .25s}
.gal-hover span{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.gal-hover svg{width:20px;height:20px;fill:#fff;stroke:none}
.gal-tile:hover .gal-hover,.gal-tile:focus-visible .gal-hover{opacity:1}
.gal-tile-title{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:.82rem;font-weight:600;text-align:left;line-height:1.35;opacity:0;transition:opacity .25s}
.gal-tile:hover .gal-tile-title{opacity:1}
/* 등장 — 이미 보이는 상태가 기본이고, 스크립트가 붙인 is-pre 만 아래에서 떠오른다 */
.gal-tile.is-pre{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}
.gal-tile.is-in{transition:opacity .7s var(--gal-ease),transform .9s var(--gal-ease),filter .7s var(--gal-ease)}
.gal-skel{background:linear-gradient(100deg,var(--gal-surface) 30%,#1f1f26 50%,var(--gal-surface) 70%) 0 0/300% 100%;animation:gal-shine 1.4s linear infinite}
@keyframes gal-shine{to{background-position:-150% 0}}
.gal-empty{text-align:center;color:var(--gal-muted);padding:80px 0;margin:0}
.gal-more{height:1px}

/* ── 상세 */
.gal-dlg{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--gal-text);overflow:hidden}
.gal-dlg::backdrop{background:rgba(0,0,0,.86)}
.gal-dlg[open]{display:grid;place-items:center}
.gal-dlg[open] .gal-post{animation:gal-pop .45s var(--gal-ease)}
@keyframes gal-pop{from{transform:scale(.97)}}
.gal-x{position:fixed;top:14px;right:16px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:#fff}
.gal-dlg svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gal-nav{position:fixed;top:50%;z-index:3;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#111}
.gal-nav svg{width:20px;height:20px;stroke-width:2.4}
.gal-nav-prev{left:18px}.gal-nav-next{right:18px}
.gal-nav[hidden]{display:none}
.gal-post{display:grid;grid-template-columns:minmax(0,1fr) 400px;width:min(1200px,calc(100vw - 150px));height:min(88vh,860px);background:var(--gal-bg);border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gal-stage{position:relative;background:#000;overflow:hidden;touch-action:pan-y}
.gal-track{display:flex;height:100%;transition:transform .5s var(--gal-ease)}
.gal-slide{flex:none;width:100%;height:100%;display:grid;place-items:center}
.gal-slide img,.gal-slide video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.gal-slide iframe{width:100%;height:100%;border:0}
.gal-slide.is-short iframe{width:min(100%,calc((88vh) * 9 / 16))}
.gal-slide.is-ig{position:relative;background:#000}
.gal-slide.is-ig .gal-ig-cover{position:static;width:100%;height:100%}
.gal-slide.is-ig{overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.gal-ig-frame{width:460px;overflow:hidden;position:relative;flex:none;background:#fff;transform-origin:center center}
.gal-slide.is-ig iframe{display:block;width:460px;max-width:none;height:760px;background:#fff}
.gal-ig-link{position:absolute;right:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font-size:.78rem;font-weight:600;text-decoration:none}
.gal-ig-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gal-step{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#111;opacity:.9;transition:opacity .2s}
.gal-step svg{width:16px;height:16px;stroke-width:2.6}
.gal-step-prev{left:12px}.gal-step-next{right:12px}
.gal-step[hidden]{display:none}
.gal-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s}
.gal-dots i.is-on{background:#fff;transform:scale(1.15)}
.gal-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--gal-line)}
.gal-side-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--gal-line)}
.gal-mini{width:32px;height:32px;border-radius:50%;background:#eef4ff;object-fit:cover;flex:none}
.gal-d-title{margin:0;font-size:.95rem;font-weight:700;line-height:1.35;color:var(--gal-text)}
.gal-d-meta{margin:2px 0 0;font-size:.78rem;color:var(--gal-muted)}
.gal-scroll{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:#3a3a44 transparent}
.gal-caption{margin:0 0 18px;white-space:pre-wrap;line-height:1.65;font-size:.92rem;color:var(--gal-text)}
.gal-caption:empty{display:none}
.gal-comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.gal-cm{display:grid;grid-template-columns:28px 1fr auto;gap:10px;font-size:.88rem;line-height:1.5}
.gal-cm-av{width:28px;height:28px;border-radius:50%;background:var(--gal-raise);display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--gal-muted)}
.gal-cm b{font-weight:700;margin-right:6px}
.gal-cm p{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--gal-text)}
.gal-cm time{display:block;font-size:.72rem;color:var(--gal-faint);margin-top:2px}
.gal-cm-del{border:0;background:none;color:var(--gal-faint);font-size:.74rem;padding:0;align-self:start}
.gal-cm-del:hover{color:var(--gal-text)}
.gal-cm-none{color:var(--gal-faint);font-size:.85rem}
.gal-actions{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:4px;padding:8px 10px 12px;border-top:1px solid var(--gal-line)}
.gal-ic{width:42px;height:42px;display:grid;place-items:center;border:0;background:none;color:var(--gal-text);border-radius:50%;transition:color .2s}
.gal-ic:hover{color:var(--gal-muted)}
.gal-like[aria-pressed="true"]{color:var(--gal-heart)}
.gal-like[aria-pressed="true"] svg{fill:var(--gal-heart)}
.gal-like.is-pop svg{animation:gal-heart .45s var(--gal-ease)}
@keyframes gal-heart{30%{transform:scale(1.3)}60%{transform:scale(.92)}}
.gal-likes{grid-column:1/-1;margin:2px 6px 0;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.gal-date{grid-column:1/-1;margin:2px 6px 0;font-size:.74rem;color:var(--gal-faint)}
.gal-write{display:flex;align-items:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--gal-line)}
.gal-write[hidden]{display:none}
.gal-write textarea{flex:1;min-height:22px;max-height:96px;resize:none;border:0;background:none;color:var(--gal-text);font:inherit;font-size:.9rem;line-height:1.5;padding:4px 0;outline:none;caret-color:#fdd772}
.gal-write textarea::placeholder{color:var(--gal-faint)}
.gal-post-btn{border:0;background:none;color:#fdd772;font-weight:700;font-size:.9rem;padding:4px 2px}
.gal-post-btn:disabled{opacity:.4;cursor:default}
.gal-write-note{margin:0;padding:12px 16px;border-top:1px solid var(--gal-line);font-size:.84rem;color:var(--gal-muted)}
.gal-write-note a{color:#fdd772;font-weight:700}
.gal-write-note[hidden]{display:none}

/* ── 태블릿 */
@media (max-width:1100px){
  .gal-post{grid-template-columns:minmax(0,1fr) 340px;width:calc(100vw - 110px)}
  .gal-nav-prev{left:8px}.gal-nav-next{right:8px}
}
/* ── 폰: 머리는 한 줄 숫자, 상세는 화면 전체 (위 미디어, 아래 글) */
@media (max-width:768px){
  .gal{padding:22px 0 60px}
  .gal-profile{grid-template-columns:auto 1fr;padding:0 16px 22px;gap:18px}
  .gal-avatar{width:86px}
  .gal-id-row{gap:10px}
  .gal-stats{margin:10px 0 0;gap:18px;font-size:.88rem}
  .gal-bio{grid-column:1/-1;font-size:.88rem}
  .gal-profile .gal-bio{margin-top:-4px}
  .gal-highlights{padding:0 16px 20px;margin:0;gap:14px}
  .gal-bar{padding:0 12px;gap:0}
  .gal-tabs{flex:1;justify-content:space-around;gap:0}
  .gal-centers{width:100%;padding:6px 0 10px}
  .gal-grid{gap:1px}
  .gal-tile{border-radius:0}
  .gal-badge{top:7px;right:7px}
  .gal-tile-title{font-size:.72rem;padding:20px 8px 7px}
  .gal-nav{display:none}
  .gal-dlg[open]{display:block;overflow-y:auto;background:var(--gal-bg)}
  .gal-post{display:block;width:100%;height:auto;min-height:100%;border-radius:0;box-shadow:none}
  .gal-stage{height:auto;aspect-ratio:4/5;max-height:72vh}
  .gal-slide.is-short iframe{width:min(100%,calc(72vh * 9 / 16))}
  .gal-side{border-left:0}
  .gal-side-head{padding:12px 56px 12px 14px}
  .gal-scroll{overflow:visible}
  .gal-x{top:6px;right:6px;background:rgba(0,0,0,.4);border-radius:50%}
  .gal-step{display:none}
}
@media (max-width:480px){
  .gal-handle{font-size:1.1rem}
  .gal-cta{height:30px;padding:0 12px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  .gal-tile.is-pre{opacity:1;transform:none;filter:none}
  .gal *,.gal-dlg *{transition:none!important;animation:none!important}
}

/* 간단글 — 사진 없이 글만 있는 게시물 */
.gal-text-tile{position:absolute;inset:0;display:flex;align-items:center;padding:14%;background:linear-gradient(150deg,#26262e,#15151a);color:#f4efe6;font-size:clamp(.74rem,1.5cqw,.95rem);font-weight:600;line-height:1.55;overflow:hidden;word-break:keep-all;white-space:pre-line}
.gal-slide.is-text{background:linear-gradient(150deg,#26262e,#15151a)}
.gal-text-body{max-width:30em;margin:0;padding:8%;color:#f4efe6;font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:600;line-height:1.7;white-space:pre-line;word-break:keep-all;overflow:auto;max-height:100%}
.gal-dlg.is-text .gal-caption,.gal-dlg.is-text .gal-dots{display:none}
@media (max-width:600px){.gal-grid{grid-template-columns:repeat(3,1fr)}}