@charset "utf-8";
@font-face {
  font-family: 'Wanted Sans';
  src: url('/fonts/wanted-sans-regular.woff2') format('woff2'),
    url('/fonts/wanted-sans-regular.woff') format('woff'),
    url('/fonts/wanted-sans-regular.ttf') format('truetype');
  font-style: normal;
}

@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}
* {
  box-sizing: border-box;
}

html,body,p,section,div,img,span,h1,h2,h3,h4,h5,h6,ul,li,input,a {
  padding: 0;
  margin: 0;
}

input,button,select{
  border: 0 none;
  outline: none;
}

ul,li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  line-height: 1.2;
}

section {
  width: 100%;
  margin:0 auto;
  display:block;
}
:root {
  --red: #E5340C;
  --red-d: #C02A09;
  --red-lt: #FFF1EE;
  --navy: #0F1923;
  --cream: #FAF8F5;
  --white: #FFFFFF;
  --gray1: #F3F1EE;
  --gray2: #E8E4DF;
  --gray3: #B8B2AB;
  --gray4: #6B6560;
  --text: #1A1714;
  --inner: 980px;
  --r: 8px;
  --sh: 0 4px 24px rgba(0, 0, 0, .08);
  --sh-h: 0 12px 40px rgba(0, 0, 0, .14);
}
.webtoon_re2026 {
  font-family: 'Wanted Sans Variable', 'Noto Sans', '나눔 고딕', sans-serif !important;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  max-width: 1920px;
  margin: 0 auto;
}
.webtoon_re2026 *{
  word-break: keep-all;
}
.mo_none{display: block;}
.pc_none{display: none;}
img {
  display: block;
  max-width: 100%
}

/* ─ LAYOUT ─ */
.webtoon_re2026 .inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─ HERO ─ */
#hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 80px 0 0
}

#hero::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--white);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0
}

.hero-inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 24px;
  /* display: flex;
  flex-direction: column; */
  display: grid;
  /* grid-template-columns: 1fr 420px; */
  /* gap: 48px; */
  /* align-items: end; */
  position: relative;
  text-align: center;
  z-index: 1
}

.hero-left {
  padding-bottom: 72px
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp .6s .1s forwards
}

.hero-kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--red)
}

.hero-h1 {
  font-family: 'GMarketSans';
  font-size: clamp(4rem, 6.5vw, 6.4rem);
  line-height: 1.2;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 8px;
  opacity: 0;
  animation: fadeUp .6s .22s forwards
}

.hero-h1 .hl {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
}

.hero-h1 .block {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 0 8px;
  width: fit-content;
  margin: 4px auto 0;
}

.hero-sub {
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .58);
  max-width: 420px;
  margin: 24px auto 36px;
  opacity: 0;
  animation: fadeUp .6s .38s forwards
}

.hero-actions {
  display: flex;
  gap: 12px;
  opacity: 0;
  animation: fadeUp .6s .5s forwards;
}

.btn-red {
  background: var(--red);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 14px 30px;
  border-radius: 4px;
  transition: background .2s, transform .15s;
  display: inline-block;
  margin: auto;
}

.btn-red:hover {
  background: var(--red-d);
  transform: translateY(-2px)
}

.btn-line {
  border: 1.5px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .8);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 14px 28px;
  border-radius: 4px;
  transition: border-color .2s, background .2s;
  display: inline-block
}

.btn-line:hover {
  border-color: var(--red);
  background: rgba(229, 52, 12, .12);
  color: #fff
}

.hero-right {
  align-self: end;
  opacity: 0;
  animation: fadeUp .7s .45s forwards
}

/* 유튜브 16:9 반응형 래퍼 */
.hero-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 */
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.hero-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.img-ph {
  width: 100%;
  height: 100%;
  background: #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #888;
  font-size: .75rem;
  text-align: center;
  padding: 12px
}

.img-ph-icon {
  font-size: 2rem;
  opacity: .4
}

/* stat strip */
.hero-stats {
  background: var(--white);
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--gray2)
}

.hero-stats-inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.stat-item {
  padding: 24px 0;
  text-align: center;
  border-right: 1px solid var(--gray2);
  transition: background .2s
}

.stat-item:last-child {
  border-right: none
}

.stat-item:hover {
  background: var(--red-lt)
}

