@charset "utf-8";
/* ============================================================
   WORKNEST — AI PLAY · AI MATE · AI ZIP 소개 (inc/intro.php 와 짝)

   .ix-frame  메인 화면의 한 칸. 한 화면(100vh)에 다 들어가도록 높이를 vh 로 조인다.
   .ix-page   메뉴 메인의 소개 절. 아래로 이어지는 화면이라 넉넉하게.

   메뉴마다 색이 다르다 (로고/참조/ai_*.png): PLAY 주황(브랜드) · MATE 파랑 · ZIP 초록.
   색은 .ix--play 같은 이름 아래의 변수에만 있다. 모양 규칙은 셋이 같이 쓴다.
   브랜드 가이드: 흰 둥근 카드, 여백 넉넉히, 주황은 로고 지정색 그대로.
   ============================================================ */

.ix--play {
  --ix: #EF5E27; --ix-ink: #C22924;
  --ix-soft: #FEF3EC; --ix-soft2: #FBDCCB;
  --ix-shadow: rgba(227, 62, 36, .28);
}
.ix--mate {
  --ix: #2563EB; --ix-ink: #1D4ED8;
  --ix-soft: #EEF4FF; --ix-soft2: #D6E4FF;
  --ix-shadow: rgba(37, 99, 235, .26);
}
.ix--zip {
  --ix: #16A34A; --ix-ink: #15803D;
  --ix-soft: #EDFAF1; --ix-soft2: #CDEFD9;
  --ix-shadow: rgba(22, 163, 74, .26);
}

/* 바탕 — 칠하지 않는다 (2026-09-29 사이트 주인: 배경 그라데이션 들어간 부분 모두 제거).
   .ix-bg--play · --mate · --zip 이름표는 칸을 가르는 데만 남겨 둔다. */

/* ── 틀 ────────────────────────────────────────────────────── */
.ix-in { display: grid; gap: clamp(16px, 2.6vh, 30px); }
.ix-top {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 3.4vw, 56px);
}

/* ── 글 ─────────────────────────────────────────────────────
   큰 워드마크 「ai PLAY」 → 무엇인지(kicker) → 제목(h2) → 한 줄 답(lead) → 단추 */
.ix-brand {
  display: flex; align-items: flex-end; gap: .12em;
  font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.4rem);
  font-weight: 900; line-height: 1; letter-spacing: -.035em;
}
/* 「Ai」 마크 — 벡터(inc/symbol.php 의 ai_mark_svg). 크게 키워도 선명하다.
   메인 칸이 보이면(.fp-panel.is-on) 테두리가 먼저 그려지고,
   이어서 안이 아래에서 위로 메뉴 색(PLAY 주황 · MATE 파랑 · ZIP 초록)으로 차오른다. */
