/* ==========================================================================
   세대별 실손보험(실비) 한눈에 보기 — 그림 모양 (silson-gens.js)
   claim-check.html · library.html 에서 함께 씁니다.
   그림이 놓인 자리의 폭에 따라 배치가 바뀌어요 (컨테이너 쿼리):
   넓으면 1~4세대 네 칸, 자료 창·태블릿 폭이면 두 칸, 휴대폰 폭이면 두 칸 + 작은 글씨.
   ========================================================================== */
.gx {
  --gx-navy: #0D1B2E;
  --gx-gold: #B08D57;
  container-type: inline-size;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid #E8DFCF;
  border-radius: 18px;
  background: #F7F3EC;
  color: #1F2937;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  line-height: 1.6;
  word-break: keep-all;
  text-align: left;
}
.gx *, .gx *::before, .gx *::after { box-sizing: border-box; }
.gx h3, .gx h4, .gx p, .gx ul { margin: 0; font-family: inherit; letter-spacing: normal; }
.gx strong, .gx b { color: inherit; }
.gx-head { margin-bottom: 1.3rem; text-align: center; }
.gx-kicker { margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: #7A5F33; }
.gx .gx-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 900; line-height: 1.25; color: var(--gx-navy); text-wrap: balance; }
.gx-title mark { padding: 0 0.2em; border-radius: 4px; background: #F2DDA4; color: inherit; }
.gx-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.gx-card, .gx-five { --c: #0F766E; --bg: #E6F4F1; --soft: rgba(15, 118, 110, 0.35); position: relative; border: 2px solid var(--c); background: var(--bg); text-align: center; }
.gx-card { padding: 0.9rem 0.75rem 1rem; border-radius: 16px; }
.gx-g1 { --c: #0F766E; --bg: #E6F4F1; --soft: rgba(15, 118, 110, 0.35); --tint: #D2EEE8; }
.gx-g2 { --c: #1D4ED8; --bg: #E9EFFC; --soft: rgba(29, 78, 216, 0.3); --tint: #DAE5FD; }
.gx-g3 { --c: #7E22CE; --bg: #F3EAFB; --soft: rgba(126, 34, 206, 0.3); --tint: #EDDDFA; }
.gx-g4 { --c: #BE123C; --bg: #FCECEF; --soft: rgba(190, 18, 60, 0.3); --tint: #FADBE2; }
.gx-g5 { --c: #4338CA; --bg: #EEEDFB; --soft: rgba(67, 56, 202, 0.3); --tint: #DFDDFA; }
.gx .gx-tag { display: inline-block; margin: 0 0 0.25rem; padding: 0.3rem 1.3rem; border-radius: 10px; background: var(--c); color: #fff; font-size: 1.2rem; font-weight: 900; line-height: 1.5; }
.gx .gx-when { margin: 0 0 0.2rem; font-size: 0.88rem; font-weight: 800; color: var(--c); }
.gx-box { margin-top: 0.7rem; padding: 0.55rem 0.5rem 0.65rem; border: 1.5px solid var(--soft); border-radius: 12px; background: #fff; }
.gx-lbl { display: inline-block; margin-bottom: 0.35rem; padding: 0.12rem 0.8rem; border-radius: 6px; background: #475569; color: #fff; font-size: 0.8rem; font-weight: 800; }
/* 1~4세대 카드의 '보장 비율 · 갱신 · 보장 한도' 이름표는 그 세대 색으로 밝게 */
.gx-card .gx-lbl { border: 1px solid var(--soft); background: var(--tint); color: var(--c); }
.gx .gx-box p { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--c); }
.gx-box p strong { font-size: 1.12em; font-weight: 900; }
.gx-box p span { font-size: 0.8em; color: #475569; }
.gx-box em, .gx-sub em { margin-right: 0.15rem; font-style: normal; font-weight: 800; color: #334155; }
.gx-box small { display: block; margin-top: 0.2rem; font-size: 0.74rem; color: #64748B; }
.gx .gx-notes { margin: 0.7rem 0 0; padding: 0.55rem 0.65rem; border: 1.5px dashed var(--c); border-radius: 12px; background: #fff; list-style: none; text-align: left; font-size: 0.8rem; line-height: 1.45; color: #334155; }
.gx-notes li { position: relative; padding-left: 0.85em; }
.gx-notes li + li { margin-top: 0.2rem; }
.gx-notes li::before { content: '•'; position: absolute; left: 0; color: var(--c); font-weight: 900; }
.gx .gx-mine { display: none; margin: 0; }
.gx .is-mine { box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.55); }
.gx .is-mine .gx-mine { display: block; position: absolute; top: 8px; right: 8px; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--gx-gold); color: #fff; font-size: 0.74rem; font-weight: 800; line-height: 1.6; }
.gx-arrow { margin: 0.5rem 0 0.3rem; text-align: center; line-height: 0; }
.gx-arrow svg { display: inline-block; }
.gx-arrow path { fill: #C8A465; }
.gx-five { padding: 1rem; border-radius: 18px; }
.gx-five-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.8rem; margin-bottom: 0.8rem; }
.gx .gx-five-head .gx-tag { margin: 0; padding: 0.35rem 2rem; font-size: 1.35rem; }
.gx .gx-five-head .gx-when { margin: 0; font-size: 0.95rem; }
.gx-five-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gx-sub { padding: 0.8rem 0.8rem 0.9rem; border: 1.5px solid var(--soft); border-radius: 14px; background: #fff; }
.gx-sub .gx-lbl { padding: 0.25rem 1rem; background: var(--c); font-size: 0.92rem; }
.gx .gx-sub p { margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.45; color: #1F2937; }
.gx .gx-sub p.gx-big { margin-top: 0.2rem; font-size: 1.2rem; font-weight: 900; color: var(--c); }
.gx-big span { display: block; font-size: 0.8rem; font-weight: 700; color: #475569; }
.gx .gx-sub p.gx-new { padding: 0.3rem 0.5rem; border-radius: 8px; background: #ECFDF5; color: #065F46; font-weight: 700; }
.gx .gx-sub p.gx-no { padding: 0.3rem 0.5rem; border-radius: 8px; background: #FEF2F2; color: #991B1B; }
.gx-sub small { display: block; margin-top: 0.55rem; padding-top: 0.45rem; border-top: 1px dashed #CBD5E1; font-size: 0.78rem; color: #475569; }
.gx .gx-foot { margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-left: 4px solid var(--gx-gold); border-radius: 0 12px 12px 0; background: #fff; font-size: 0.86rem; color: #334155; }
.gx .gx-foot strong { color: #1F2937; }
.gx .gx-src { margin: 0.6rem 0 0; font-size: 0.72rem; color: #8A98A8; text-align: center; }

/* 그림 폭이 좁으면 (자료 창 · 태블릿): 1~4세대 두 칸, 5세대 한 줄씩 */
@container (max-width: 860px) {
  .gx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-five-cols { grid-template-columns: minmax(0, 1fr); }
}
/* 휴대폰 폭: 두 칸 그대로, 글자·여백을 줄여서 짧게 */
@container (max-width: 520px) {
  .gx-cols { gap: 8px; }
  .gx-card { padding: 0.6rem 0.4rem 0.7rem; border-radius: 12px; }
  .gx .gx-tag { padding: 0.2rem 0.8rem; font-size: 1rem; }
  .gx .gx-when { font-size: 0.74rem; }
  .gx-box { margin-top: 0.45rem; padding: 0.4rem 0.3rem 0.45rem; border-radius: 10px; }
  .gx-lbl { padding: 0.08rem 0.5rem; font-size: 0.7rem; }
  .gx .gx-box p { font-size: 0.84rem; }
  .gx-box small { font-size: 0.66rem; }
  .gx .gx-notes { margin-top: 0.45rem; padding: 0.4rem 0.45rem; font-size: 0.7rem; }
  .gx .is-mine .gx-mine { top: 4px; right: 4px; font-size: 0.64rem; }
  .gx-five { padding: 0.7rem 0.55rem; }
  .gx-five-cols { gap: 8px; }
  .gx-sub { padding: 0.6rem 0.6rem 0.7rem; }
  .gx .gx-sub p { font-size: 0.82rem; }
  .gx .gx-sub p.gx-big { font-size: 1.05rem; }
  .gx .gx-foot { font-size: 0.8rem; }
}
@media (max-width: 560px) {
  .gx { padding: 14px 10px; }
}
/* 컨테이너 쿼리를 모르는 오래된 브라우저 */
@supports not (container-type: inline-size) {
  @media (max-width: 1000px) {
    .gx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gx-five-cols { grid-template-columns: minmax(0, 1fr); }
  }
}

/* 살짝 움찔: 그림이 보이면 1세대 → 5세대 차례로 한 번, 마우스를 올리거나 누르면 그 카드만 한 번 더.
   고객님 세대는 두 번 움찔해요. 움직임을 줄이는 설정을 켠 사람에게는 움직이지 않아요. */
@keyframes gx-nudge {
  0%, 100% { transform: none; }
  20% { transform: translateY(-6px) rotate(-1deg); }
  45% { transform: translateY(0) rotate(0.8deg); }
  68% { transform: translateY(-2px) rotate(-0.4deg); }
  86% { transform: translateY(0) rotate(0.15deg); }
}
@keyframes gx-nudge-wide {
  0%, 100% { transform: none; }
  25% { transform: translateY(-6px); }
  52% { transform: translateY(1px); }
  76% { transform: translateY(-2px); }
}
@keyframes gx-nudge-twice {
  0%, 50%, 100% { transform: none; }
  10%, 60% { transform: translateY(-6px) rotate(-1deg); }
  22%, 72% { transform: translateY(0) rotate(0.8deg); }
  34%, 84% { transform: translateY(-2px) rotate(-0.4deg); }
}
@keyframes gx-nudge-wide-twice {
  0%, 50%, 100% { transform: none; }
  12%, 62% { transform: translateY(-6px); }
  26%, 76% { transform: translateY(1px); }
  38%, 88% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .gx.gx-play .gx-card { animation: gx-nudge 0.7s ease-in-out both; }
  .gx.gx-play .gx-five { animation: gx-nudge-wide 0.7s ease-in-out both; }
  .gx.gx-play .gx-g1 { animation-delay: 0.05s; }
  .gx.gx-play .gx-g2 { animation-delay: 0.22s; }
  .gx.gx-play .gx-g3 { animation-delay: 0.39s; }
  .gx.gx-play .gx-g4 { animation-delay: 0.56s; }
  .gx.gx-play .gx-g5 { animation-delay: 0.78s; }
  .gx.gx-play .gx-card.is-mine { animation-name: gx-nudge-twice; animation-duration: 1.5s; }
  .gx.gx-play .gx-five.is-mine { animation-name: gx-nudge-wide-twice; animation-duration: 1.5s; }
  .gx .gx-card:hover { animation: gx-nudge 0.7s ease-in-out; }
  .gx .gx-five:hover { animation: gx-nudge-wide 0.7s ease-in-out; }
}
.gx.is-export, .gx.is-export * { animation: none !important; }

/* 그림으로 저장할 때: 화면 크기와 상관없이 가로 1080px 판 */
.gx.is-export { width: 1080px; padding: 36px; border-radius: 0; border: 0; }
.gx.is-export .gx-title { font-size: 40px; }
.gx.is-export .gx-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gx.is-export .gx-five-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }