@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');

/* ============================================================
   2026 청강 한일 SF 워크숍 — 디자인 토큰
   포스터 아이덴티티(오프화이트 · 오렌지 · 네이비블루 · 블랙)를 웹으로 이식
   ============================================================ */
:root{
  /* 컬러 */
  --orange:#FF5722;          /* 면·그래픽 요소 (포스터 원색) */
  --orange-display:#F4511E;  /* 대형 타이틀 텍스트 (대비 3.19:1, AA Large) */
  --orange-ink:#D2400F;      /* 본문 크기 텍스트·버튼 (대비 4.72:1, AA) */
  --orange-soft:#FFF1EC;
  --blue:#1A4B8C;            /* '한일' · 오비트 · 일본 측 (대비 7.67:1) */
  --blue-soft:#EDF2FA;
  --ink:#111111;
  --ink-70:#3D3D42;
  --ink-50:#6B6B73;
  --ink-30:#9A9AA2;
  --bg:#F7F7F8;
  --card:#FFFFFF;
  --line:#E6E6E9;
  --line-soft:#F0F0F2;

  /* 타이포 */
  --sans:'Pretendard','Pretendard JP',-apple-system,BlinkMacSystemFont,'Segoe UI',
         'Hiragino Sans','Yu Gothic','Malgun Gothic',sans-serif;

  /* 간격 · 형태 */
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1080px;
  --shadow:0 1px 2px rgba(17,17,17,.04),0 8px 24px rgba(17,17,17,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  font-weight:400; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange-ink); outline-offset:2px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 타이틀 컬러 분절 (포스터 규칙) ───────────────────────── */
/* 줄바꿈 — br-mo 는 모바일에서만, br-all 은 항상 */
.br-mo{display:none}
.br-all{display:inline}

.c-orange{color:var(--orange-display)}
.c-blue{color:var(--blue)}
.c-ink{color:var(--ink)}

/* ── 헤더 ─────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(247,247,248,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head__in{display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:68px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
.brand img{height:28px; width:auto; flex:none}
/* 행사 타이포 규칙(2026·SF=오렌지, 한일=블루, 나머지=블랙)을 헤더에도 적용 */
.brand__title{font-weight:900; font-size:19px; letter-spacing:-.045em; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.lang{display:flex; align-items:center; gap:2px; flex:none;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:2px}
.lang a,.lang span{
  display:block; padding:4px 10px; font-size:12px; font-weight:700; letter-spacing:.02em;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink-50)}
.lang .is-on{background:var(--orange-ink); color:#fff}
.lang a:hover{background:var(--orange-soft); color:var(--orange-ink)}

/* ── 히어로 ───────────────────────────────────────────── */
.hero{position:relative; padding-block:clamp(20px,3.2vw,40px) clamp(40px,7vw,80px); overflow:hidden}
.hero__grid{position:relative; z-index:2; display:grid; gap:clamp(28px,5vw,48px);
  grid-template-columns:minmax(0,1fr)}
.hero__eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-50); margin:0 0 14px}
.hero__title{
  margin:0; font-weight:900; letter-spacing:-.045em; line-height:.98;
  font-size:clamp(44px,10.5vw,104px);
}
.hero__title .l{display:block}

/* 일본어판 — 'SFワークショップ' 가 한국어 대비 2배 폭이라 2줄 구성 + 전용 크기 */
html[lang="ja"] .hero__title{font-size:clamp(32px,8.2vw,68px); line-height:1.06}
.hero__tagline{
  margin:26px 0 0; padding-left:16px; border-left:3px solid var(--orange);
  font-size:clamp(15px,2.2vw,19px); font-weight:500; color:var(--ink-70); max-width:34em;
}
.hero__date{margin-top:clamp(32px,5vw,52px); max-width:560px}
.hero__date .y{font-size:clamp(15px,2vw,19px); font-weight:700; letter-spacing:.02em}
.hero__date .row{
  display:flex; align-items:baseline; gap:clamp(10px,2.5vw,22px);
  font-weight:300; letter-spacing:-.03em; line-height:1;
  font-size:clamp(38px,8.5vw,72px); margin-top:2px;
}
.hero__date .w{font-size:.34em; font-weight:700; letter-spacing:.06em; margin-left:.12em}
.hero__date .w--from{color:var(--blue)}
.hero__date .w--to{color:var(--orange-ink)}
.hero__date .dash{color:var(--ink-30); font-weight:200}
.hero__date .rule{height:3px; background:var(--orange); margin-top:12px; border-radius:2px}
.hero__meta{margin:16px 0 0; font-size:14px; color:var(--ink-50); line-height:1.7}
.hero__meta b{color:var(--ink-70); font-weight:600}