.ix-mark {
  flex: 0 0 auto; width: 1.02em; height: 1.21em; margin-bottom: -.02em;
  overflow: visible;
}
.ix-mark .aim-fill { fill: var(--ix); }
.ix-mark .aim-line {
  fill: none; stroke: var(--ix); stroke-width: 3; stroke-linejoin: round;
  stroke-dasharray: 1.01 1.01; stroke-dashoffset: 0;
}
/* 메인 칸 — 보이기 전에는 비워 둔다 */
.fp-panel .ix-mark .aim-line { stroke-dashoffset: 1.01; }
.fp-panel .ix-mark .aim-fill { clip-path: inset(100% 0 0 0); }
.fp-panel.is-on .ix-mark .aim-line { animation: aimDraw 1.1s ease-in-out .3s forwards; }
.fp-panel.is-on .ix-mark .aim-fill { animation: aimFill .9s var(--ease) 1.25s forwards; }
@keyframes aimDraw { to { stroke-dashoffset: 0; } }
@keyframes aimFill { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .fp-panel .ix-mark .aim-line { stroke-dashoffset: 0; animation: none; }
  .fp-panel .ix-mark .aim-fill { clip-path: none; animation: none; }
}
.ix-word { color: var(--ix); }
.ix-kicker {
  margin-top: clamp(8px, 1.4vh, 14px);
  font-size: clamp(1.15rem, .9rem + .9vw, 1.7rem);
  font-weight: 800; color: var(--brand-ink); letter-spacing: -.02em;
}
.ix-title {
  margin-top: clamp(6px, 1vh, 10px);
  font-size: clamp(1.05rem, .92rem + .55vw, 1.42rem);
  font-weight: 700; line-height: 1.45; color: var(--ink);
}
.ix-hl { display: block; color: var(--ix-ink); font-weight: 800; }
.ix-lead {
  margin-top: clamp(8px, 1.3vh, 14px); max-width: 38em;
  font-size: clamp(.86rem, .82rem + .15vw, .96rem); line-height: 1.7; color: var(--gray);
}
.ix-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(12px, 2vh, 22px);
  height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--ix); color: #fff;
  font-size: .95rem; font-weight: 800;
  box-shadow: none;   /* 단추에는 그림자를 넣지 않는다 (사이트 전체의 약속) */
  transition: background-color .2s var(--ease);
}
.ix-cta:hover { background: var(--ix-ink); }
.ix-cta:focus-visible { outline: 3px solid var(--ix-soft2); outline-offset: 3px; }

/* 절 이름 — 「이렇게 학습해요 ─────」 */
.ix-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(8px, 1.3vh, 12px);
  font-size: .92rem; font-weight: 800; color: var(--ink);
}
.ix-label span { font-size: .8rem; font-weight: 500; color: var(--gray-2); }
.ix-label::after {
  content: ''; flex: 1 1 auto; height: 1px; min-width: 24px;
  background: var(--ix-soft2);
}