.stat-num {
  font-family: 'GMarketSans';
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .04em;
  color: var(--red);
  line-height: 1;
  margin-bottom: 4px
}

.stat-desc {
  font-size: .75rem;
  color: var(--gray4);
  line-height: 1.45
}

.stat-src {
  font-size: .62rem;
  color: var(--gray3);
  margin-top: 3px
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ─ TICKER ─ */
.ticker {
  background: var(--red);
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0
}

.ticker-row {
  display: inline-flex;
  gap: 40px;
  animation: tick 20s linear infinite
}

.ti {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff
}

.td {
  color: rgba(255, 255, 255, .4);
  font-size: .65rem
}

@keyframes tick {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ─ SECTION COMMONS ─ */
.sec {
  padding: 88px 0
}

.sec-alt {
  background: var(--white)
}

.sec-navy {
  background: var(--navy)
}

.lbl {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  justify-content: center;
}

.lbl::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0
}

.heading {
  font-family: 'GMarketSans';
  font-size: 2.8rem;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 12px;
  text-align: center;
}

.heading em {
  color: var(--red);
  font-style: normal
}

.sub-text {
  font-size: .92rem;
  color: var(--gray4);
  line-height: 1.4;
  max-width: 540px;
  text-align: center;
  margin: 20px auto 0;
}

/* ─ REVEAL ─ */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s, transform .65s
}

.rv.on {
  opacity: 1;
  transform: none
}

.rv.d1 {
  transition-delay: .1s
}

.rv.d2 {
  transition-delay: .2s
}

.rv.d3 {
  transition-delay: .3s
}

.rv.d4 {
  transition-delay: .4s
}

/* ─ §1 INTRO ─ */
#intro {
  background: var(--cream)
}

.intro-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--gray2);
  border-radius: var(--r);
  overflow: hidden
}

.intro-img {
  grid-row: 1/3;
  /* background: var(--red); */
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
.intro-img .img-ph{
  padding: 4px; 
  border-radius: 5px 0 0 5px;
  background: var(--gray4);
  height:100%;min-height:480px;
}
.intro-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.intro-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(15, 25, 35, .75), transparent);
  padding: 40px 22px 18px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7)
}

.intro-copy {
  background: var(--white);
  padding: 36px 40px;
  border-bottom: 1px solid var(--gray2)
}

.intro-copy h3 {
  font-family: 'GMarketSans';
  font-size: 1.7rem;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.2;
}

.intro-copy p {
  font-size: .88rem;
  color: var(--gray4);
  line-height: 1.45;
}

.intro-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--navy)
}

.ipt {
  padding: 28px 24px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  transition: background .2s
}

.ipt:last-child {
  border-right: none
}

.ipt:hover {
  background: rgba(229, 52, 12, .15)
}

.ipt-num {
  font-family: 'GMarketSans';
  font-size: 2rem;
  color: var(--red);
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: 6px
}

.ipt-lbl {
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.45
}

/* ─ §2 MARKET ─ */
#market {
  background: var(--white)
}

.market-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 60px;
  align-items: center;
  margin-top: 52px
}

.market-big-num {
  font-family: 'GMarketSans';
  font-size: 6rem;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}

.market-big-sub {
  font-size: .82rem;
  color: var(--gray4);
  line-height: 1.5;
  margin-top: 36px;
}

.market-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 40px;
}

.mbar-row {
  display: flex;
  align-items: center;
  gap: 14px
}

.mbar-lbl {
  font-size: .78rem;
  color: var(--gray4);
  width: 120px;
  flex-shrink: 0
}

.mbar-track {
  flex: 1;
  height: 8px;
  background: var(--gray2);
  border-radius: 4px;
  overflow: hidden
}

.mbar-fill {
  height: 100%;
  background: var(--red);
  border-radius: 4px;
  width: 0;
  transition: width 1s .3s
}

.mbar-val {
  font-family: 'GMarketSans';
  font-size: 1rem;
  color: var(--text);
  width: 68px;
  text-align: right;
  flex-shrink: 0
}

.market-img {
  background: #cccccc;
  border-radius: var(--r);
  /* aspect-ratio: 4/5; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}
.market-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─ §3 CAREER ─ */
#career {
  background: var(--cream)
}

.career-switch {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--gray2);
  border-radius: var(--r);
  overflow: hidden
}

.career-tabs {
  background: var(--navy);
  display: flex;
  flex-direction: column;
}