.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}

/* 개교 30주년 엠블럼 — 히어로 우상단 (본문 그리드와 겹치지 않는 여백 영역) */
.hero__emblem{margin:0 0 22px; padding-inline:var(--gutter)}
.hero__emblem img{width:186px; height:auto}

@media (min-width:1000px){
  .hero__emblem{
    position:absolute; z-index:3; top:clamp(10px,1.6vw,22px);
    right:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
    margin:0; padding-inline:0;
  }
  .hero__emblem img{width:204px}
}

/* 오비트 키비주얼 — 공식 모션 포스터의 그래픽 영역 크롭본 */
.hero__media{
  position:relative; z-index:1; pointer-events:none;
  margin-inline:calc(var(--gutter) * -.5);
}
.hero__video{
  width:100%; height:auto; display:block; aspect-ratio:1020/1080;
  object-fit:cover;
  /* 영상 배경(#F2EEEE)이 페이지 배경(#F7F7F8)과 미세하게 달라 가장자리를 녹인다 */
  -webkit-mask-image:radial-gradient(ellipse 66% 66% at 55% 50%,#000 34%,rgba(0,0,0,.55) 62%,transparent 82%);
  mask-image:radial-gradient(ellipse 66% 66% at 55% 50%,#000 34%,rgba(0,0,0,.55) 62%,transparent 82%);
}

/* ── 버튼 ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-sm);
  font-size:14px; font-weight:700; letter-spacing:-.01em; text-decoration:none;
  background:var(--orange-ink); color:#fff; border:1px solid var(--orange-ink);
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:#b5350c; transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{background:var(--card); border-color:var(--ink-30)}

/* ── 탭 · 필터 ────────────────────────────────────────── */
.tabs{position:sticky; top:68px; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--line)}
.tabs__in{display:flex; gap:4px}
.tab{
  appearance:none; border:0; background:none; cursor:pointer; font-family:inherit;
  padding:16px 4px 13px; margin-right:26px;
  font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--ink-30);
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .15s;
}
.tab:hover{color:var(--ink-70)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--orange)}

.section{padding-block:clamp(36px,6vw,64px)}
.section__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:clamp(22px,3vw,34px)}
.section__title{margin:0; font-size:clamp(21px,3.4vw,28px); font-weight:800; letter-spacing:-.035em}
.section__note{margin:6px 0 0; font-size:13px; color:var(--ink-50)}

.filters{display:flex; flex-wrap:wrap; gap:6px}
.filter{
  appearance:none; cursor:pointer; font-family:inherit;
  padding:7px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--card);
  font-size:13px; font-weight:600; color:var(--ink-50); transition:all .15s;
}
.filter:hover{border-color:var(--ink-30); color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* ── 프로그램 ─────────────────────────────────────────── */
.day{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px}
.day__head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px; padding:18px clamp(18px,3vw,28px); border-bottom:1px solid var(--line-soft)}
.day__title{margin:0; font-size:clamp(15px,2.2vw,17px); font-weight:800; letter-spacing:-.03em}
.day__n{color:var(--orange-ink)}
.day__place{font-size:12.5px; color:var(--ink-50); font-weight:500}
.day__notes{padding:12px clamp(18px,3vw,28px); background:var(--blue-soft);
  border-bottom:1px solid var(--line-soft); display:grid; gap:6px}
.day__note{font-size:13px; color:var(--blue); font-weight:500}

.block{display:grid; grid-template-columns:104px minmax(0,1fr); gap:clamp(12px,2vw,22px);
  padding:clamp(16px,2.4vw,22px) clamp(18px,3vw,28px);
  border-top:1px solid var(--line-soft); position:relative}