/* ── 카드 ──────────────────────────────────────────────────── */
.ix-cards { display: grid; gap: clamp(10px, 1vw, 14px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ix-cards[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ix-cards[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ix-card-in {
  display: flex; align-items: center; gap: 13px; height: 100%;
  padding: clamp(12px, 1.9vh, 18px) 16px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px rgba(16, 24, 40, .05);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.ix-card-in:hover { border-color: var(--ix-soft2); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 24, 40, .08); }
a.ix-card-in:focus-visible { outline: 3px solid var(--ix-soft2); outline-offset: 2px; }
.ix-card-ico, .ix-feat-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--ix-soft); color: var(--ix);
}
.ix-card-ico .ix-ico, .ix-feat-ico .ix-ico { width: 24px; height: 24px; }
.ix-card-txt { min-width: 0; }
.ix-card h3 { font-size: .96rem; line-height: 1.35; margin: 0 0 3px; }
.ix-card-txt > span { display: block; font-size: .8rem; line-height: 1.5; color: var(--gray); }
.ix-card.is-soon .ix-card-in { background: rgba(255, 255, 255, .6); border-style: dashed; border-color: var(--line); }
.ix-card.is-soon .ix-card-ico { filter: grayscale(1); opacity: .7; }
.ix-soon {
  display: inline-block; vertical-align: 2px; margin-left: 4px;
  padding: 1px 7px; border-radius: 999px; background: var(--bg-mute);
  font-size: .66rem; font-weight: 700; color: var(--gray-2);
}

/* ── 단계 — 번호 · 아이콘 · 글, 사이에 「›」 ──────────────────── */
.ix-steps { display: grid; gap: clamp(14px, 1.4vw, 20px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ix-step {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: clamp(10px, 1.6vh, 15px) 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .045);
}
.ix-step:not(:last-child)::after {
  content: '›';
  position: absolute; top: 50%; right: calc(clamp(14px, 1.4vw, 20px) / -2 - 5px);
  transform: translateY(-54%);
  font-size: 1.3rem; font-weight: 700; color: var(--gray-3);
}
.ix-step-no {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ix-soft); color: var(--ix-ink);
  font-size: .82rem; font-weight: 800;
}
.ix-step-ico { flex: 0 0 auto; color: var(--ix); }
.ix-step-ico .ix-ico { display: block; width: 24px; height: 24px; }
.ix-step-txt { min-width: 0; }
.ix-step h3 { font-size: .9rem; line-height: 1.3; margin: 0 0 1px; }
.ix-step-txt > span { display: block; font-size: .76rem; line-height: 1.45; color: var(--gray); }

/* ── 추천 줄 (메뉴 화면만) ───────────────────────────────────── */
.ix-feats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px; border-radius: 20px;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
}
.ix-feats li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
.ix-feats li + li { border-left: 1px solid var(--line-soft); }
.ix-feats b { display: block; font-size: .92rem; color: var(--ink); }
.ix-feats li > span:last-child { font-size: .8rem; color: var(--gray); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   그림 (인포그래픽) — 사진 없이 CSS 로 그린 화면
   ════════════════════════════════════════════════════════════ */
.ix-visual { position: relative; height: clamp(210px, 33vh, 360px); }
.ixv { position: absolute; inset: 0; }

.ixv-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: #fff; box-shadow: 0 10px 26px rgba(16, 24, 40, .12);
  font-size: .82rem; font-weight: 800; color: var(--ink); white-space: nowrap;
  animation: ixFloat 4.8s ease-in-out infinite;
}
.ixv-chip .ix-ico { width: 20px; height: 20px; color: var(--ix); }
.ixv-c1 { top: 2%;  left: 0; }
.ixv-c2 { top: 10%; right: 0; animation-delay: -1.6s; animation-duration: 5.4s; }
.ixv-c3 { bottom: 2%; right: 4%; animation-delay: -3.2s; animation-duration: 5s; }
/* 둥둥 떠다니기 — 위아래로 크게, 옆으로 살짝, 조금 기울며 */
@keyframes ixFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(3px, -7px) rotate(-.8deg); }
  50%      { transform: translate(0, -13px) rotate(0deg); }
  75%      { transform: translate(-3px, -6px) rotate(.8deg); }
}

/* PLAY — 영상 보는 창 */
.ixv-win {
  position: absolute; inset: 12% 7% 10% 12%;
  display: grid; grid-template-columns: 24% minmax(0, 1fr); gap: 10px;
  padding: 12px; border-radius: 20px;
  background: rgba(255, 255, 255, .72); border: 1px solid #fff;
  box-shadow: 0 24px 50px rgba(194, 41, 36, .14);
}
.ixv-side { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.ixv-side i { display: block; height: 14%; border-radius: 7px; background: var(--ix-soft); }
.ixv-side i:first-child { background: var(--ix-soft2); }
.ixv-screen { position: relative; border-radius: 13px; background: var(--ix); overflow: hidden; }
.ixv-playbtn {
  position: absolute; left: 50%; top: 46%; width: 22%; aspect-ratio: 1;
  transform: translate(-40%, -50%);
  background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .15));
}
.ixv-bar { position: absolute; left: 8%; right: 8%; bottom: 11%; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .4); }
.ixv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; border-radius: 5px; background: #fff; }

/* MATE — 1:1 대화 */
.ixv-chat {
  position: absolute; inset: 8% 10% 6% 6%;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 16px 18px; border-radius: 22px;
  background: rgba(255, 255, 255, .9); border: 1px solid #fff;
  box-shadow: 0 24px 50px rgba(29, 78, 216, .13);
}
.ixv-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: .78rem; line-height: 1.45; }
.ixv-msg.is-me { align-self: flex-end; background: var(--ix-soft); color: var(--ink); border-bottom-right-radius: 4px; }
.ixv-msg.is-coach { align-self: flex-start; background: var(--ix-ink); color: #fff; border-bottom-left-radius: 4px; }
.ixv-msg.is-coach b { display: block; font-size: .66rem; letter-spacing: .08em; opacity: .85; }
.ixv-badge {
  position: absolute; z-index: 3; top: 0; right: 2%;
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
  background: var(--ix-ink); color: #fff; font-size: 1.2rem; font-weight: 900;
  box-shadow: 0 12px 26px var(--ix-shadow);
  animation: ixFloat 5.2s ease-in-out -2.4s infinite;   /* 글자 표지도 함께 떠다닌다 */
}
.ixv-mate .ixv-c1 { top: auto; bottom: 0; left: 0; }
.ixv-mate .ixv-c3 { bottom: auto; top: 44%; right: 0; }

/* ZIP — 겹쳐 놓은 팁 카드 (제목은 실제 팁에서) */
.ixv-tip {
  position: absolute; width: 60%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;   /* 꼬리표와 제목을 한 줄에 — 뒤 카드도 제목이 보이게 */
  padding: 13px 16px 14px; border-radius: 18px;
  background: #fff; border: 1px solid var(--ix-soft2);
  box-shadow: 0 18px 40px rgba(21, 128, 61, .12);
}
/* 뒤 카드의 제목 줄이 앞 카드에 가리지 않게 간격을 둔다 (뒤 카드는 제목까지만 보이면 된다) */
.ixv-t1 { left: 10%; top: calc(50% + 4px);   z-index: 3; }   /* 가운데를 기준으로 px 간격 — 그림이 커져도 카드가 흩어지지 않는다 */
.ixv-t2 { left: 22%; top: calc(50% - 54px);  z-index: 2; }
.ixv-t3 { left: 34%; top: calc(50% - 112px); z-index: 1; }
.ixv-t2 .ixv-lines, .ixv-t3 .ixv-lines { display: none; }
.ixv-t2, .ixv-t3 { box-shadow: 0 10px 26px rgba(21, 128, 61, .10); }
.ixv-tip-tag {
  flex: 0 0 auto; display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--ix-soft); color: var(--ix-ink); font-size: .66rem; font-weight: 800;
}
.ixv-tip b {
  flex: 1 1 0; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .9rem; color: var(--ink);
}
.ixv-lines { flex: 1 0 100%; display: grid; gap: 6px; margin-top: 12px; }
.ixv-lines i { display: block; height: 6px; border-radius: 6px; background: var(--bg-mute); }
.ixv-lines i + i { width: 62%; }
.ixv-zip .ixv-c1 { top: 8%; left: 0; }
.ixv-zip .ixv-c3 { bottom: 4%; right: 2%; }

@media (prefers-reduced-motion: reduce) { .ixv-chip, .ixv-badge { animation: none; } }

/* ════════════════════════════════════════════════════════════
   메인 화면의 한 칸 (.ix-frame) — 한 화면을 위쪽(글 + 그림)만으로 채운다
   카드 줄 · 단계 줄은 없다 (2026-09-29). 글과 그림을 화면 높이에 맞춰 키운다.
   ════════════════════════════════════════════════════════════ */
.ix-frame .ix-top { gap: clamp(28px, 4.4vw, 80px); }
.ix-frame .ix-brand { font-size: clamp(3rem, 1.4rem + 4.6vw, 6.2rem); }
.ix-frame .ix-kicker { font-size: clamp(1.35rem, .95rem + 1.3vw, 2.3rem); margin-top: clamp(10px, 2vh, 20px); }
.ix-frame .ix-title { font-size: clamp(1.2rem, .95rem + .95vw, 1.95rem); margin-top: clamp(8px, 1.6vh, 16px); }
.ix-frame .ix-lead { font-size: clamp(.94rem, .86rem + .3vw, 1.12rem); max-width: 34em; margin-top: clamp(12px, 2.2vh, 22px); }
.ix-frame .ix-cta { height: 56px; padding: 0 32px; font-size: 1.02rem; margin-top: clamp(18px, 3.4vh, 36px); }

