/* * EMOREN HOME — Side Navigation v2 (260830) * 이사님 지시: 「굳이 메뉴마다 아이콘을 달면 오히려 꼴보기 싫어 — 심플로 가」 · 「빈 자리는 위로 당겨 붙이고 비워둔다」 * * v1(260815)에서 바뀐 것 * ① 메뉴 아이콘(앰블럼·이모지·SVG) 전부 제거 → 글자만. 영문 서브라벨도 뺌 * ② 계정 블록을 메뉴 바로 아래에 붙임(v1은 margin-top:auto 로 바닥에 밀어 1920에서 481px 이 비었다) * ③ 접기 = 80px 아이콘 바 → 「완전히 숨김(0px) + 좌상단 ☰」. 아이콘이 없으니 아이콘 바가 성립하지 않는다 * ④ 유리 톤을 회색 → 웜 아이보리로(본문이 아이보리·골드라 v1은 왼쪽만 차가웠다) * ⑤ 폭 258 → 232px(글자만이라 좁혀도 안 답답하다) * * 구조 * · 데스크톱(>900px) : 좌측 고정 #site-side(로고 / 우리 아이 / 4대 메뉴 / 보조 메뉴 / 계정) + 접기(body.side-fold) * · 모바일(≤900px) : 상단 슬림바 #site-header(☰ · 로고 · ⚙) + 같은 #site-side가 좌측 드로어(body.side-open) * · 레이아웃 변수 : --side-w(본문 left 오프셋) · --top-h(본문 top 오프셋) * · 숨김 : play-mode(회기 무대) · sb-open(아카데미아 별이음판=자체 메뉴) · kid-session(로고 상단바만) * 마지막에 링크되어 renaissance-site-v1.css 뒤에서 캐스케이드를 이긴다. * ⛔접힘 규칙은 반드시 @media(min-width:901px) 안에만 둔다 — 밖에 두면 데스크톱에서 접어 둔 상태가 * 모바일 드로어(body.side-open)를 이겨 「☰ 눌러도 안 열림」이 된다. */ /* ── 레이아웃 변수 ─────────────────────────────────────── */ body{ --side-w:232px; --top-h:0px; --side-ease:cubic-bezier(.2,.8,.2,1); } @media(max-width:900px){ body, body.side-fold{ --side-w:0px; --top-h:56px; } } body.kid-session{ --side-w:0px; --top-h:56px; } body.play-mode, body.sb-open{ --side-w:0px; --top-h:0px; } /* ── 본문 오프셋 ─────────────────────────────────────── */ body.home-mode #home-wrap{ left:var(--side-w) !important; transition:left .3s var(--side-ease); } body.home-mode:not(.mp-page) .home-hero{ min-height:calc(100svh - var(--top-h)) !important; } body.mp-page #home-wrap > .mypage{ min-height:calc(100vh - var(--top-h,0px) - 30px); } /* 🎬 투어 캡션 = 본문 영역 가운데 · 투어 리포트 브로셔 = 사이드바 오른쪽·상단바 아래 */ #trial-tour{ left:calc(50% + var(--side-w) / 2); } #home-tour-report-brochure{ top:var(--top-h,0px) !important; left:var(--side-w,0px) !important; } /* 🛠 관리자(스테이징) 배지 = 사이드바 오른쪽으로(접힘이면 ☰ 레일을 피해 오른쪽으로 더) */ #admin-mode-badge{ left:calc(var(--side-w,0px) + 12px) !important; } @media(min-width:901px){ body.side-fold #admin-mode-badge{ left:62px !important; } } /* 런타임 dev-tablet 규칙 `button{min-height:44px}`(621~1100px)이 사이드바 작은 버튼을 늘리지 않게(ID 특이도로 고정) */ #site-side .sn-fold, #site-side .sn-close, #site-side .sn-out, #site-header .mb-burger, #site-header .mb-btn, #sn-rail{ min-height:0; } /* ── 본문 폭 보정: 뷰포트 @media(max-width:1080px) 라운지 축약을 「본문 폭 ≤1080」(=뷰포트 − 232)에서도 ── ※ 접힘은 --side-w:0 이라 본문 폭 = 뷰포트 → 원래 규칙이 그대로 맞는다(v1의 side-fold 보정 블록 불필요) */ @media(min-width:1081px) and (max-width:1312px){ body.home-mode:not(.side-fold) .guardian-mast.guardian-hero-v4{ grid-template-columns:170px 1fr; } body.home-mode:not(.side-fold) .gm-hero-actions{ grid-column:1/-1; } body.home-mode:not(.side-fold) .gm-hero-actions .gm-report{ min-height:74px; } body.home-mode:not(.side-fold) .guardian-mast.guardian-hero-v4 .gm-report{ grid-column:1/-1; min-height:58px; flex-direction:row; align-items:center; gap:10px; } body.home-mode:not(.side-fold) .guardian-mast.guardian-hero-v4 .gm-report b{ margin:0; } body.home-mode:not(.side-fold) .guardian-board.guardian-portals{ grid-template-columns:repeat(2,minmax(0,1fr)); } body.home-mode:not(.side-fold) .guardian-portal.journey{ grid-column:1/-1; min-height:300px; } body.home-mode:not(.side-fold) .guardian-portal.journey .gp-head{ grid-template-columns:126px 1fr; } body.home-mode:not(.side-fold) .guardian-portal.journey .gp-emblem{ width:128px; height:128px; } body.home-mode:not(.side-fold) .grb-grid{ grid-template-columns:minmax(0,1fr) minmax(330px,.8fr); } } /* ── 사이드바 본체 ────────────────────────────────────── */ #site-side{ position:fixed; top:0; left:0; bottom:0; z-index:70; width:var(--side-w); display:none; flex-direction:column; box-sizing:border-box; padding:16px 12px 16px; background:linear-gradient(180deg,rgba(255,253,249,.93) 0%,rgba(253,248,240,.87) 100%); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); border-right:1px solid rgba(186,160,120,.20); box-shadow:inset -1px 0 0 rgba(255,255,255,.75), 10px 0 40px rgba(120,98,64,.07); font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif; color:#4f5b6b; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; transition:transform .3s var(--side-ease), opacity .24s ease, box-shadow .3s ease; } #site-side::-webkit-scrollbar{ display:none; } #site-side::after{ content:""; position:absolute; top:30px; bottom:30px; right:-1px; width:1px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(206,170,96,.5) 28%,rgba(22,179,100,.18) 72%,transparent); } body.home-mode #site-side{ display:flex; } body.play-mode #site-side, body.sb-open #site-side, body.kid-session #site-side{ display:none !important; } /* 상단: 로고 + 접기(데스크톱) / 닫기(모바일) */ .sn-top{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; margin-bottom:12px; padding:0 2px 0 6px; } .sn-logo{ display:flex; align-items:center; gap:8px; min-width:0; cursor:pointer; text-decoration:none; } .sn-logo img.sn-word{ height:32px; width:auto; display:block; filter:drop-shadow(0 4px 9px rgba(140,110,60,.16)); } .sn-fold, .sn-close{ flex:none; width:32px; height:32px; border-radius:10px; padding:0; display:grid; place-items:center; cursor:pointer; border:1px solid rgba(186,160,120,.24); background:rgba(255,255,255,.8); color:#8a7a60; transition:background .2s, color .2s, border-color .2s; } .sn-fold svg, .sn-close svg{ width:15px; height:15px; } .sn-fold:hover, .sn-close:hover{ background:#fff; color:#16835a; border-color:rgba(22,179,100,.3); } .sn-close{ display:none; } /* 📌 접힘 상태에서 좌상단에 남는 «펼치기» 레일 버튼(데스크톱 전용) */ #sn-rail{ position:fixed; top:14px; left:14px; z-index:71; width:38px; height:38px; border-radius:12px; padding:0; display:none; place-items:center; cursor:pointer; border:1px solid rgba(186,160,120,.26); background:rgba(255,253,249,.92); color:#7d6c52; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 8px 22px rgba(120,98,64,.16); transition:background .2s, color .2s, transform .2s var(--side-ease); } #sn-rail svg{ width:19px; height:19px; } #sn-rail:hover{ background:#fff; color:#16835a; transform:translateX(1px); } /* ── 우리 아이(자녀 전환·추가) ─────────────────────────── */ .sn-sec{ font-size:9.5px; font-weight:900; letter-spacing:.15em; color:#a4947c; text-transform:uppercase; padding:2px 12px 6px; } .sn-kids{ display:flex; flex-direction:column; gap:2px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid rgba(186,160,120,.2); } .sn-kids:empty{ display:none; } .sn-kid{ display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:5px 10px; border-radius:12px; border:1px solid transparent; background:transparent; color:#4f5b6b; font-family:inherit; font-size:13.5px; font-weight:800; letter-spacing:-.02em; text-align:left; white-space:nowrap; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .2s, border-color .2s, box-shadow .2s; } .sn-kid:hover{ background:rgba(255,255,255,.9); border-color:rgba(186,160,120,.22); } .sn-kid.active{ background:rgba(255,255,255,.95); border-color:rgba(22,179,100,.28); box-shadow:0 6px 16px rgba(120,98,64,.09); color:#2f3d4e; } .sn-kid.active .sn-kid-ava{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #16B364; } .sn-kid-ava{ flex:none; width:30px; height:30px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:linear-gradient(135deg,#ffc2d8,#ffdcae); color:#8a3a5c; font-size:12.5px; font-weight:900; box-shadow:0 2px 7px rgba(0,0,0,.1); } .sn-kid.add .sn-kid-ava{ background:rgba(22,179,100,.09); color:#16835a; border:1.5px dashed rgba(22,179,100,.42); box-shadow:none; font-size:15px; } .sn-kid.add{ color:#8a8779; font-weight:750; } .sn-kid-nm{ display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; } .sn-kid-nm > span{ overflow:hidden; text-overflow:ellipsis; } .sn-kid-nm small{ font-size:10px; font-weight:700; color:#9a9282; } .sn-kid.active .sn-kid-nm small{ color:#16835a; } /* 🧭 본문 쪽 중복 내비 정리(260815 2차): 데스크톱=사이드바가 있으므로 「← 가디언 라운지」 숨김(모바일=드로어 뒤라 유지) */ @media(min-width:901px){ body.home-mode .guardian-back{ display:none !important; } body.home-mode .cp-topbar{ justify-content:flex-end; } } .gp-tools.gp-tools-2{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); } /* ── 메뉴(글자만) ────────────────────────────────────── */ .sn-nav{ flex:0 0 auto; display:flex; flex-direction:column; gap:2px; padding:0 0 2px; } .sn-item{ position:relative; display:flex; align-items:center; width:100%; min-height:46px; padding:6px 14px; box-sizing:border-box; border-radius:13px; border:1px solid transparent; background:transparent; color:#54606f; font-family:inherit; font-size:15px; font-weight:800; letter-spacing:-.025em; line-height:1.25; text-align:left; white-space:nowrap; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease; } .sn-lb{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .sn-item:hover{ background:rgba(255,255,255,.92); border-color:rgba(186,160,120,.2); color:var(--menu-ink,#16835a); } .sn-item:active{ transform:scale(.995); } .sn-item:focus-visible{ outline:2px solid var(--menu-theme,#16B364); outline-offset:-2px; } .sn-item.active{ color:#fff; border-color:rgba(255,255,255,.7); background:var(--menu-grad,linear-gradient(135deg,#168c60,#2bc48a)); box-shadow:0 8px 20px var(--menu-glow,rgba(24,165,110,.26)), inset 0 1px 0 rgba(255,255,255,.4); } /* 4대 메뉴 테마 */ .sn-item.theme-green{ --menu-theme:#18a56e; --menu-ink:#126b49; --menu-grad:linear-gradient(135deg,#168c60,#2bc48a); --menu-glow:rgba(24,165,110,.28); } .sn-item.theme-pink { --menu-theme:#e7579a; --menu-ink:#a43d6d; --menu-grad:linear-gradient(135deg,#d74687,#f78bbb); --menu-glow:rgba(231,87,154,.28); } .sn-item.theme-blue { --menu-theme:#299bd2; --menu-ink:#176e99; --menu-grad:linear-gradient(135deg,#1d82b7,#4fc0ec); --menu-glow:rgba(41,155,210,.28); } .sn-item.theme-gold { --menu-theme:#cf9a33; --menu-ink:#8a6420; --menu-grad:linear-gradient(135deg,#c48d27,#eec063); --menu-glow:rgba(207,154,51,.28); } /* 구분선 + 보조 메뉴(요금제·쿠폰·이용권·환경설정) */ .sn-sep{ flex:none; height:1px; margin:10px 12px 8px; background:linear-gradient(90deg,transparent,rgba(186,160,120,.32),transparent); } .sn-item.sn-mini{ min-height:38px; font-size:13.5px; font-weight:750; color:#7f8794; border-radius:11px; padding:4px 14px; } .sn-item.sn-mini:hover{ color:#16835a; background:rgba(255,255,255,.88); } /* ── 계정 블록: 메뉴 «바로 아래»(v1은 margin-top:auto 로 바닥에 붙어 가운데가 비었다) ── */ .sn-foot{ flex:none; margin-top:14px; padding-top:12px; border-top:1px solid rgba(186,160,120,.2); } .sn-user{ display:flex; align-items:center; gap:9px; padding:7px 7px 7px 8px; border-radius:14px; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.94); box-shadow:0 6px 16px rgba(120,98,64,.07); } .sn-ava{ flex:none; width:34px; height:34px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:linear-gradient(135deg,#16B364,#2BC4A8); color:#fff; font-weight:900; font-size:15px; box-shadow:0 3px 10px rgba(22,179,100,.22); } .sn-who{ flex:1 1 auto; min-width:0; } .sn-name{ font-size:13px; font-weight:850; color:#3b4757; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sn-role{ font-size:10.5px; font-weight:700; color:#9a9282; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .sn-out{ flex:none; width:32px; height:32px; border-radius:10px; padding:0; border:1px solid rgba(186,160,120,.24); background:#fff; color:#8a7a60; display:grid; place-items:center; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .sn-out svg{ width:15px; height:15px; } .sn-out:hover{ background:#fff0f4; color:#d0457e; border-color:rgba(208,69,126,.26); } .sn-login{ width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; padding:0 14px; border:1px solid rgba(255,255,255,.6); background:linear-gradient(135deg,#16B364,#2BC4A8); color:#fff; font-family:inherit; font-size:14px; font-weight:850; letter-spacing:-.01em; cursor:pointer; box-shadow:0 8px 20px rgba(22,179,100,.26), inset 0 1px 0 rgba(255,255,255,.4); transition:transform .2s var(--side-ease), box-shadow .2s; } .sn-login svg{ width:16px; height:16px; } .sn-login:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(22,179,100,.32), inset 0 1px 0 rgba(255,255,255,.4); } .sn-signup{ margin:9px 0 2px; text-align:center; font-size:12px; font-weight:700; color:#8a8779; } .sn-signup b{ color:#16835a; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } /* ── 접힘(데스크톱): 사이드바를 통째로 숨기고 좌상단 ☰ 만 남긴다 ── ⛔이 블록은 반드시 min-width:901px 안에 — 밖에 두면 모바일 드로어가 안 열린다 */ @media(min-width:901px){ body.side-fold{ --side-w:0px; } body.side-fold #site-side{ transform:translateX(-100%); opacity:0; visibility:hidden; pointer-events:none; box-shadow:none; } /* ⚠️레일은 «사이드바가 원래 보이는 화면»에서만 뜬다 — 도비라(gate-page)·회기 무대·별이음판·아이 기기에선 사이드바 자체가 없다. gate-v2.css 는 #site-side/#site-header 만 숨기므로 새 요소인 레일은 여기서 직접 막아야 한다(실측: 접어 둔 채 도비라로 나가면 ☰ 가 떠 있었다). */ body.home-mode.side-fold:not(.gate-page):not(.play-mode):not(.sb-open):not(.kid-session) #sn-rail{ display:grid; } } /* ── 모바일: 상단 슬림바 + 드로어 ─────────────────────── */ #site-header{ position:fixed; top:0; left:0; right:0; z-index:68; height:var(--top-h); display:none; align-items:center; justify-content:space-between; gap:8px; padding:0 10px 0 8px; box-sizing:border-box; background:rgba(255,253,249,.88); -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15); border-bottom:1px solid rgba(186,160,120,.2); box-shadow:0 8px 26px rgba(120,98,64,.07); font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif; } /* index.html/renaissance 의 #site-header !important 를 더 높은 특이도로 덮음 */ body.home-mode:not(.play-mode):not(.sb-open) #site-header{ height:var(--top-h) !important; padding:0 10px 0 8px !important; border:0 !important; border-bottom:1px solid rgba(186,160,120,.2) !important; background:rgba(255,253,249,.88) !important; box-shadow:0 8px 26px rgba(120,98,64,.07) !important; } body.home-mode:not(.play-mode):not(.sb-open) #site-header::after{ left:14px; right:14px; } @media(max-width:900px){ body.home-mode #site-header{ display:flex; } #sn-rail{ display:none !important; } } /* 👦 아이 기기: 모든 폭에서 로고 상단바만 — 단 별이음판(sb-open)·회기 무대(play-mode)에선 절대 안 뜸 */ body.kid-session.home-mode:not(.sb-open):not(.play-mode) #site-header{ display:flex !important; } body.play-mode #site-header, body.sb-open #site-header, body.play-mode #site-side, body.sb-open #site-side{ display:none !important; } .mb-burger, .mb-btn{ flex:none; width:38px; height:38px; border-radius:11px; padding:0; border:1px solid rgba(186,160,120,.24); background:rgba(255,255,255,.86); color:#7d6c52; display:grid; place-items:center; cursor:pointer; box-shadow:0 5px 14px rgba(120,98,64,.08); font-size:16px; line-height:1; } .mb-burger svg, .mb-btn svg{ width:19px; height:19px; } .mb-logo{ display:flex; align-items:center; justify-content:center; min-width:0; flex:1 1 auto; cursor:pointer; } .mb-logo img{ height:27px; width:auto; display:block; filter:drop-shadow(0 3px 7px rgba(140,110,60,.14)); } .mb-right{ display:flex; align-items:center; gap:6px; flex:none; width:38px; justify-content:flex-end; } body.kid-session .mb-burger, body.kid-session .mb-right{ visibility:hidden; } /* 백드롭: 닫힘=visibility hidden(합성 레이어·포커스 0) · 열림에서만 블러 */ #side-backdrop{ position:fixed; inset:0; z-index:69; background:rgba(40,30,16,.42); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s ease, visibility 0s linear .26s; } @media(max-width:900px){ /* 드로어 닫힘 = 화면 밖 + visibility:hidden(탭 순서·스크린리더 제외) · 열림 = 슬라이드 인 */ /* ⚠️드로어는 «본문 위»에 뜬다 — 데스크톱과 같은 반투명(.93/.87)이면 아래 빈 자리로 뒷 화면이 비쳐 지저분하다. 거의 불투명하게. */ #site-side{ width:min(292px,84vw); transform:translateX(-106%); visibility:hidden; box-shadow:none; padding-top:12px; background:linear-gradient(180deg,rgba(255,253,249,.985) 0%,rgba(253,248,240,.975) 100%); transition:transform .32s var(--side-ease), visibility 0s linear .32s, box-shadow .3s ease; } body.side-open #site-side{ transform:none; visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; box-shadow:16px 0 54px rgba(50,36,14,.24); } body.side-open #side-backdrop{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .sn-fold{ display:none; } .sn-close{ display:grid; width:38px; height:38px; } .sn-out{ width:36px; height:36px; } .sn-item{ min-height:52px; font-size:15.5px; } .sn-item.sn-mini{ min-height:44px; font-size:14px; color:#6f7886; } .sn-kid{ min-height:48px; } .sn-signup{ font-size:13px; padding:6px 0; } } /* 데스크톱에선 상단바 없음 */ @media(min-width:901px){ body.home-mode:not(.kid-session) #site-header{ display:none !important; } } /* 낮은 화면: 항목 밀도 — 자녀 4명 + 회원 메뉴까지 다 켜지면 786px 이 필요하다(실측). 768~800px 노트북에서 계정 블록이 화면 밖으로 나가지 않게 여기서 압축한다(그래도 모자라면 #site-side 가 스크롤). */ @media(max-height:800px) and (min-width:901px){ .sn-item{ min-height:42px; } .sn-item.sn-mini{ min-height:35px; } .sn-kid{ min-height:38px; } .sn-top{ min-height:40px; margin-bottom:10px; } }