/* 11/07 대표: 유리(글라스) 모양을 사이트 전체로 — 마이페이지·채팅방·프로필에서 쓴 느낌을 첫 화면·안내·로그인·의뢰서 등에도.
   뒤에 은은한 색 덩어리(초록·살구) + 떠다니는 선 아이콘(scripts/glass.js)이 깔리고, 카드·머리말·입력칸이 그 위에 반투명 유리로 뜬다. */
:root {
  --gl-forest: var(--color-forest, #1b3a3d); --gl-terra: var(--color-terracotta, #208787); --gl-mute: var(--color-text-muted, #65656b);
  --gl-glass: rgba(245, 250, 250, .74); --gl-glass-hi: rgba(255, 255, 255, .82);
  --gl-edge: 0 0 0 1px rgba(255, 255, 255, .65) inset, 0 0 0 1px rgba(27, 58, 61, .07);
  --gl-shadow: 0 1px 2px rgba(27, 58, 61,.10), 0 10px 22px -6px rgba(27, 58, 61,.24), 0 26px 50px -14px rgba(27, 58, 61,.28);
  --gl-blur: blur(18px) saturate(1.15);
}
/* ── 뒤 배경: 색 덩어리 + 아이콘 ── */
.gl-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gl-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: gl-drift var(--d, 28s) ease-in-out infinite alternate; }
.gl-blob.is-g1 { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: radial-gradient(circle, rgba(114, 168, 174,.55), rgba(114, 168, 174,0) 70%); }
.gl-blob.is-g2 { width: 38vw; height: 38vw; right: -10vw; top: 30vh; background: radial-gradient(circle, rgba(88, 141, 147,.45), rgba(88, 141, 147,0) 70%); --d: 34s; }
.gl-blob.is-t1 { width: 34vw; height: 34vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle, rgba(32, 136, 136,.38), rgba(32, 136, 136,0) 70%); --d: 40s; }
.gl-blob.is-y1 { width: 26vw; height: 26vw; right: 18vw; top: -8vw; background: radial-gradient(circle, rgba(227, 242, 241,.4), rgba(227, 242, 241,0) 70%); --d: 31s; }
@keyframes gl-drift { to { transform: translate(5vw, 4vh) scale(1.08); } }
.gl-fl { position: absolute; width: var(--s); height: var(--s); color: rgba(27, 58, 61,.15); animation: gl-float var(--d) ease-in-out infinite alternate; }
.gl-fl:nth-child(2n) { color: rgba(32, 135, 135,.18); }
.gl-fl svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes gl-float { to { transform: translate(var(--x), var(--y)) rotate(10deg); } }
/* 배경이 비치도록 바탕 칸들을 투명하게(초록 칸은 반투명) */
.gl-on body, body.gl-on { background: #eef0f0; }
.gl-on .ad-page, .gl-on .ad-section, .gl-on .ad-section--paper, .gl-on .h-doors-sec, .gl-on .s-hero, .gl-on .m-main { background-color: transparent !important; }
/* 첫 화면(gl-home): 맨 위 큰 칸·메뉴줄·업종 띠는 원래 모양 그대로, 그 아래부터 유리 */
.gl-home .h-hero, .gl-home .deco-marquee { position: relative; z-index: 1; background-color: var(--color-bg, #eef1f1) !important; }
.gl-on .ad-section--sage { background-color: rgba(210, 231, 234, .55) !important; }

/* ── 머리말: 위에 떠 있는 유리 막대 ── */
.gl-on:not(.gl-home) .ad-head, .gl-on .m-top { position: sticky; top: 0; z-index: 50; background: transparent !important; border-bottom: 0 !important; padding: 10px 16px 0; }
.gl-on:not(.gl-home) .ad-head > .ad-wrap, .gl-on .m-top__in { border-radius: 22px; background: rgba(245, 250, 250,.8) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-edge), 0 10px 30px -12px rgba(27, 58, 61,.25); padding-left: 22px !important; padding-right: 14px !important; transition: box-shadow .3s, background .3s; }
.gl-on.gl-scrolled:not(.gl-home) .ad-head > .ad-wrap, .gl-on.gl-scrolled .m-top__in { background: rgba(245, 250, 250,.86) !important; box-shadow: var(--gl-edge), 0 14px 34px -12px rgba(27, 58, 61,.34); }

/* ── 카드들: 유리판 + 초록빛 그림자 ── */
.gl-on .ad-door, .gl-on .ad-flow__card, .gl-on .ad-plan, .gl-on .s-req, .gl-on .m-side-card, .gl-on .hp-sec, .gl-on .rq-find, .gl-on .gl-card,
.gl-on .ms-how, .gl-on .ms-faq, .gl-on .ms-lv, .gl-on .h-revs__i, .gl-on .ad-bento > *, .gl-on .hp-toc, .gl-on .m-roles .m-role {
  background: var(--gl-glass) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 0 !important; border-radius: 26px; box-shadow: var(--gl-edge), var(--gl-shadow) !important;
}
.gl-on .ad-door--creator { background: rgba(209, 231, 233, .72) !important; }
.gl-on .ad-plan--featured { background: linear-gradient(160deg, rgba(33, 72, 76,.94), rgba(27, 58, 61,.97)) !important; }
.gl-on .ad-door, .gl-on .ad-plan, .gl-on .h-revs__i, .gl-on .ad-bento > * { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s !important; }
.gl-on .ad-door:hover, .gl-on .ad-plan:hover, .gl-on .ad-bento > *:hover { transform: translateY(-5px); box-shadow: var(--gl-edge), 0 22px 44px -12px rgba(27, 58, 61,.38) !important; }
/* 진행 순서 왼쪽 목록도 유리판으로 */
.gl-on .h-steps .ad-steps, .gl-on .s-steps .ad-steps { padding: 28px 28px 20px; border-radius: 26px; background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge), var(--gl-shadow); }
.gl-on .h-steps .ad-flow__card { box-shadow: var(--gl-edge), var(--gl-shadow) !important; }
/* 가격표 목록 */
.gl-on .h-plans__list { padding: 6px 24px; border-radius: 24px; background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge), var(--gl-shadow); }
.gl-on .h-plans__list li:first-child { border-top: 0; } .gl-on .h-plans__list li:last-child { border-bottom: 0; }
/* 영상 틀: 초록빛 그림자 */
.gl-on .h-intro__media, .gl-on .s-hero__media video, .gl-on .h-carousel__item video { box-shadow: 0 18px 40px -12px rgba(27, 58, 61,.38) !important; }
/* 첫 화면 큰 글 쪽: 유리판에 얹기 */
.gl-on:not(.gl-home) .h-hero__text, .gl-on .s-hero__text { position: relative; padding: 34px 34px 30px; border-radius: 30px; background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge), var(--gl-shadow); }
/* 업종 흐르는 띠 */
.gl-on:not(.gl-home) .deco-marquee { background: rgba(245, 250, 250,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(27, 58, 61,.08) !important; }
/* 마지막 진초록 띠: 안쪽 유리 */
.gl-on .ad-band .ad-wrap { position: relative; border-radius: 30px; background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding-block: 34px; }
/* 바닥글 */
.gl-on .ad-foot, .gl-on .m-foot { background: rgba(245, 250, 250,.6) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border-top: 1px solid rgba(255,255,255,.7) !important; }

/* ── 회원 화면(로그인·가입·의뢰서·도움말·의뢰 보기) ── */
.gl-on .m-main > .m-form, .gl-on .m-main > form.m-form, .gl-on .gl-form { padding: 28px; border-radius: 28px; background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge), var(--gl-shadow); }
.gl-on .m-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .gl-on .m-field textarea, .gl-on .m-input, .gl-on:not(.gl-home) .h-hero input[type=text], .gl-on .hp-search input, .gl-on .s-fields input, .gl-on .rq-find input[type=search] {
  border: 0 !important; border-radius: 14px !important; background: rgba(255,255,255,.86) !important;
  box-shadow: 0 0 0 1px rgba(27, 58, 61,.14), 0 2px 6px rgba(27, 58, 61,.05) !important; transition: box-shadow .2s, background .2s;
}
.gl-on .m-field input:focus, .gl-on .m-field textarea:focus, .gl-on .m-input:focus, .gl-on .hp-search input:focus { outline: none !important; background: #FAFAFA !important; box-shadow: 0 0 0 2px var(--gl-forest), 0 0 0 6px rgba(88, 141, 147,.18) !important; }
.gl-on .m-btn--primary { background: linear-gradient(180deg, #21484c, var(--gl-forest)) !important; box-shadow: 0 10px 22px -6px rgba(27, 58, 61,.4); border-radius: 14px; transition: transform .2s, box-shadow .2s; }
.gl-on .m-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(27, 58, 61,.45); }
.gl-on .hp-faq details, .gl-on .hp-faq > li { border-radius: 16px; }
.gl-on .rq-find + * .m-row, .gl-on #list > li, .gl-on .rq-list > li { border-radius: 22px; }
/* 들어올 때 살짝 떠오르기(스크롤로 보일 때) */
.gl-rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.gl-rise.is-in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .gl-on:not(.gl-home) .h-hero__text, .gl-on .s-hero__text { padding: 22px 18px; border-radius: 22px; }
  .gl-on:not(.gl-home) .ad-head, .gl-on .m-top { padding: 8px 8px 0; }
  .gl-fl { display: none; }
  .gl-blob { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .gl-blob, .gl-fl { animation: none !important; } .gl-rise { opacity: 1; transform: none; transition: none; } }
/* 목록 줄(의뢰 보기 등)도 유리 카드로 */
.gl-on .m-main .m-list { display: grid; gap: 14px; border: 0; }
.gl-on .m-main .m-list > .m-row { padding: 18px 20px; border: 0 !important; border-radius: 22px; background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-edge), 0 1px 2px rgba(27, 58, 61,.08), 0 10px 22px -8px rgba(27, 58, 61,.22); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.gl-on .m-main .m-list > .m-row:hover { transform: translateY(-3px); box-shadow: var(--gl-edge), 0 18px 34px -10px rgba(27, 58, 61,.3); }
.gl-on .rq-find + .m-list, .gl-on .rq-find ~ * > .m-list { border-top: 0; }
.gl-home body { background: var(--color-bg, #eef1f1); }
/* 11/07 마지막 진초록 띠: 유리판 안쪽 여백 넉넉히 → '첫 의뢰를 올려 보세요'가 가운데 쪽으로 */
.gl-on .ad-band .ad-band__row { padding: 40px clamp(28px, 6vw, 80px); align-items: center; column-gap: clamp(24px, 5vw, 72px); }
@media (max-width: 760px) { .gl-on .ad-band .ad-band__row { padding: 28px 22px; } }

/* 11/07 세트 영상: 초록 띠 대신 유리 틀 하나(영상 + 아래 설명 글을 같은 유리 안에) */
.gl-on .h-plans__set { padding: 10px 10px 0; border-radius: 28px; background: var(--gl-glass); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-edge), var(--gl-shadow) !important; }
.gl-on .h-plans__set .video-thumb { border: 0 !important; border-radius: 20px; box-shadow: 0 0 0 1px rgba(27, 58, 61,.08); overflow: hidden; }
.gl-on .h-plans__set .video-thumb > video { border-radius: 20px; }
.gl-on .h-plans__set figcaption { margin: 0; padding: 12px 8px 14px; text-align: center; background: none; font-size: 14px; color: #46464b; }
/* 11/07 '세 걸음이면 끝': 배경에 묻히지 않게 더 밝은 판 + 더 깊은 초록빛 그림자, 오른쪽 그림은 왼쪽 목록 세로 가운데에 맞춤 */
.gl-on .h-steps__grid { align-items: center; }
.gl-on .h-steps .ad-flow { align-self: center; }
.gl-on .h-steps .ad-steps, .gl-on .h-steps .ad-flow__card {
  background: rgba(255, 255, 255, .9) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(27, 58, 61,.10), 0 2px 4px rgba(27, 58, 61,.10), 0 18px 36px -10px rgba(27, 58, 61,.34), 0 40px 70px -24px rgba(27, 58, 61,.32) !important;
}
/* 세 장면(의뢰서·제안 3개·완성 화면) 모두 상자 가운데에 → 왼쪽 목록 가운데와 맞음 */
.gl-on .h-steps .ad-flow { height: 300px; }
.gl-on .h-steps .ad-flow__scene { position: absolute; inset: 0; display: grid; align-content: center; }

/* 11/08 대표: 배경은 깔끔하게 — 떠다니는 아이콘(별·하트·카메라 등) 없앰 */
.gl-fl { display: none !important; }