/* 그림 — 화면 높이의 절반 남짓. 안의 글과 표시도 함께 키운다 */
.ix-frame .ix-top { container-type: inline-size; }   /* 그림 높이를 이 줄의 너비에 맞추려고 (cqw) */
.ix-frame .ix-visual {
  /* 2026-09-29 사이트 주인: 그림을 한 단계 작게 (가로 84% · 세로 80% 쯤) — 칸 가운데에 둔다 */
  width: 84%; justify-self: center;
  height: clamp(240px, 45vh, 500px);
  height: min(45vh, 32cqw, 500px);   /* 화면이 길어도 그림이 세로로 길쭉해지지 않게 — 가로에 비례 */
  min-height: 220px;
}
.ix-frame .ixv-chip { padding: 12px 17px; font-size: .92rem; border-radius: 16px; }
.ix-frame .ixv-chip .ix-ico { width: 22px; height: 22px; }
.ix-frame .ixv-msg { font-size: .9rem; padding: 10px 14px; }
.ix-frame .ixv-badge { width: 78px; height: 78px; font-size: 1.4rem; }
.ix-frame .ixv-tip { padding: 16px 20px 18px; }
.ix-frame .ixv-tip b { font-size: 1.02rem; }

/* 낮은 화면 (노트북) — 글과 그림을 조금 줄인다 */
@media (max-height: 820px) {
  body.fp-on .ix-frame .ix-visual { height: clamp(220px, 40vh, 330px); height: min(40vh, 32cqw, 330px); }
  body.fp-on .ix-frame .ix-brand { font-size: clamp(2.6rem, 1.2rem + 3.8vw, 4.6rem); }
  body.fp-on .ix-frame .ixv-msg { font-size: .84rem; padding: 8px 12px; }
}
/* 높은 화면 (4K · 세로로 긴 창) — 글자 크기는 너비를 따르므로 위아래가 텅 빈다.
   글자 · 그림 · 단추를 한 단계 키우고, 줄 사이를 화면 높이(vh)에 맞춰 벌려 칸을 채운다 (2026-09-29 사이트 주인).
   1920×1080 처럼 가로로 긴 보통 화면에는 걸리지 않는다. */
@media (min-height: 1100px), (min-height: 900px) and (max-aspect-ratio: 3/2) {
  body.fp-on .ix-frame .ix-brand  { font-size: clamp(3rem, 1.4rem + 5.4vw, 7rem); }
  body.fp-on .ix-frame .ix-kicker { font-size: clamp(1.35rem, .95rem + 1.6vw, 2.6rem); margin-top: clamp(20px, 4.5vh, 68px); }
  body.fp-on .ix-frame .ix-title  { font-size: clamp(1.2rem, .95rem + 1.15vw, 2.2rem); margin-top: clamp(12px, 2.8vh, 40px); }
  body.fp-on .ix-frame .ix-lead   { font-size: clamp(1rem, .9rem + .35vw, 1.24rem); line-height: 1.85; margin-top: clamp(22px, 4.5vh, 68px); }
  body.fp-on .ix-frame .ix-cta    { height: 64px; padding: 0 40px; font-size: 1.12rem; margin-top: clamp(32px, 7.5vh, 108px); }
  body.fp-on .ix-frame .ix-visual { width: 92%; height: min(52vh, 40cqw, 620px); }
  body.fp-on .ix-frame .ixv-chip  { padding: 14px 20px; font-size: 1rem; }
  body.fp-on .ix-frame .ixv-msg   { font-size: .98rem; }
}

@media (max-height: 680px) {
  body.fp-on .ix-frame .ix-kicker { display: none; }
  /* 대화는 첫 질문과 답만 */
  body.fp-on .ix-frame .ixv-msg:nth-child(n+3) { display: none; }
}