.ctab {
  flex: 1;
  padding: 28px 24px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background .25s;
  position: relative
}

.ctab:last-child {
  border-bottom: none
}

.ctab:hover {
  background: rgba(255, 255, 255, .04)
}

.ctab.active {
  background: var(--red)
}

.ctab.active::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: var(--red)
}

.ctab-num {
  font-family: 'GMarketSans';
  font-size: 2.5rem;
  color: rgba(255, 255, 255, .12);
  line-height: 1;
  margin-bottom: 6px
}

.ctab.active .ctab-num {
  color: rgba(255, 255, 255, .3)
}

.ctab-name {
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .04em
}

.ctab.active .ctab-name {
  color: #fff
}

.ctab-desc {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  margin-top: 4px;
  line-height: 1.45
}

.ctab.active .ctab-desc {
  color: rgba(255, 255, 255, .7)
}

.career-panels {
  background: var(--white);
  flex: 1
}

.cpanel {
  display: none;
  padding: 44px 48px
}

.cpanel.active {
  display: block
}

.cpanel-head {
  margin-bottom: 32px
}

.cpanel-head h3 {
  font-family: 'GMarketSans';
  font-size: 2rem;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: 10px
}

.cpanel-head p {
  font-size: .88rem;
  color: var(--gray4);
  line-height: 1.45
}

.workflow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 36px
}

.wf-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray1)
}

.wf-item:last-child {
  border-bottom: none
}

.wf-num {
  font-family: 'GMarketSans';
  font-size: 1.4rem;
  color: var(--red);
  width: 32px;
  flex-shrink: 0;
  line-height: 1.1
}

.wf-text strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 2px
}

.wf-text span {
  font-size: .8rem;
  color: var(--gray4)
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.stag {
  background: var(--gray1);
  border: 1px solid var(--gray2);
  font-size: .72rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  color: var(--gray4);
  transition: background .2s, color .2s, border-color .2s
}

.stag:hover {
  background: var(--red-lt);
  border-color: var(--red);
  color: var(--red)
}

/* ─ §4 PROCESS ─ */
#process {
  background: var(--navy);
  padding-bottom: 100px
}

.proc-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 52px
}

.proc-row2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px
}

.proc-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
  position: relative
}

.proc-card:hover {
  background: rgba(229, 52, 12, .12);
  border-color: rgba(229, 52, 12, .4);
  transform: translateY(-4px)
}

.proc-img {
  background: #cccccc;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.proc-img .img-ph{padding: 0;}

.proc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proc-num {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'GMarketSans';
  font-size: 1.6rem;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.proc-body {
  padding: 14px 14px 18px
}

.proc-title {
  font-size: .83rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px
}

.proc-desc {
  font-size: .74rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.5
}

/* ─ §5 CURRICULUM ─ */
#curriculum {
  background: var(--cream)
}

.curr-tab-bar {
  display: flex;
  border-bottom: 2px solid var(--gray2);
  margin-top: 44px;
  margin-bottom: 32px
}

.ctab2 {
  flex: 1;
  padding: 12px 32px;
  font-size: .87rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray3);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s
}

.ctab2.active {
  color: var(--red);
  border-bottom-color: var(--red)
}

.curr-panel {
  display: none
}

.curr-panel.active {
  display: block
}

/* 커리큘럼 텍스트 그리드 */
.curr-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: #fff;
  font-family: 'GMarketSans';
  font-size: 1rem;
  letter-spacing: .08em;
  padding: 6px 16px 6px 12px;
  border-radius: 4px;
  margin-bottom: 24px;
}

.curr-section-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--red);
  border-radius: 2px
}

.curr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px
}

.curr-card {
  background: var(--white);
  border: 1px solid var(--gray2);
  border-radius: var(--r);
  padding: 22px 20px;
  transition: border-color .2s, box-shadow .2s;
}

.curr-card:hover {
  border-color: var(--red);
  box-shadow: var(--sh)
}

.curr-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px
}

.curr-card-num {
  background: var(--text);
  color: #fff;
  font-family: 'GMarketSans';
  font-size: .88rem;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.curr-card-ttl {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text)
}

.curr-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.curr-card ul li {
  font-size: .8rem;
  color: var(--gray4);
  line-height: 1.55;
  padding-left: 12px;
  position: relative;
}

.curr-card ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gray3)
}