.block:first-child{border-top:0}
.block__time{font-size:12.5px; font-weight:700; color:var(--ink-50);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; padding-top:2px}
.block--session .block__time{color:var(--orange-ink)}
.block--session::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--orange)}
.block--break{background:#FCFCFD}
.block--break .block__title{color:var(--ink-50); font-weight:600}
.block__title{margin:0; font-size:clamp(15px,2.1vw,17px); font-weight:700; letter-spacing:-.025em}
.block__sub{margin:5px 0 0; font-size:13.5px; color:var(--blue); font-weight:500}
.block__badge{display:inline-block; margin-left:8px; vertical-align:2px;
  padding:3px 9px; border-radius:var(--r-sm); background:var(--orange-soft);
  color:var(--orange-ink); font-size:11.5px; font-weight:700; letter-spacing:-.01em}
.block__body{margin:12px 0 0; font-size:14.5px; line-height:1.85; color:var(--ink-70)}
.block__body em{font-style:normal; color:var(--orange-ink); font-weight:600}
.block__link{display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:13px; font-weight:700; color:var(--orange-ink); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px}

/* ── 작가 ─────────────────────────────────────────────── */
.group{margin-bottom:clamp(34px,5vw,56px)}
.group__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding-bottom:12px; margin-bottom:20px; border-bottom:2px solid var(--ink)}
.group__title{margin:0; font-size:clamp(17px,2.6vw,20px); font-weight:800; letter-spacing:-.03em}
.group__cap{font-size:12.5px; color:var(--ink-50)}
.group--jp .group__title::before,
.group--kr .group__title::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:9px; vertical-align:1px}
.group--kr .group__title::before{background:var(--blue)}
.group--jp .group__title::before{background:var(--orange)}

.people{display:grid; gap:14px; align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.person{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,24px); box-shadow:var(--shadow); display:flex; flex-direction:column}
.person__head{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.person__no{font-size:12px; font-weight:700; color:var(--ink-30);
  font-variant-numeric:tabular-nums}
.person__name{margin:0; font-size:18px; font-weight:800; letter-spacing:-.035em}
.person__native{font-size:13.5px; font-weight:500; color:var(--ink-50); letter-spacing:0}
.person__tag{margin-left:auto; padding:3px 9px; border-radius:var(--r-sm);
  font-size:11px; font-weight:700; letter-spacing:.02em}
.person--kr .person__tag{background:var(--blue-soft); color:var(--blue)}
.person--jp .person__tag{background:var(--orange-soft); color:var(--orange-ink)}

.person__bio{margin:12px 0 0; font-size:14px; line-height:1.85; color:var(--ink-70);
  white-space:pre-line}

/* 대표작 */
.works{margin-top:auto; padding-top:16px}
.works__label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-30); margin:0 0 10px}
.works__list{display:flex; gap:12px; flex-wrap:wrap; margin:0; padding:0; list-style:none}
.work{width:82px}
.work__link{text-decoration:none; display:block}
.work__cover{width:82px; aspect-ratio:2/3; object-fit:cover; border-radius:var(--r-sm);
  background:var(--line-soft); border:1px solid var(--line);
  transition:transform .18s ease, box-shadow .18s ease}
.work__link:hover .work__cover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(17,17,17,.14)}
.work__title{margin:7px 0 0; font-size:11.5px; font-weight:600; line-height:1.45;
  color:var(--ink-70); letter-spacing:-.02em}
.work__note{display:block; font-size:10.5px; font-weight:500; color:var(--ink-30); margin-top:2px}
/* 표지를 못 구한 작품 — 표지와 동일한 규격의 자리표시 박스 */
.work__cover--blank{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:8px 7px; border-style:dashed; background:#FBFBFC; overflow:hidden;
}
.work__blanktitle{font-size:11px; font-weight:700; line-height:1.35; color:var(--ink-50);
  letter-spacing:-.03em; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; overflow-wrap:anywhere}
.work__title--note{margin-top:7px}
.work__title--note .work__note{margin-top:0}

/* ── 푸터 ─────────────────────────────────────────────── */
.site-foot{margin-top:clamp(48px,8vw,96px); border-top:1px solid var(--line);
  background:var(--card)}
