/* * EMOREN HOME — Side Navigation v1 (260815) * 이사님 지시: 「상단 메뉴 = 구식 홈페이지. 요즘 AI 사이트처럼 좌측에 메뉴를 주루룩 — 이 구조로 간다. 틀을 바꾸자.」 * * 구조 * · 데스크톱(>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(아카데미아 별이음판=자체 GNB) · kid-session(아이 기기=로고 상단바만) * 이 파일은 마지막에 링크되어 renaissance-site-v1.css 뒤에서 캐스케이드를 이긴다. * (런타임 주입 #home-device-css의 #home-wrap padding-top은 index.html 쪽에서 var(--top-h) 기반으로 정정) */ /* ── 레이아웃 변수 ─────────────────────────────────────── */ body{ --side-w:258px; --top-h:0px; --side-ease:cubic-bezier(.2,.8,.2,1); } body.side-fold{ --side-w:80px; } @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; } /* ── 본문 오프셋: #home-wrap(scene-home 전체 스크롤 컨테이너)을 사이드바 폭만큼 오른쪽으로 ── */ body.home-mode #home-wrap{ left:var(--side-w) !important; transition:left .28s var(--side-ease); } /* 랜딩 히어로 = 화면 높이(상단바가 있을 때만 그만큼 뺌) */ body.home-mode:not(.mp-page) .home-hero{ min-height:calc(100svh - var(--top-h)) !important; } /* 대시보드 본문 최소 높이(푸터는 폴드 아래로) — 구 값 calc(100vh - 96px)은 헤더 68px 전제 → 새 상단 여백(--top-h+18)에 맞춤 */ 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; } /* 런타임 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{ min-height:0; } /* ── 본문 폭 보정: 뷰포트 기준 @media(max-width:1080px) 라운지 축약 레이아웃을 「본문 폭 ≤1080」(=뷰포트 − 사이드바 폭)에서도 적용 ── */ @media(min-width:1081px) and (max-width:1338px){ 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); } } @media(min-width:1081px) and (max-width:1160px){ body.home-mode.side-fold .guardian-mast.guardian-hero-v4{ grid-template-columns:170px 1fr; } body.home-mode.side-fold .gm-hero-actions{ grid-column:1/-1; } body.home-mode.side-fold .gm-hero-actions .gm-report{ min-height:74px; } body.home-mode.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.side-fold .guardian-mast.guardian-hero-v4 .gm-report b{ margin:0; } body.home-mode.side-fold .guardian-board.guardian-portals{ grid-template-columns:repeat(2,minmax(0,1fr)); } body.home-mode.side-fold .guardian-portal.journey{ grid-column:1/-1; min-height:300px; } body.home-mode.side-fold .guardian-portal.journey .gp-head{ grid-template-columns:126px 1fr; } body.home-mode.side-fold .guardian-portal.journey .gp-emblem{ width:128px; height:128px; } body.home-mode.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:14px 12px 12px; background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.8) 100%); -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2); border-right:1px solid rgba(112,105,176,.14); box-shadow:inset -1px 0 0 rgba(255,255,255,.7), 12px 0 44px rgba(74,68,124,.08); font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif; color:#34465e; transition:width .28s var(--side-ease), transform .32s var(--side-ease), box-shadow .3s ease; } #site-side::after{ content:""; position:absolute; top:26px; bottom:26px; right:-1px; width:1px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(210,165,77,.55) 30%,rgba(126,110,215,.24) 70%,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:8px; min-height:52px; padding:0 4px 0 8px; } .sn-logo{ display:flex; align-items:center; gap:8px; min-width:0; cursor:pointer; text-decoration:none; } .sn-logo img.sn-word{ height:36px; width:auto; display:block; filter:drop-shadow(0 5px 10px rgba(97,83,159,.16)); } .sn-logo img.sn-mark{ display:none; width:40px; height:40px; border-radius:13px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(97,83,159,.18)); } .sn-close{ display:none; width:36px; height:36px; border-radius:11px; border:1px solid rgba(116,104,177,.16); background:rgba(255,255,255,.85); color:#6d60bc; place-items:center; cursor:pointer; padding:0; } .sn-close svg{ width:16px; height:16px; } /* 접기 토글(사이드바 오른쪽 가장자리에 반쯤 걸친 원형 버튼) */ .sn-fold{ position:absolute; top:24px; right:-14px; z-index:3; width:28px; height:28px; border-radius:50%; padding:0; border:1px solid rgba(116,104,177,.22); background:#fff; color:#6d60bc; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 16px rgba(83,71,148,.16); transition:transform .22s var(--side-ease), background .2s, box-shadow .2s; } .sn-fold svg{ width:14px; height:14px; transition:transform .28s var(--side-ease); } .sn-fold:hover{ background:#f6f3ff; transform:scale(1.08); box-shadow:0 8px 20px rgba(83,71,148,.22); } body.side-fold .sn-fold svg{ transform:rotate(180deg); } /* 메뉴 목록 */ .sn-nav{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px; padding:8px 2px 8px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; } .sn-nav::-webkit-scrollbar{ display:none; } .sn-item{ position:relative; display:flex; align-items:center; gap:11px; width:100%; min-height:54px; padding:6px 10px; box-sizing:border-box; border-radius:17px; border:1px solid transparent; background:transparent; color:#4d5b73; font-family:inherit; font-size:14.5px; font-weight:800; letter-spacing:-.02em; line-height:1.2; text-align:left; white-space:nowrap; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .22s var(--side-ease), box-shadow .22s ease; } .sn-item:hover{ background:rgba(255,255,255,.88); border-color:rgba(119,103,217,.13); color:var(--menu-ink,#4a3f9a); transform:translateX(2px); box-shadow:0 8px 20px rgba(83,71,148,.09); } .sn-item:active{ transform:translateX(1px) scale(.99); } .sn-item:focus-visible{ outline:2px solid var(--menu-theme,#7c70dd); outline-offset:-2px; } /* 안쪽 링(.sn-nav overflow 클리핑 회피) */ .sn-item.active{ color:#fff; border-color:rgba(255,255,255,.72); background:var(--menu-grad,linear-gradient(135deg,#7c70dd,#a879df 55%,#ed83b5)); box-shadow:0 10px 24px var(--menu-glow,rgba(123,104,214,.28)), inset 0 1px 0 rgba(255,255,255,.42); transform:none; } .sn-emblem{ flex:none; width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:18px; line-height:1; border:1.5px solid var(--menu-theme,#7c70dd); background:linear-gradient(145deg,#fff,var(--menu-soft,#f3f0ff)); box-shadow:0 3px 9px color-mix(in srgb,var(--menu-theme,#7c70dd) 22%,transparent), inset 0 0 0 2px rgba(255,255,255,.9); transition:border-color .2s, background .2s, box-shadow .2s; } .sn-emblem img{ width:32px; height:32px; object-fit:contain; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.16)); } .sn-emblem svg{ width:23px; height:23px; display:block; } .sn-item.active .sn-emblem{ border-color:rgba(255,255,255,.9); background:rgba(255,255,255,.95); box-shadow:0 4px 12px rgba(0,0,0,.14), inset 0 0 0 2px rgba(255,255,255,.8); } .sn-lb{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; display:flex; flex-direction:column; gap:2px; } .sn-sub{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.12em; color:#7f8ba0; text-transform:uppercase; line-height:1; } .sn-item.active .sn-sub{ color:rgba(255,255,255,.84); } /* 4대 메뉴 테마(앰블럼 프레임 색·활성 그라데이션) */ .sn-item.theme-green{ --menu-theme:#18a56e; --menu-soft:#eaf9f2; --menu-ink:#126b49; --menu-grad:linear-gradient(135deg,#168c60,#2bc48a); --menu-glow:rgba(24,165,110,.3); } .sn-item.theme-pink { --menu-theme:#e7579a; --menu-soft:#fff0f7; --menu-ink:#a43d6d; --menu-grad:linear-gradient(135deg,#d74687,#f78bbb); --menu-glow:rgba(231,87,154,.3); } .sn-item.theme-blue { --menu-theme:#299bd2; --menu-soft:#edf9ff; --menu-ink:#176e99; --menu-grad:linear-gradient(135deg,#1d82b7,#4fc0ec); --menu-glow:rgba(41,155,210,.3); } .sn-item.theme-gold { --menu-theme:#cf9a33; --menu-soft:#fff6e2; --menu-ink:#8a6420; --menu-grad:linear-gradient(135deg,#c48d27,#eec063); --menu-glow:rgba(207,154,51,.3); } .sn-item.theme-gold .sn-emblem svg{ color:#b9862a; } .sn-item.theme-gold.active .sn-emblem svg{ color:#b07a1c; } /* 👧 우리 아이(자녀 전환·추가) — 구 본문 상단바 자녀 탭 대체 */ .sn-sec{ font-size:9.5px; font-weight:900; letter-spacing:.14em; color:#8b97ab; text-transform:uppercase; padding:6px 12px 4px; } .sn-kids{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px; padding-bottom:8px; border-bottom:1px solid rgba(112,105,176,.12); } .sn-kids:empty{ display:none; } .sn-kid{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:5px 10px; border-radius:14px; border:1px solid transparent; background:transparent; color:#4d5b73; 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, transform .2s var(--side-ease), box-shadow .2s; } .sn-kid:hover{ background:rgba(255,255,255,.88); border-color:rgba(119,103,217,.13); transform:translateX(2px); } .sn-kid.active{ background:rgba(255,255,255,.92); border-color:rgba(124,108,224,.28); box-shadow:0 8px 20px rgba(83,71,148,.1), inset 0 0 0 1px rgba(255,255,255,.9); color:#34465e; } .sn-kid.active .sn-kid-ava{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #7c70dd; } .sn-kid-ava{ flex:none; width:32px; height:32px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:linear-gradient(135deg,#ffb2d0,#ffd8a5); color:#8a3a5c; font-size:13px; font-weight:900; box-shadow:0 3px 8px rgba(0,0,0,.12); } .sn-kid.add .sn-kid-ava{ background:rgba(124,108,224,.1); color:#6d60bc; border:1.5px dashed rgba(124,108,224,.45); box-shadow:none; font-size:16px; } .sn-kid.add{ color:#7d789b; font-weight:750; } .sn-kid-nm{ display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; text-overflow:ellipsis; } .sn-kid-nm small{ font-size:10px; font-weight:700; color:#8b97ab; } .sn-kid.active .sn-kid-nm small{ color:#7c70dd; } @media(min-width:901px){ body.side-fold .sn-sec, body.side-fold .sn-kid-nm{ display:none; } body.side-fold .sn-kid{ justify-content:center; padding:5px 0; gap:0; } body.side-fold .sn-kid:hover{ transform:none; } } /* 🧭 본문 쪽 중복 내비 정리(이사님 260815 2차): 데스크톱=사이드바가 항상 보이므로 「← 가디언 라운지」 뒤로가기 버튼 숨김(모바일=드로어 뒤라 유지) · 포털 푸터 도구 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-sep{ flex:none; height:1px; margin:8px 10px 6px; background:linear-gradient(90deg,transparent,rgba(112,105,176,.24),transparent); } .sn-item.sn-mini{ min-height:46px; font-size:13.5px; font-weight:750; color:#5c6a80; border-radius:14px; } .sn-item.sn-mini .sn-emblem{ width:34px; height:34px; border-radius:11px; font-size:16px; border:1px solid rgba(116,104,177,.18); background:rgba(255,255,255,.82); box-shadow:none; } .sn-item.sn-mini:hover{ color:#5d4fc0; } /* 하단 계정 블록 */ .sn-foot{ flex:none; margin-top:auto; padding:10px 2px 2px; border-top:1px solid rgba(112,105,176,.12); } .sn-user{ display:flex; align-items:center; gap:10px; padding:8px 8px 8px 9px; border-radius:17px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.92); box-shadow:0 8px 20px rgba(78,69,129,.08); } .sn-ava{ flex:none; width:38px; height:38px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:linear-gradient(135deg,#16B364,#22C55E); color:#fff; font-weight:900; font-size:16px; box-shadow:0 4px 12px rgba(22,179,100,.22); } .sn-who{ flex:1 1 auto; min-width:0; } .sn-name{ font-size:13.5px; font-weight:850; color:#34465e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sn-role{ font-size:10.5px; font-weight:700; color:#8b97ab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .sn-out{ flex:none; width:34px; height:34px; border-radius:11px; padding:0; border:1px solid rgba(116,104,177,.16); background:#fff; color:#6d60bc; display:grid; place-items:center; cursor:pointer; transition:background .2s, color .2s, transform .2s; } .sn-out svg{ width:16px; height:16px; } .sn-out:hover{ background:#fff0f4; color:#d0457e; border-color:rgba(208,69,126,.25); transform:translateX(1px); } .sn-login{ width:100%; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:15px; padding:0 14px; border:1px solid rgba(255,255,255,.62); background:linear-gradient(135deg,#7c70dd,#a879df 55%,#ed83b5); color:#fff; font-family:inherit; font-size:14px; font-weight:850; letter-spacing:-.01em; cursor:pointer; box-shadow:0 10px 24px rgba(123,104,214,.28), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .22s var(--side-ease), box-shadow .22s; } .sn-login svg{ width:17px; height:17px; } .sn-login:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(123,104,214,.34), inset 0 1px 0 rgba(255,255,255,.45); } .sn-signup{ margin:9px 0 2px; text-align:center; font-size:12px; font-weight:700; color:#7d789b; } .sn-signup b{ color:#6d60bc; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } /* ── 접힘(데스크톱): 아이콘만 ───────────────────────────── */ @media(min-width:901px){ body.side-fold #site-side{ padding-left:10px; padding-right:10px; } body.side-fold .sn-top{ justify-content:center; padding:0; } body.side-fold .sn-logo img.sn-word{ display:none; } body.side-fold .sn-logo img.sn-mark{ display:block; } body.side-fold .sn-item{ justify-content:center; padding:6px 0; gap:0; } body.side-fold .sn-item:hover{ transform:none; } body.side-fold .sn-lb, body.side-fold .sn-who, body.side-fold .sn-signup, body.side-fold .sn-login span{ display:none; } body.side-fold .sn-sep{ margin:8px 12px 6px; } body.side-fold .sn-user{ flex-direction:column; gap:8px; padding:8px 6px; } body.side-fold .sn-login{ padding:0; min-height:44px; } } /* ── 모바일: 상단 슬림바 + 드로어 ─────────────────────── */ #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,255,255,.84); -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2); border-bottom:1px solid rgba(112,105,176,.14); box-shadow:0 10px 30px rgba(74,68,124,.08); 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(112,105,176,.14) !important; background:rgba(255,255,255,.84) !important; box-shadow:0 10px 30px rgba(74,68,124,.08) !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; } } /* 👦 아이 기기: 모든 폭에서 로고 상단바만(메뉴 없음) — 단 별이음판(sb-open=자체 GNB)·회기 무대(play-mode)에선 절대 안 뜸(:not 으로 특이도 역전 차단) */ 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:40px; height:40px; border-radius:12px; padding:0; border:1px solid rgba(116,104,177,.16); background:rgba(255,255,255,.86); color:#6d60bc; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 16px rgba(83,71,148,.08); font-size:17px; line-height:1; } .mb-burger svg{ width:20px; height:20px; } .mb-logo{ display:flex; align-items:center; justify-content:center; min-width:0; flex:1 1 auto; cursor:pointer; } .mb-logo img{ height:28px; width:auto; display:block; filter:drop-shadow(0 4px 8px rgba(97,83,159,.14)); } .mb-right{ display:flex; align-items:center; gap:6px; flex:none; width:40px; 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(24,16,48,.42); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s ease, visibility 0s linear .26s; } @media(max-width:900px){ /* 드로어 닫힘 = 화면 밖 + visibility:hidden(탭 순서·스크린리더에서 제외) · 열림 = 슬라이드 인 */ #site-side{ width:min(304px,86vw); transform:translateX(-106%); visibility:hidden; box-shadow:none; padding-top:10px; transition:transform .32s var(--side-ease), visibility 0s linear .32s, box-shadow .3s ease; } body.side-open #site-side{ transform:none; visibility:visible; transition-delay:0s; box-shadow:18px 0 60px rgba(30,20,60,.26); } 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:40px; height:40px; } .sn-out{ width:38px; height:38px; } .sn-top{ min-height:48px; } .sn-item{ min-height:56px; } .sn-signup{ font-size:13px; padding:6px 0; } } /* 데스크톱에선 상단바 없음 */ @media(min-width:901px){ body.home-mode:not(.kid-session) #site-header{ display:none !important; } } /* 세로 폰: 사이드바 항목 밀도 */ @media(max-height:640px) and (min-width:901px){ .sn-item{ min-height:48px; } .sn-item.sn-mini{ min-height:42px; } }