/* 웹툰 작가: 초급/고급 섹션 분리 */
.curr-section-gap {
  margin-top: 36px
}

/* ─ §6 PORTFOLIO ─ */
#portfolio {
  background: var(--white)
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px
}

.port-card {
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--gray2);
  transition: box-shadow .25s, transform .25s
}

.port-card:hover {
  box-shadow: var(--sh-h);
  transform: translateY(-4px)
}

.port-thumb {
  background: #cccccc;
  aspect-ratio: 2/3;
  overflow: hidden;
  position: relative
}

.port-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s
}

.port-card:hover .port-thumb img {
  transform: scale(1.04)
}

.port-overlay {
  position: absolute;
  inset: 0;
  background: rgba(229, 52, 12, .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .3s;
  color: #fff
}

.port-card:hover .port-overlay {
  opacity: 1
}

.port-overlay-icon {
  font-size: 2rem
}

.port-overlay-txt {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em
}

.port-info {
  padding: 14px 18px;
  background: var(--white)
}

.port-name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--text);
  margin-bottom: 2px
}

.port-more {
  font-size: .75rem;
  color: var(--red)
}

/* ─ MODAL ─ */
.port-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 35, .7);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(4px)
}

.port-backdrop.open {
  opacity: 1;
  pointer-events: all
}

.port-modal {
  background: var(--white);
  border-radius: 10px;
  /* 가로형 이미지(820×461) 기준: 최대너비 620px, 스크롤 가능 */
  width: 96vw;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  transform: scale(.96) translateY(16px);
  transition: transform .3s;
}

.port-backdrop.open .port-modal {
  transform: scale(1) translateY(0)
}

.port-modal-x {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--red-d);
  font-weight: 700;
  transition: color .2s
}

.port-modal-x:hover {
  color: var(--red)
}

.port-modal-h {
  font-family: 'GMarketSans';
  font-size: 1.3rem;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: 18px
}

/* 가로형 이미지: 1컬럼 전체 너비 */
.port-modal-grid {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.mgrid-img {
  background: #cccccc;
  border-radius: 4px;
  overflow: hidden;
  /* 820×461 비율 고정 */
  width: 100%;
  aspect-ratio: 820/461;
  position: relative;
}

.mgrid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* ─ §7 FAQ ─ */
#faq {
  background: var(--cream)
}

/* ① faq-sidebar-img 삭제 후 faq-contact-box와 faq-list 높이 동일하게 */
.faq-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  /* align-items:stretch 로 양쪽 높이를 그리드 행 높이에 맞춤 */
  align-items: stretch;
  margin-top: 52px;
}

.faq-sidebar {
  display: flex;
  flex-direction: column
}

.faq-contact-box {
  background: var(--navy);
  border-radius: var(--r);
  padding: 28px 24px;
  /* stretch: 사이드바 컬럼 전체 높이를 채움 */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.faq-contact-box h4 {
  font-family: 'GMarketSans';
  font-size: 1.2rem;
  letter-spacing: .05em;
  color: #fff
}

.faq-contact-box p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.75
}

.faq-tel-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--red);
  transition: opacity .2s
}

.faq-tel-link:hover {
  opacity: .75
}

.faq-contact-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .08)
}

.faq-contact-sub {
  font-size: .78rem;
  color: rgba(255, 255, 255, .35);
  line-height: 1.65
}

/* faq-list: stretch로 자동으로 contact-box와 같은 높이 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray2);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s
}

.faq-item:hover,
.faq-item.open {
  border-color: var(--red)
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer
}

.fq-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray1);
  border: 1px solid var(--gray2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'GMarketSans';
  font-size: .7rem;
  color: var(--gray4);
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s;
}

.faq-item.open .fq-num {
  background: var(--red);
  border-color: var(--red);
  color: #fff
}

.fq-text {
  flex: 1;
  font-size: .87rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5
}

.fq-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--gray2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--gray3);
  flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .3s
}

.faq-item.open .fq-toggle {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease
}

.faq-item.open .faq-a {
  max-height: 500px
}

.fa-inner {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--gray1)
}

.fa-text {
  font-size: .83rem;
  color: var(--gray4);
  line-height: 1.45;
}

/* ─ §8 BENEFITS ─ */
#benefits {
  background: var(--navy)
}

.benefits-head {
  color: #fff;
  margin-bottom: 44px
}