.site-foot__in{display:grid; gap:28px; padding-block:clamp(34px,5vw,54px)}
.hosts{display:flex; flex-wrap:wrap; gap:8px 26px; margin:0; padding:0; list-style:none}
.hosts li{font-size:14px; font-weight:600; color:var(--ink-70)}
.slogan{display:flex; gap:clamp(14px,4vw,38px); flex-wrap:wrap;
  font-size:clamp(13px,2.2vw,17px); font-weight:800; letter-spacing:.3em; margin:0}
.slogan span:nth-child(1){color:var(--ink)}
.slogan span:nth-child(2){color:var(--orange-ink)}
.slogan span:nth-child(3){color:var(--blue)}
.foot-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; padding-top:22px; border-top:1px solid var(--line-soft)}
.foot-bar__sig{height:26px; width:auto}
.foot-bar p{margin:0; font-size:12px; color:var(--ink-30)}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:720px){
  .site-head__in{height:60px}
  .brand__title{font-size:16px}
  .brand img{height:24px}
  .tabs{top:60px}
  .tab{font-size:14px; margin-right:18px}
  .block{grid-template-columns:1fr; gap:8px}
  .block__time{padding-top:0}
  .people{grid-template-columns:1fr}
  .br-mo{display:inline}
  .hero__title{font-size:clamp(38px,12vw,60px)}
  .hero{padding-block:32px 24px}
  .hero__grid{gap:8px}
  .hero__media{margin-inline:calc(var(--gutter) * -1); margin-top:-8px}
}
@media (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:center}
  html[lang="ja"] .hero__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .hero__media{margin-inline:0; margin-right:calc(var(--gutter) * -1.4)}
}

/* ── 교수진 카드 부가 정보 ─────────────────────────────── */
.person__role{font-size:12px; font-weight:700; color:var(--orange-ink);
  padding:2px 8px; border-radius:var(--r-sm); background:var(--orange-soft)}
.person--ck .person__tag{background:#EEF3EE; color:#3B6B45}
.person--ck .person__no{color:var(--ink-30)}
.person__courses{margin:12px 0 0; padding:11px 13px; border-radius:var(--r-sm);
  background:#FBFBFC; border:1px solid var(--line);
  font-size:12.5px; line-height:1.7; color:var(--ink-50)}
.person__courses b{color:var(--ink-70); font-weight:700; margin-right:6px}
.group--ck .group__title::before{content:""; display:inline-block; width:9px; height:9px;
  border-radius:50%; margin-right:9px; vertical-align:1px; background:#3B6B45}

/* ── 캠퍼스 안내 ───────────────────────────────────────── */
.map{margin:0 0 clamp(28px,4vw,44px)}
.map__scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:clamp(10px,1.6vw,18px)}
.map__inner{position:relative; min-width:760px}
.map__img{width:100%; height:auto; display:block}
.map__credit{margin:10px 2px 0; font-size:12px; color:var(--ink-30)}

/* 마커가 좌표 위에 정확히 놓이도록 .pin 은 크기 없는 기준점으로 두고,
   라벨은 마커 옆에 절대 배치한다 (묶음을 통째로 중앙정렬하면 마커가 밀린다) */
.pin{position:absolute; width:0; height:0; pointer-events:none}
.pin__no{position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--orange-ink); color:#fff;
  font-size:13px; font-weight:800; font-style:normal;
  box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 3px 10px rgba(17,17,17,.28)}
.pin__label{position:absolute; top:0; left:20px; transform:translateY(-50%);
  white-space:nowrap; padding:3px 9px; border-radius:var(--r-sm);
  background:rgba(17,17,17,.9); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:-.02em}
.pin__label b{color:#FFB59B; font-weight:800}
/* 라벨이 옆 핀을 덮는 경우 반대쪽으로 */
.pin--left .pin__label{left:auto; right:20px}

.campus__label{margin:0 0 14px; font-size:15px; font-weight:800; letter-spacing:-.03em}
.venues{list-style:none; margin:0 0 clamp(30px,4vw,44px); padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.venue{display:flex; gap:13px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--orange); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--shadow)}
.venue__no{display:grid; place-items:center; flex:none; width:26px; height:26px;
  border-radius:50%; background:var(--orange-soft); color:var(--orange-ink);
  font-size:13px; font-weight:800}
