/* =========================================================
   시안 C 계열 하위 페이지 (D.O.T 어학원)
   기본 토큰 · 버튼 · 내비 · 로드맵 · 갤러리 · 라이트박스 · 드로어 · 푸터는 draft-c.css를 그대로 쓰고,
   여기에는 하위 페이지에만 있는 부분을 더한다
   ========================================================= */

/* ---------- 내비: 실제 로고 + 학원 안내 펼침 메뉴 ---------- */
.nav .logo{color:#00074e}
.logo-svg{display:block;height:38px;width:auto}
.logo-svg .lw{fill:currentColor}
.nav.scrolled .logo-svg{height:32px}
.logo-svg{transition:height .5s var(--ease)}
.nav ul li{position:relative}
.nav ul li.on>a{color:var(--accent-ink)}
.nav ul li.on>a::after{transform:scaleX(1)}
.nav .dd{position:absolute;left:50%;top:100%;translate:-50% 8px;min-width:240px;padding:8px;border-radius:20px;background:var(--paper);border:1px solid rgba(0,0,0,.06);box-shadow:0 24px 50px -20px rgba(2,32,71,.35);opacity:0;visibility:hidden;transition:opacity .25s,translate .45s var(--ease),visibility 0s .25s}
.nav ul li:hover .dd,.nav ul li:focus-within .dd{opacity:1;visibility:visible;translate:-50% 0;transition:opacity .25s,translate .45s var(--ease)}
.nav .dd a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;font-size:14.5px;font-weight:600}
.nav .dd a::after{display:none}
.nav .dd a small{font-size:12px;font-weight:500;color:var(--muted)}
.nav .dd a:hover{background:#f2f4f6}
.nav .dd a.on{background:var(--ink);color:#fff}
.nav .dd a.on small{color:#8b95a1}

/* 모바일 메뉴: 학원 다섯 곳은 작은 줄로 */
.mobile-menu .mm-sub{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 16px;border-bottom:1px solid #e5e8eb;opacity:0;translate:0 28px;transition:opacity .3s,translate .3s}
.mobile-menu.open .mm-sub{opacity:1;translate:none;transition:opacity .6s var(--ease),translate .8s var(--ease);transition-delay:.3s}
.mobile-menu .mm-sub a{font-size:14px;font-weight:600;padding:8px 14px;border:1px solid #e5e8eb;border-radius:99px;opacity:1;translate:none}
.mobile-menu .mm-sub a.on{background:#fff;color:var(--ink);border-color:#fff}
.mobile-menu{overflow-y:auto}

/* ---------- 히어로 (사진 위 이동 경로 · 학원 탭) ---------- */
.sub-hero .hero-photo{min-height:clamp(720px,112vh,1120px)}
.sub-hero .hero-photo>img{object-position:50% 64%}
/* 칠판처럼 밝은 사진 위에서도 위쪽 숫자가 읽히게 위를 조금 더 어둡게 */
.sub-hero .hero-photo::after{background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.34) 26%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.74) 100%)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:24px clamp(20px,2.6vw,44px) 0}
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.82)}
.crumb a:hover{color:#fff}
.crumb i{font-style:normal;opacity:.5}
.ac-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ac-pills::-webkit-scrollbar{display:none}
.ac-pills a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:99px;font-size:13.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.28);transition:background-color .3s,color .3s,border-color .3s}
.ac-pills a small{font-size:11.5px;font-weight:500;opacity:.7}
.ac-pills a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
.ac-pills a.on{background:#fff;color:var(--ink);border-color:#fff}
.sub-hero .facts{padding-top:22px}
.hero-badge{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:18px;padding:8px 16px 8px 8px;font-size:13px;font-weight:600}
.hero-badge img{height:34px;width:auto;border-radius:10px}
.hero-badge span{color:var(--muted);font-weight:500}
.sub-hero .statement{font-size:clamp(32px,3.9vw,62px)}

/* ---------- 들어가는 말 (스크롤에 따라 글자가 차오름) ---------- */
.manifesto{padding:clamp(96px,12vw,170px) 0 clamp(72px,8vw,120px)}
.mf-q{font-size:clamp(28px,4.1vw,64px);line-height:1.22;font-weight:700;letter-spacing:-.035em;max-width:1240px}
.mf-q .w{color:#d1d6db;transition:color .2s}
.mf-q .w.lit{color:var(--ink)}
.mf-q .w.hl.lit{color:var(--accent-ink)}
.mf-by{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:14px;color:var(--muted)}
.mf-by::before{content:"";width:36px;height:1px;background:var(--ink)}
/* 이 페이지 목차 (편집 디자인 표 형식) */
.chapters{margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,64px)}
.chapters a{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.chapters a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.chapters em{font-style:normal;font-size:13px;font-weight:600;color:var(--gray);transition:color .3s}
.chapters b{font-size:clamp(18px,1.7vw,24px);font-weight:700;letter-spacing:-.03em;transition:translate .6s var(--ease),color .3s}
.chapters b small{display:block;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px}
.chapters .go{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:14px;transition:transform .6s var(--ease),background-color .25s,color .25s,border-color .25s}
@media (hover:hover){
  .chapters a:hover::after{transform:scaleX(1);transform-origin:left}
  .chapters a:hover b{translate:6px 0;color:var(--accent-ink)}
  .chapters a:hover em{color:var(--accent)}
  .chapters a:hover .go{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg)}
}

/* ---------- 붙어 다니는 목차 (헤더 캡슐 아래 작은 캡슐) ---------- */
.chap{position:fixed;left:50%;top:76px;z-index:49;translate:-50% -14px;opacity:0;pointer-events:none;max-width:calc(100% - 24px);background:var(--ink);border-radius:99px;padding:5px;box-shadow:0 14px 34px -14px rgba(2,32,71,.45);transition:opacity .35s,translate .5s var(--ease)}
.chap.show{opacity:1;translate:-50% 0;pointer-events:auto}
.chap ul{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-radius:99px}
.chap ul::-webkit-scrollbar{display:none}
.chap a{position:relative;z-index:1;display:block;flex:0 0 auto;padding:8px 15px;border-radius:99px;font-size:13px;font-weight:600;color:#8b95a1;white-space:nowrap;transition:color .35s}
.chap a:hover{color:#fff}
.chap a.on{color:var(--ink)}
.chap-ind{position:absolute;z-index:0;top:0;left:0;height:100%;width:0;border-radius:99px;background:#fff;transition:left .55s var(--ease),width .55s var(--ease),opacity .3s;opacity:0}
.chap-ind.on{opacity:1}

/* ---------- 01 수업 방식: 두 카드가 가운데로 모여 하나의 수업이 됨 ---------- */
#way{overflow:clip}
.duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.tcard{position:relative;border-radius:var(--r);padding:clamp(28px,3.2vw,48px);overflow:hidden;min-height:480px;display:flex;flex-direction:column;will-change:transform}
.tcard.nt{background:var(--ink);color:#fff}
.tcard.bt{background:#fff;border:1px solid #e5e8eb;box-shadow:var(--shadow)}
.tcard .tag{align-self:flex-start;font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:6px 12px;border-radius:99px;margin-bottom:auto}
.tcard.nt .tag{background:rgba(255,255,255,.12);color:#333d4b}
.tcard.bt .tag{background:#f2f4f6;color:var(--ink-2)}
.tcard .big{position:absolute;right:clamp(18px,2.6vw,40px);top:clamp(14px,2vw,28px);font-size:clamp(90px,10vw,160px);font-weight:800;letter-spacing:-.07em;line-height:.9;opacity:.1}
.tcard h3{font-size:clamp(26px,2.6vw,40px);line-height:1.2;font-weight:700;letter-spacing:-.04em;margin-top:clamp(56px,6vw,96px)}
.tcard>p{margin-top:12px;font-size:16px;opacity:.75}
.tcard ul{margin-top:26px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.35)}
.tcard li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(127,127,127,.22);font-size:15px}
.tcard li span{opacity:.6;font-size:13.5px;text-align:right}
.duo-knot{position:absolute;left:50%;top:50%;z-index:3;translate:-50% -50%;width:clamp(84px,7vw,108px);height:clamp(84px,7vw,108px);border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;text-align:center;font-size:13px;font-weight:700;line-height:1.25;box-shadow:0 18px 40px -14px rgba(2,32,71,.35)}
.duo-knot b{display:block;font-size:30px;line-height:1;margin-bottom:2px}
.duo-more{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:36px}
.duo-more li{border-top:1px solid var(--line-2);padding-top:14px;font-size:14px;color:var(--muted)}
.duo-more b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px;letter-spacing:-.02em}

/* ---------- 02 관리 시스템: 아코디언 확장 ---------- */
.sys-sec{background:var(--paper)}
.acc-si svg{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.acc-item.open .acc-si svg{stroke:var(--accent-ink)}
.acc-body .ph.blank{display:flex;flex-direction:column;justify-content:center;background:#f2f4f6;padding:clamp(18px,2vw,28px);aspect-ratio:auto;min-height:100%}
.msg{background:#fff;border-radius:var(--r-sm);padding:16px 18px;font-size:14px;box-shadow:var(--shadow)}
.msg-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.msg-h span{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700}
.msg-h b{font-size:14px}
.msg-h small{margin-left:auto;font-size:12px;color:var(--muted)}
.msg ul{display:grid;gap:8px;color:var(--ink-2)}
.msg li{display:grid;grid-template-columns:64px 1fr;gap:8px}
.msg li b{color:var(--accent-ink);font-weight:700;font-size:12.5px;padding-top:1px}
.msg-note{margin-top:12px;font-size:12px;color:var(--muted)}
.flow4{display:grid;gap:8px;counter-reset:f}
.flow4 li{counter-increment:f;display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:12px 14px;font-size:15px;font-weight:600;box-shadow:0 1px 2px rgba(2,32,71,.04)}
.flow4 li::before{content:counter(f);width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;display:grid;place-items:center;flex:none}
.flow4 li:last-child::before{background:var(--accent)}
.flow4-cap{font-size:13px;color:var(--muted);margin-bottom:12px}

/* ---------- 03 커리큘럼 (어두운 로드맵 · 다섯 단계) ---------- */
.roadmap .track{grid-template-columns:repeat(5,minmax(200px,1fr))}
.stage .card .cls{display:flex;flex-wrap:wrap;gap:5px;margin:-4px 0 12px}
.stage .card .cls i{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid #e5e8eb;color:#4e5968}
.stage .card .test{margin-top:14px;padding-top:12px;border-top:1px dashed #e5e8eb;font-size:12.5px;color:#8f8b83}
.stage .card .test b{display:inline;font-size:12.5px;margin:0;color:#333d4b;font-weight:600;letter-spacing:0}
.stage .card{min-height:268px}
.stage.key .card{position:relative}
.stage .flag{position:absolute;left:44px;top:12px;font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
.first-sem{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,4vw,64px);margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid #e5e8eb}
.first-sem h3{font-size:clamp(24px,2.4vw,34px);line-height:1.25;font-weight:700;letter-spacing:-.035em;margin-top:12px}
.first-sem h3 .g{color:#b0b8c1}
.roadmap .steps{grid-template-columns:repeat(3,1fr);margin-top:0}
.roadmap .steps li{border-top-color:#fff;color:#fff;font-size:18px}
.roadmap .steps b{color:var(--accent)}
.roadmap .steps span{color:#6b7684;font-size:14px;margin-top:6px;line-height:1.6}

/* ---------- 04 평가와 성과 ---------- */
.result-sec{background:var(--paper)}
.rp-step2{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border-radius:var(--r-xs);background:#f9fafb}
.rp-step2 span{font-size:14px;color:var(--ink-2)}
.rp-step2 b{font-size:26px;font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.rp-step2 b small{font-size:13px;font-weight:600;margin-left:3px;color:var(--muted)}
.evals{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;margin-top:32px}
.evals li{border-top:1px solid var(--ink);padding-top:14px}
.evals b{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:16px;letter-spacing:-.02em}
.evals b em{font-style:normal;font-size:12px;font-weight:700;color:var(--accent-ink)}
.evals span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.55}
.certs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.certs span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:8px 14px 8px 8px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.certs span::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px}
.r-note{margin-top:18px;font-size:13px;color:var(--muted)}

/* ---------- 05 Life at D.O.T (영상 카드 → 그 자리에서 재생) ---------- */
.life-sec .video{aspect-ratio:16/8}
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:3;display:none}
.video.playing video{display:block}
.video.playing .play,.video.playing .cap,.video.playing .dur{display:none}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;margin-top:clamp(36px,4vw,56px)}
.voices .quote p{font-size:clamp(18px,1.5vw,21px)}
.voices .quote em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:10px}

/* ---------- 06 1년의 행사 (가로로 흐르는 띠) ---------- */
.year-sec{overflow:hidden}
.js-motion .year-sec.is-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 56px}
.js-motion .year-sec.is-pin>.wrap{width:100%}
.year-sec.is-pin .sec-head{margin-bottom:clamp(28px,3vw,44px)}
.yr-wrap{position:relative}
.yr{display:flex;gap:14px;padding:0 var(--pad);width:max-content;will-change:transform}
.yc{position:relative;flex:0 0 auto;width:clamp(250px,22vw,320px);min-height:340px;border-radius:var(--r);background:#fff;border:1px solid #e5e8eb;padding:24px;display:flex;flex-direction:column;overflow:hidden}
.yc .mo{font-size:clamp(48px,4.6vw,68px);font-weight:700;letter-spacing:-.06em;line-height:.9}
.yc .mo small{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-left:4px;color:var(--muted)}
.yc .en{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-top:14px}
.yc h3{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.3;margin-top:auto;padding-top:28px}
.yc p{font-size:14px;color:var(--muted);margin-top:6px}
.yc.photo{width:clamp(320px,30vw,460px);padding:0;color:#fff;background:#222;border:0}
.yc.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yc.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.yc.photo div{position:relative;z-index:2;margin-top:auto;padding:24px}
.yc.photo h3{padding-top:0;font-size:24px}
.yc.photo p{color:rgba(255,255,255,.82)}
.yc.now{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.yc.now .badge{position:absolute;right:16px;top:16px;font-size:11.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:99px;padding:4px 10px}
.yr-bar{position:relative;height:2px;margin:28px var(--pad) 0;background:var(--line-2);border-radius:2px}
.yr-bar i{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* ---------- 07 사진으로 보는 D.O.T + 층 안내 ---------- */
.floors{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;margin-top:40px}
.floors li{border-top:1px solid var(--line-2);padding-top:14px;font-size:13.5px;color:var(--muted)}
.floors b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px;letter-spacing:-.02em}
.floors li.here{border-top:2px solid var(--accent)}
.floors li.here b{color:var(--accent-ink)}

/* ---------- 08 겨울특강 ---------- */
.feat-sec{background:var(--ink);color:#fff}
.feat-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,88px);align-items:start}
.feat-sec .eyebrow{color:#4e5968}
.feat-sec .sec-title .g{color:#b0b8c1}
.feat-sec .sec-desc{color:#6b7684;margin-top:18px}
.dates{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 28px}
.dates span{font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:99px;border:1px solid #e5e8eb;color:#333d4b}
.dates span.all{background:var(--accent);border-color:var(--accent);color:#fff}
.feat-sec .btn-light:hover{color:#fff}
.tiers{border-top:1px solid #fff}
.tier{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid #e5e8eb}
.tier em{font-style:normal;font-size:13px;font-weight:700;color:var(--accent);padding-top:6px}
.tier b{display:block;font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:-.03em}
.tier p{font-size:15px;color:#6b7684;margin-top:6px}

/* ---------- 09 자주 묻는 질문 ---------- */
.qa{border-top:1px solid var(--ink);max-width:1080px}
.qa .acc-btn{grid-template-columns:56px 1fr 44px;padding:20px 0}
.qa .acc-name{font-size:clamp(18px,1.6vw,23px)}
.qa .acc-ic{width:44px;height:44px}
.qa .acc-body{display:block;padding:0 56px 28px 76px}
.qa .acc-body p{font-size:16px;color:var(--ink-2);max-width:760px;line-height:1.75}

/* ---------- 10 다른 학원 ---------- */
.others-sec .fam{min-height:380px}
.fam[data-soon]{cursor:pointer}

/* ---------- 토스트 (아직 없는 페이지) ---------- */
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 20px;z-index:120;padding:13px 20px;border-radius:99px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s,translate .45s var(--ease);max-width:calc(100% - 32px);text-align:center;box-shadow:0 14px 40px -14px rgba(0,0,0,.5)}
.toast.show{opacity:1;translate:-50% 0}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .chap{top:74px}
}
@media (max-width:1023px){
  .duo-knot{display:none}
  .roadmap .track{grid-template-columns:repeat(5,minmax(230px,1fr))}
  .yr-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .yr-wrap::-webkit-scrollbar{display:none}
  .yc{scroll-snap-align:start}
  .yr-bar{display:none}
}
@media (max-width:900px){
  .duo,.feat-grid,.first-sem{grid-template-columns:1fr}
  .tcard{min-height:0}
  .chapters{grid-template-columns:1fr}
  .floors{grid-template-columns:1fr 1fr;gap:20px}
  .voices{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sub-hero .hero-photo{min-height:calc(100svh + 120px)}
  .sub-hero .hero-photo>img{object-position:56% 40%}
  .hero-top{padding:16px 16px 0;gap:12px}
  .ac-pills{width:calc(100% + 32px);margin:0 -16px;padding:0 16px}
  .ac-pills a{height:34px;padding:0 12px;font-size:12.5px}
  .hero-badge{font-size:12px;padding:6px 12px 6px 6px}
  .hero-badge img{height:28px}
  .logo-svg{height:32px}
  .nav.scrolled .logo-svg{height:28px}
  .chap{top:70px;border-radius:99px}
  .chap a{padding:7px 12px;font-size:12.5px}
  .tcard h3{margin-top:48px}
  .tcard li{flex-direction:column;gap:2px}
  .tcard li span{text-align:left}
  .duo-more{grid-template-columns:1fr;gap:16px}
  .evals{grid-template-columns:1fr;gap:16px}
  .rp-step2{flex-direction:column;align-items:flex-start;gap:4px}
  .roadmap .steps{grid-template-columns:1fr;gap:18px}
  .life-sec .video{aspect-ratio:4/3}
  .yc{width:76vw;min-height:300px}
  .yc.photo{width:84vw}
  .tier{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .qa .acc-btn{grid-template-columns:1fr 40px;gap:14px}
  .qa .acc-num{display:none}
  .qa .acc-body{padding:0 0 22px}
  .others-sec .fam{min-height:230px}
  .mbar{grid-template-columns:auto 1fr}
  .toast{bottom:88px}
}