.benefits-head .heading {
  color: #fff
}

.benefits-head .heading em {
  color: var(--red)
}

.benefits-head .sub-text {
  color: rgba(255, 255, 255, .5)
}

/* 오픈 기념 3대 혜택 카드 */
.benefit-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px
}

.btrio-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 36px 28px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}

.btrio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-h)
}

.btrio-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  font-family: 'GMarketSans';
  font-size: .95rem;
  letter-spacing: .12em;
}
.btrio-badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btrio-big {
  font-family: 'GMarketSans';
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--red);
  margin-bottom: 4px;
  letter-spacing: .02em;
}

.btrio-divider {
  width: 40px;
  height: 2px;
  background: var(--gray2);
  margin: 14px auto
}

.btrio-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 6px
}
.btrio-title em{
  color: var(--red);
  font-weight: 700;
  font-style: normal;
}

.btrio-desc {
  font-size: .8rem;
  color: var(--gray4);
  line-height: 1.6
}

/* 강의 환경 4컬럼 */
.env-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.env-card {
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .25s, background .25s
}

.env-card:hover {
  border-color: rgba(229, 52, 12, .4);
  background: rgba(229, 52, 12, .1)
}

.env-img {
  background: #cccccc;
  aspect-ratio: 4/3;
  overflow: hidden
}
.env-img .img-ph{padding: 0;}

.env-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.env-body {
  padding: 14px 16px 18px
}

.env-title {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
  text-align: center
}

/* ─ FLOATING BAR ─ */
.fbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 1920px;
  z-index: 200;
  background: rgba(250, 248, 245, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--gray2);
  padding: 12px 0;
  transition: transform .4s
}

.fbar.on {
  transform: translateX(-50%) translateY(0)
}

.fbar-inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.fbar-txt {
  font-size: .85rem;
  color: var(--gray4)
}

.fbar-txt strong {
  color: var(--red);
  font-weight: 700
}

.fbar-acts {
  display: flex;
  gap: 10px
}

.fbar-tel {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .83rem;
  font-weight: 700;
  color: var(--text);
  border: 1.5px solid var(--gray2);
  padding: 9px 18px;
  border-radius: 4px;
  transition: border-color .2s, color .2s
}

.fbar-tel:hover {
  border-color: var(--red);
  color: var(--red)
}

/* 개인정보 수집 동의 자세히보기 팝업 (기존 코드긁어옴) */

.l_rn_academy_layer {
  width: 400px;
  background: #fff;
  border: 2px solid #999;
  height: 300px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -150px;
  margin-left: -200px;
  display: none;
  padding: 25px 15px;
  /* fix */
  z-index: 9;
}

.l_rn_academy_layer.on {
  display: block;
}

.l_rn_academy_close_btn {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 22px;
  right: 7px;
  cursor: pointer;
}

.l_rn_academy_close_btn:after,
.l_rn_academy_close_btn::before {
  width: 80%;
  height: 1px;
  background: #888;
  content: '';
  clear: both;
  display: block;
  border-radius: 5px;
  position: absolute;
}

.l_rn_academy_close_btn::after {
  transform: rotate(45deg);
  top: 10px;
  left: 0px;
}