.venue__name{margin:0; font-size:16px; font-weight:800; letter-spacing:-.03em}
.venue__role{margin:3px 0 0; font-size:12.5px; font-weight:700; color:var(--orange-ink)}
.venue__desc{margin:7px 0 0; font-size:13.5px; line-height:1.7; color:var(--ink-50)}

.facs{list-style:none; margin:0; padding:0; display:grid; gap:7px 18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fac{display:flex; align-items:baseline; gap:9px; font-size:13.5px; color:var(--ink-50)}
.fac__no{flex:none; min-width:20px; font-size:12px; font-weight:700; color:var(--ink-30);
  font-variant-numeric:tabular-nums}
.fac.is-venue{color:var(--ink); font-weight:700}
.fac.is-venue .fac__no{color:var(--orange-ink)}

@media (max-width:720px){
  .pin__label{display:none}
  .map__inner{min-width:700px}
}

/* ── 참가신청 안내 팝업 ─────────────────────────────────── */
.notice{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:20px}
.notice[hidden]{display:none}
.notice__backdrop{position:absolute; inset:0; background:rgba(17,17,17,.45);
  backdrop-filter:blur(2px); animation:noticeFade .18s ease}
.notice__panel{position:relative; width:min(440px,100%); max-height:88vh; overflow:auto;
  background:var(--card); border-radius:var(--r-lg); padding:clamp(24px,4vw,32px);
  box-shadow:0 18px 60px rgba(17,17,17,.28); border-top:5px solid var(--orange);
  animation:noticeUp .22s cubic-bezier(.2,.8,.3,1)}
@keyframes noticeFade{from{opacity:0}}
@keyframes noticeUp{from{opacity:0; transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  .notice__backdrop,.notice__panel{animation:none}
}
.notice__x{position:absolute; top:10px; right:12px; appearance:none; border:0;
  background:none; cursor:pointer; font-size:26px; line-height:1; color:var(--ink-30);
  padding:4px 8px; border-radius:var(--r-sm)}
.notice__x:hover{color:var(--ink); background:var(--line-soft)}
.notice__eyebrow{margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-ink)}
.notice__title{margin:0; font-size:clamp(19px,3vw,23px); font-weight:800;
  letter-spacing:-.035em; line-height:1.35}
.notice__body{margin:12px 0 0; font-size:14.5px; line-height:1.75; color:var(--ink-70)}
.notice__rows{margin:18px 0 0; padding:14px 16px; border-radius:var(--r-sm);
  background:#FBFBFC; border:1px solid var(--line); display:grid; gap:8px}
.notice__row{display:flex; gap:12px; font-size:13.5px; line-height:1.6}
.notice__row dt{flex:none; min-width:64px; font-weight:700; color:var(--ink-50)}
.notice__row dd{margin:0; color:var(--ink); font-weight:600}
.notice__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:20px}
.notice__actions{display:flex; flex-wrap:wrap; gap:9px}
.notice__actions .btn{justify-content:center}
.notice__skip{display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--ink-50); cursor:pointer}
.notice__skip input{accent-color:var(--orange-ink); cursor:pointer}

/* 이미지 팝업 — 안내가 이미지 안에 다 들어 있어 여백 없이 꽉 채운다 */
.notice__panel--image{width:min(600px,100%); padding:0; border-top:0; overflow:hidden}
.notice__img{width:100%; height:auto; display:block}
/* 이미지 우상단에 그려진 X 위에 겹치는 투명 버튼 */
.notice__hotx{position:absolute; top:0; right:0; width:12%; aspect-ratio:1;
  min-width:44px; min-height:44px; appearance:none; border:0; background:none;
  cursor:pointer; border-radius:var(--r-sm)}
.notice__hotx:focus-visible{outline:2px solid #fff; outline-offset:-4px}
.notice__panel--image .notice__bar{margin:0; padding:14px clamp(16px,3vw,20px);
  border-top:1px solid var(--line)}