/* ════════════════════════════════════════════════════════════
   메뉴 화면의 소개 절 (.ix-page)
   ════════════════════════════════════════════════════════════ */
.ix-section { padding-block: clamp(56px, 8vw, 96px); }
.ix-page .ix-in { gap: clamp(28px, 4vw, 44px); }
.ix-page .ix-visual { height: clamp(240px, 30vw, 380px); }

/* ── 좁은 화면 ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ix-cards, .ix-cards[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-step:nth-child(2)::after { display: none; }
  .ix-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-feats li:nth-child(3) { border-left: 0; }
  .ix-feats li:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 760px) {
  .ix-top { grid-template-columns: minmax(0, 1fr); }
  .ixv-msg:nth-child(n+3) { display: none; }   /* 좁은 화면 — 대화는 첫 질문과 답만 */
  .ix-visual, .ix-page .ix-visual, .ix-frame .ix-visual { height: 260px; max-width: 460px; width: 100%; margin: 0 auto; }
  .ix-cards, .ix-cards[data-n="3"], .ix-cards[data-n="2"] { grid-template-columns: minmax(0, 1fr); }
  .ix-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ix-step { border-radius: 18px; }
  .ix-step::after { display: none; }
  .ix-feats { grid-template-columns: minmax(0, 1fr); }
  .ix-feats li + li { border-left: 0; border-top: 1px solid var(--line-soft); }
  .ix-cta { width: 100%; justify-content: center; }

  /* 메인의 PLAY · MATE · ZIP 칸 (2026-10-01 사이트 주인)
     그림은 글 위로 올리고 15% 작게 — 폭 85% 로 가운데, 안의 표시 · 글은 zoom 으로 함께 줄여 자리가 그대로 맞는다,
     단추는 칸 폭에 늘이지 않고 좌우 여백을 위아래 여백(56px 높이 → 18px)과 같게,
     워드마크 「ai PLAY」 등은 10% 작게 (48px → 43px) */
  .ix-frame .ix-visual { order: -1; zoom: .85; width: 85%; justify-self: center; }
  /* 단추 — 세 칸 모두 가장 넓은 PLAY 단추(「Ai 교육내용 보러가기」 196px)와 같은 폭으로, 칸 가운데에 (2026-10-01) */
  .ix-frame .ix-cta {
    display: flex; justify-content: center;
    width: fit-content; min-width: 12.25em; margin-inline: auto;
    padding: 0 18px;
  }
  .ix-frame .ix-brand { font-size: 2.7rem; }
  /* 단추까지 한 화면에 — 아래 빠른 메뉴(.mnav)가 단추를 가리지 않게 사이 · 줄 간격만 조인다 (2026-10-01 사이트 주인).
     그림 · 글자 크기 · 단추 폭은 그대로 */
  .ix-frame .ix-top { gap: 14px; }
  .ix-frame .ix-kicker { margin-top: 8px; line-height: 1.3; }
  .ix-frame .ix-title { margin-top: 6px; line-height: 1.38; }
  .ix-frame .ix-lead { margin-top: 8px; line-height: 1.58; }
  .ix-frame .ix-cta { height: 50px; margin-top: 14px; }
}
/* 키가 낮은 휴대폰 화면 (주소창 · 아래 도구 막대가 보이는 사파리, 아이폰 SE 등 — 높이 760px 이하)
   사이만으로는 단추가 한 화면에 들어오지 않아 그림을 조금 더 줄인다 (2026-10-01) */
@media (max-width: 760px) and (max-height: 760px) {
  .ix-frame .ix-visual { zoom: .6; width: 72%; }
  .ix-frame .ix-top { gap: 10px; }
  .ix-frame .ix-brand { font-size: 2.35rem; }
  .ix-frame .ix-kicker { margin-top: 6px; }
  .ix-frame .ix-lead { line-height: 1.5; }
  .ix-frame .ix-cta { margin-top: 12px; }
}