.l_rn_academy_close_btn::before {
  transform: rotate(-45deg);
  top: 10px;
  left: 0px;
}
.l_rn_academy_privacy_conts {
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	white-space: pre-line;
	padding: 10px;
	height: 200px;
	overflow-y: scroll;
	background: #fbfbfb;
	border: 1px solid #ddd;
	margin-top: 20px;
}
/* ═══════════════════════════════════════════
   MOBILE: max-width 768px
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  :root {
    --inner: 100%;
  }

  /* ── LAYOUT ── */
  .webtoon_re2026 .inner {
    padding: 0 16px;
  }
  .mo_none{display: none;}
  .pc_none{display: block;}
  /* ── SECTION COMMONS ── */
  .sec {
    padding: 56px 0;
  }

  .heading {
    font-size: clamp(2rem, 6.5vw, 2.5rem);
  }

  .sub-text {
    font-size: clamp(0.95rem, 3vw, 1rem);
  }

  .lbl {
    font-size: clamp(0.72rem, 1.8vw, 0.75rem);
  }

  /* ── HERO ── */
  #hero {
    padding: 48px 0 0;
  }

  #hero::before {
    height: 48px;
  }

  .hero-inner {
    padding: 0 16px;
    text-align: center;
  }

  .hero-left {
    padding-bottom: 40px;
  }

  .hero-h1 {
    font-size: clamp(2rem, 8vw, 3.4rem);
  }

  .hero-sub {
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    margin: 16px auto 24px;
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-red,
  .btn-line {
    font-size: clamp(0.95rem, 2.7vw, 1rem);
    padding: 13px 24px;
  }

  /* HERO VIDEO: 전체 너비 */
  .hero-right {
    width: 100%;
  }

  /* ── HERO STATS ── */
  .hero-stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    padding: 18px 8px;
    border-right: 1px solid var(--gray2);
    border-bottom: 1px solid var(--gray2);
  }

  .stat-item:nth-child(2n) {
    border-right: none;
  }

  .stat-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .stat-item:hover {
  background: unset;
}

  .stat-num {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
  }

  .stat-desc {
    font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  }

  .stat-src {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
  }

  /* ── §1 INTRO ── */
  .intro-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin-top: 32px;
  }

  .intro-img {
    grid-row: auto;
    min-height: 240px;
  }

  .intro-img .img-ph {
    min-height: 240px !important;
    max-height: 320px;
    border-radius: 5px 5px 0 0;
  }
  .intro-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .intro-copy {
    padding: 24px 20px;
  }

  .intro-copy h3 {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    text-align: center;
  }

  .intro-copy p {
    font-size: clamp(0.8rem, 2.4vw, 0.88rem);
    text-align: center;
  }

  .intro-points {
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
  }

  .ipt {
    padding: 18px 12px;
  }

  .ipt-num {
    font-size: clamp(0.9rem, 3vw, 1.3rem);
  }

  .ipt-lbl {
    font-size: clamp(0.7rem, 2vw, 0.78rem);
  }

  /* ── §2 MARKET ── */
  .market-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }

  .market-big-num {
    font-size: clamp(3rem, 10vw, 5rem);
    text-align: center;
  }

  .market-big-sub {
    font-size: clamp(0.78rem, 2.3vw, 0.82rem);
  }

  .mbar-lbl {
    font-size: clamp(0.72rem, 2.2vw, 0.78rem);
    width: 80px;
  }

  .mbar-val {
    font-size: clamp(0.82rem, 2.5vw, 1rem);
    width: 52px;
  }

  .market-img {
    min-height: 240px;
  }

  /* ── §3 CAREER ── */
  .career-switch {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .career-tabs {
    flex-direction: row;
  }

  .ctab {
    padding: 16px 12px;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.06);
  }

  .ctab:last-child {
    border-right: none;
  }

  .ctab.active::after {
    right: auto;
    bottom: -1px;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--red);
    border-left-color: transparent;
  }

  .ctab-num {
    font-size: clamp(1rem, 4vw, 1.8rem);
  }

  .ctab-name {
    font-size: clamp(1.05rem, 3vw, 1.3rem);
  }

  .ctab-desc {
    font-size: clamp(0.7rem, 2vw, 0.75rem);
    display: none;
  }

  .cpanel {
    padding: 28px 20px;
  }

  .cpanel-head h3 {
    font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  }

  .cpanel-head p {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }

  .wf-text strong {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }

  .wf-text span {
    font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  }

  .stag {
    font-size: clamp(0.78rem, 2vw, 0.85rem);
    padding: 4px 10px;
  }

  /* ── §4 PROCESS ── */
  .proc-row,
  .proc-row2 {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 32px;
    gap: 12px;
  }

  .proc-title {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }

  .proc-desc {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }

  /* ── §5 CURRICULUM ── */
  .curr-tab-bar {
    margin-top: 28px;
  }

  .ctab2 {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    padding: 10px 16px;
  }

  .curr-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .curr-card {
    padding: 16px 14px;
  }

  .curr-card-ttl {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }

  .curr-card ul li {
    font-size: clamp(0.9rem, 2.3vw, 0.95rem);
  }

  .curr-section-title {
    font-size: clamp(0.85rem, 2.8vw, 1rem);
  }

  /* ── §6 PORTFOLIO ── */
  .port-grid {
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: 1fr; */
    gap: 16px;
    margin-top: 32px;
  }

  .port-thumb {
    aspect-ratio: 3/4;
    min-height: 240px !important;
  }

  .port-name {
    font-size: clamp(0.82rem, 2.5vw, 0.88rem);
  }

  /* ── §7 FAQ ── */
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }

  /* contact-box: 가로 배치로 전환 */
  .faq-contact-box {
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px;
    text-align: center;
  }
  .faq-tel-link{
    display: block;
    margin: auto;
  }
  .faq-contact-box h4 {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
  }

  .faq-contact-box p {
    font-size: clamp(0.85rem, 2.3vw, 0.95rem);
  }

  .faq-tel-link {
    font-size: clamp(0.95rem, 2.8vw, 0.1rem);
  }

  .faq-contact-sub {
    font-size: clamp(0.85rem, 2.3vw, 0.95rem);
  }

  .fq-text {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }

  .fa-text {
    font-size: clamp(0.85rem, 2.3vw, 0.95rem);
  }

  /* ── §8 BENEFITS ── */
  .benefit-trio {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
  }
  .benefit-trio .btrio-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 6px);
    margin: 0 auto;
  }
  .btrio-card {
    padding: 24px 20px;
    width: auto;
  }
  .btrio-card:hover {
  transform: unset;
}
  .btrio-img{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btrio-title {
    font-size: clamp(1rem, 2.7vw, 1.2rem);
  }

  .env-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .env-title {
    font-size: clamp(1rem, 2.7vw, 1.2rem);
  }

  /* ── FLOATING BAR ── */
  .fbar-inner {
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px;
    align-items: flex-start;
  }

  .fbar-txt {
    font-size: clamp(0.78rem, 2.4vw, 0.85rem);
  }

  .fbar-acts {
    width: 100%;
    justify-content: stretch;
  }

  .fbar-tel {
    font-size: clamp(0.76rem, 2.3vw, 0.83rem);
    padding: 8px 14px;
    flex: 1;
    justify-content: center;
  }

  .btn-red.fbar-cta {
    flex: 1;
    text-align: center;
    font-size: clamp(0.78rem, 2.4vw, 0.85rem);
  }

  /* ── FOOTER ── */
  footer {
    padding: 32px 0;
  }

  .foot-inner {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
  }

  .foot-logo {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .foot-info {
    font-size: clamp(0.68rem, 2vw, 0.73rem);
  }

  .foot-links a {
    font-size: clamp(0.68rem, 2vw, 0.73rem);
  }

  /* ── TICKER ── */
  .ti {
    font-size: clamp(0.75rem, 2vw, 0.8rem);
  }
}

/* ═══════════════════════════════════════════
   MOBILE NARROW: max-width 480px
═══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── LAYOUT ── */
  .webtoon_re2026 .inner {
    padding: 0 12px;
  }

  /* ── SECTION ── */
  .sec {
    padding: 44px 0;
  }

  .heading {
    font-size: clamp(1.35rem, 6.5vw, 1.9rem);
  }

  .sub-text {
    font-size: 16px;
  }

  /* ── HERO ── */
  #hero {
    padding: 36px 0 0;
  }

  .hero-h1 {
    font-size: clamp(1.7rem, 9vw, 2.6rem);
  }

  .hero-kicker {
    font-size: 12px;
    letter-spacing: .2em;
    margin-bottom: 16px;
  }

  .hero-sub {
    font-size: 12px;
    margin: 12px auto 20px;
  }

  .btn-red,
  .btn-line {
    font-size: 12px;
    padding: 12px 20px;
  }

  /* ── HERO STATS ── */
  .stat-num {
    font-size: clamp(0.95rem, 4.5vw, 1.3rem);
  }

  .stat-desc {
    font-size: 12px;
  }

  .stat-src {
    font-size: 12px;
  }

  /* ── §1 INTRO ── */
  .intro-img {
    min-height: 200px;
  }

  .intro-img .img-ph {
    min-height: 200px !important;
  }

  .intro-copy h3 {
    font-size: clamp(1rem, 5.5vw, 1.3rem);
  }

  .intro-copy p {
    font-size: 12px;
  }

  .intro-points {
    grid-template-columns: repeat(3, 1fr);
  }

  .ipt {
    padding: 14px 8px;
  }

  .ipt-num {
    font-size: clamp(0.78rem, 3.5vw, 1rem);
  }

  .ipt-lbl {
    font-size: 12px;
  }

  /* ── §2 MARKET ── */
  .market-big-num {
    font-size: clamp(2.4rem, 12vw, 3.5rem);
  }

  .market-big-sub {
    font-size: 12px;
  }

  .mbar-lbl {
    font-size: 12px;
    width: 64px;
  }

  .mbar-val {
    font-size: clamp(0.78rem, 3vw, 0.9rem);
    width: 44px;
  }

  /* ── §3 CAREER ── */
  .ctab-num {
    font-size: clamp(0.9rem, 4.5vw, 1.4rem);
  }

  .ctab-name {
    font-size: 20px;
  }

  .cpanel {
    padding: 20px 14px;
  }

  .cpanel-head h3 {
    font-size: clamp(1.1rem, 5.5vw, 1.4rem);
  }

  .cpanel-head p {
    font-size: 16px;
  }

  .wf-num {
    font-size: clamp(1rem, 4vw, 1.2rem);
    width: 26px;
  }

  .wf-text strong {
    font-size: 18px;
  }

  .wf-text span {
    font-size: 16px;
  }

  .stag {
    font-size: 14px;
    padding: 4px 9px;
  }

  /* ── §4 PROCESS ── */
  .proc-row,
  .proc-row2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 24px;
  }

  .proc-title {
    font-size: 16px;
  }

  .proc-desc {
    font-size: 15px;
  }

  .proc-body {
    padding: 16px 10px;
  }

  .proc-num {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  /* ── §5 CURRICULUM ── */
  .ctab2 {
    font-size: 18px;
    padding: 9px 10px;
  }

  .curr-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .curr-card {
    padding: 14px 12px;
  }

  .curr-card-ttl {
    font-size: 18px;
  }

  .curr-card ul li {
    font-size: 16px;
  }

  .curr-card-num {
    font-size: clamp(0.8rem, 2.8vw, 0.95rem);
  }

  .curr-section-title {
    font-size: 16px;
  }

  /* ── §6 PORTFOLIO ── */
    .port-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
  .port-thumb {
    min-height: 200px !important;
    max-height: 240px;
    width: 100%;
  }
  .port-thumb .img-ph{
    width: 100%;
    padding: 0;
  }
    .port-thumb .img-ph img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.port-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s
}

.port-card:hover .port-thumb img {
  transform: scale(1.04)
}

.port-overlay {
  opacity: 0.7;
}
.port-card:hover .port-overlay {
  opacity: unset;
}
  .port-name {
    font-size: 16px;
    text-align: center;
  }

  .port-more {
    font-size: 12px;
  }

  .port-info {
    padding: 12px 14px;
  }
  .port-modal{
    max-width: 80%;
  }

  /* ── §7 FAQ ── */
  .faq-contact-box {
    padding: 16px 14px;
  }

  .faq-contact-box h4 {
    font-size: clamp(0.92rem, 4vw, 1.1rem);
  }

  .faq-contact-box p {
    font-size: 14px;
  }

  .faq-tel-link {
    font-size: 14px;
  }

  .faq-contact-sub {
    font-size: 14px;
  }

  .fq-num {
    font-size: 14px;
    width: 32px;
    height: 32px;
  }

  .fq-text {
    font-size: 16px;
  }

  .fq-toggle {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .fa-text {
    font-size: 14px;
  }

  .faq-q {
    padding: 14px 14px;
    gap: 10px;
  }

  .fa-inner {
    padding: 12px 14px 16px;
  }

  /* ── §8 BENEFITS ── */
  .btrio-card {
    padding: 20px 16px;
  }

  .btrio-badge {
    font-size: 14px;
  }

  .btrio-title {
    font-size: 16px;
  }

  .env-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .env-title {
    font-size: 14px;
  }

  .env-body {
    padding: 10px 12px 14px;
  }

  /* ── FLOATING BAR ── */
  .fbar-txt {
    font-size: 12px;
  }

  .fbar-tel {
    font-size: 12px;
    padding: 7px 12px;
  }

  /* ── FOOTER ── */
  .foot-logo {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }

  .foot-info {
    font-size: 12px;
  }

  .foot-links a {
    font-size: 12px;
  }

  /* ── MODAL ── */
  .port-modal {
    padding: 20px 14px;
  }

  .port-modal-h {
    font-size: clamp(1rem, 4.5vw, 1.2rem);
  }

  /* ── TICKER ── */
  .ti {
    font-size: 12px;
  }

  .td {
    font-size: 12px;
  }
}