/* ========================================================= HIGENG(매도의신) 앱 셸 (App Shell) — 2SHIN 패턴 이식 Capacitor 하이브리드 앱(안드로이드/iOS)에서 "웹사이트를 웹뷰에 띄운 것"이 아니라 네이티브 앱처럼 보이고 만져지게 만드는 층. 왜 별도 파일인가: higeng.css는 사이트 공통 스타일이고, 이 파일은 앱 전용 규칙만 담아 higeng.css 다음에 로드된다. 통째로 빼면 원래 웹사이트로 돌아간다. 적용 범위 2단계: 1) 전역 — 브라우저·앱 공통(터치 하이라이트, iOS 입력 확대 차단 등). 데스크톱에 무해한 것만. 2) .is-app — 웹뷰/홈화면 실행일 때만. higeng.js가 에 붙인다. ========================================================= */ :root { --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --tabbar-h: calc(60px + var(--sa-bottom)); } /* ========================================================= 1) 전역 — 브라우저에서도 켠다 (데스크톱에 부작용 없는 것만) ========================================================= */ * { -webkit-tap-highlight-color: transparent; } body { overscroll-behavior-y: contain; -webkit-touch-callout: none; } input, textarea, select, [contenteditable] { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* iOS는 16px 미만 입력에 포커스가 가면 화면을 강제로 확대한다 — 폰트를 키워서 막는다. */ @media (max-width: 1024px) { .form-control, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], textarea, select { font-size: 16px; } } .nav { padding-top: var(--sa-top); } @media (max-width: 1024px) { .btn { min-height: 44px; } .btn-sm { min-height: 38px; padding: 9px 14px; } .mobile-nav-group a, .nav-drop-panel a { min-height: 44px; display: flex; align-items: center; } } /* ========================================================= 2) .is-app — 웹뷰/홈화면 실행 전용 ========================================================= */ html.is-app .tabbar { display: flex; } html.is-app body { padding-bottom: var(--tabbar-h); } html.is-app .footer { display: none; } html.is-app .nav { display: none; } html.is-app .appbar { display: flex; } html.is-app body { -webkit-user-select: none; user-select: none; } html.is-app p, html.is-app td, html.is-app .selectable { -webkit-user-select: text; user-select: text; } html.is-app body { overflow-x: hidden; } /* ---------- 앱바 ---------- */ .appbar { display: none; position: sticky; top: 0; z-index: 50; align-items: center; gap: 8px; height: 52px; padding: var(--sa-top) 16px 0; box-sizing: content-box; background: var(--y-nav-bg-solid); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .18s ease, box-shadow .18s ease; } .appbar.is-scrolled { border-bottom-color: var(--y-line); box-shadow: 0 6px 18px rgba(11,14,20,.05); } .ab-title { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; } .ab-mark img { width: 100%; height: 100%; object-fit: contain; } .ab-back, .ab-act { flex: 0 0 auto; width: 38px; height: 38px; border: 0; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--y-ink); border-radius: 12px; cursor: pointer; position: relative; } .ab-back { margin-left: -9px; } .ab-act { margin-right: -9px; } .ab-back svg, .ab-act svg { width: 22px; height: 22px; } .ab-back:active, .ab-act:active { background: var(--y-brand-tint); } .ab-act .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 999px; background: var(--y-danger); box-shadow: 0 0 0 2px var(--y-nav-bg-solid); } .ab-greet { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; } .ab-greet .g { font-size: 16px; font-weight: 800; letter-spacing: -.03em; } .ab-greet .s { font-size: 12.5px; color: var(--y-muted); font-weight: 600; margin-top: 1px; } /* ---------- 인트로(스플래시) ---------- 앱을 켜면 서버 응답을 기다리는 동안 흰 화면이 잠깐 뜬다 — 그 구간을 브랜드 화면으로 덮는다. 세션당 한 번만 뜬다. */ .intro { display: none; } html.intro-pending .intro { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--y-brand); color: #fff; transition: opacity .38s ease, visibility .38s ease; } html.intro-pending .intro.done { opacity: 0; visibility: hidden; pointer-events: none; } .intro-mark { width: 76px; height: 76px; border-radius: 26px; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); display: grid; place-items: center; overflow: hidden; animation: intro-pop .5s cubic-bezier(.2,.9,.3,1.4) both; } .intro-mark img { width: 52px; height: 52px; object-fit: contain; } .intro-name { font-size: 18px; font-weight: 700; letter-spacing: -.03em; opacity: .92; animation: intro-fade .5s .12s ease both; } .intro-dots { display: flex; gap: 6px; margin-top: 8px; } .intro-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.55); animation: intro-blink 1s infinite ease-in-out; } .intro-dots i:nth-child(2) { animation-delay: .15s; } .intro-dots i:nth-child(3) { animation-delay: .3s; } @keyframes intro-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes intro-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: .92; transform: none; } } @keyframes intro-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .intro-mark, .intro-name, .intro-dots i { animation: none; } } /* ---------- 페이지 전환 진행바 ---------- 서버 렌더링이라 링크를 눌러도 다음 화면이 그려질 때까지 반응이 없다 — 앱에선 이게 "멈췄나?"로 읽히므로 상단에 진행바를 띄운다. */ .navprog { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; z-index: 300; background: var(--y-brand); opacity: 0; transition: width .2s ease, opacity .2s ease; } .navprog.on { opacity: 1; } /* Icons.cs가 찍어내는 SVG의 기본 크기. currentColor를 따르므로 다크모드·강조색이 자동으로 맞는다. */ .ico-svg { width: 22px; height: 22px; display: block; } .admin-nav a .ico-svg { width: 19px; height: 19px; flex-shrink: 0; } .qa-icon .ico-svg { width: 21px; height: 21px; } /* ========================================================= 앱 홈 대시보드 부품 (2SHIN 패턴 이식) ========================================================= */ /* ---------- 홈 큰 글씨(오늘의 신호) ---------- */ .today-line { color: var(--y-ink); } .tl-txt { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.3; word-break: keep-all; } .tl-num { color: var(--y-brand); text-decoration: none; border-bottom: 3px solid var(--y-brand-tint2); padding-bottom: 1px; } .tl-num:hover, .tl-num:active { text-decoration: none; border-bottom-color: var(--y-brand); } /* ---------- 소식 티커 ---------- */ .ticker { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; background: var(--y-card); border-radius: 16px; color: var(--y-ink); box-shadow: var(--y-shadow); } .ticker:hover, .ticker:active { text-decoration: none; } .tk-tag { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: -.02em; padding: 3px 9px; border-radius: 999px; background: var(--y-brand-tint); color: var(--y-brand); } .tk-view { position: relative; flex: 1 1 auto; min-width: 0; height: 20px; overflow: hidden; } .tk-item { position: absolute; inset: 0; display: flex; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--y-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(100%); opacity: 0; transition: transform .45s cubic-bezier(.32,.72,0,1), opacity .3s ease; } .tk-item.on { transform: translateY(0); opacity: 1; } .tk-item.out { transform: translateY(-100%); opacity: 0; } .tk-go { flex: 0 0 auto; color: var(--y-muted2); font-size: 18px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .tk-item { transition: none; } } /* ---------- 페이지 헤더(제목 + 우측 액션) ---------- */ .app-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 16px; } .app-head h1 { font-size: 22px; margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-head .act { flex: 0 0 auto; display: flex; gap: 8px; } .app-head .act a { font-size: 13.5px; font-weight: 700; color: var(--y-muted); } /* ---------- 빈 상태 ---------- */ .empty { text-align: center; padding: 40px 20px; color: var(--y-muted); } .empty .msg { font-size: 16px; font-weight: 700; color: var(--y-ink); margin-bottom: 8px; } /* ---------- 원형 진행링 카드 ---------- */ .ring-card { display: flex; align-items: center; gap: 16px; background: var(--y-card); border-radius: 24px; padding: 20px; color: var(--y-ink); box-shadow: var(--y-shadow); } .ring-card:hover, .ring-card:active { text-decoration: none; } .ring { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 999px; display: grid; place-items: center; } .ring > span { width: 62px; height: 62px; border-radius: 999px; background: var(--y-card); display: grid; place-items: center; font-size: 18px; font-weight: 800; letter-spacing: -.035em; color: var(--y-brand); font-variant-numeric: tabular-nums; } .ring-body { min-width: 0; } .ring-body .k { font-size: 13.5px; color: var(--y-muted); font-weight: 600; } .ring-body .v { font-size: 18px; font-weight: 800; letter-spacing: -.03em; margin-top: 1px; } .ring-body .go { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--y-brand); } /* ---------- 원형 바로가기 ---------- */ .circle-nav { display: flex; justify-content: space-between; gap: 8px; } .cnav { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--y-ink); letter-spacing: -.03em; word-break: keep-all; } .cnav:hover, .cnav:active { text-decoration: none; } .cnav .ico { width: 58px; height: 58px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--y-brand-tint); color: var(--y-brand); } .cnav:active .ico { background: var(--y-brand-tint2); } .cnav .ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 가로 카드 레일 ---------- */ .hrail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 8px; } .hrail::-webkit-scrollbar { display: none; } .hcard { flex: 0 0 auto; width: 216px; scroll-snap-align: start; background: var(--y-card); border-radius: 18px; padding: 16px; color: var(--y-ink); display: flex; flex-direction: column; box-shadow: var(--y-shadow); } .hcard:hover, .hcard:active { text-decoration: none; } .hcard.banded { width: 208px; padding: 0; overflow: hidden; } .hcard .band { padding: 12px 16px; background: var(--y-brand); color: #fff; } .hcard .band.calm { background: #0B1E4A; } .hcard .band .d { font-size: 22px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .hcard .band .o { font-size: 12px; opacity: .84; font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hcard .bd { padding: 12px 16px 16px; } .hcard .bd .ttl { font-size: 14.5px; font-weight: 700; line-height: 1.38; letter-spacing: -.02em; } .hcard .bd .amt { margin-top: 8px; font-size: 16px; font-weight: 800; letter-spacing: -.03em; color: var(--y-brand); font-variant-numeric: tabular-nums; } /* ========================================================= 앱형 컴포넌트 2차 이식 (2SHIN app.css 170~1352줄 대응) ========================================================= */ /* ---------- 리스트 행 — 모바일에서 표를 대체하는 기본 단위 ---------- */ .list { display: flex; flex-direction: column; } .list-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; min-height: 58px; border-bottom: 1px solid var(--y-line); color: var(--y-ink); } .list-row:last-child { border-bottom: none; } .list-row:active { background: var(--y-brand-tint); } .list-row:hover { text-decoration: none; } .list-row .body { flex: 1 1 auto; min-width: 0; } .list-row .ttl { font-weight: 700; font-size: 16px; line-height: 1.38; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; } .list-row .sub { margin-top: 4px; font-size: 13.5px; color: var(--y-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-row .chev { flex: 0 0 auto; color: var(--y-muted2); } .list-row .chev svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 빈 상태 아이콘 ---------- */ .empty .ico { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 999px; background: var(--y-bg); color: var(--y-muted2); display: flex; align-items: center; justify-content: center; } .empty .ico .ico-svg { width: 28px; height: 28px; } .empty .hint { font-size: 13.5px; } /* ---------- 알림함 읽음/안읽음 ---------- 안읽음은 진하게 + 왼쪽 강조 바, 읽은 것은 흐리게. 눌러야 읽음이 된다(지우지 않는다 — 사라지면 "방금 뭘 봤지?"가 된다). */ .alert-list { display: flex; flex-direction: column; } .alert-form { display: block; } .alert-row { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; color: var(--y-ink); display: flex; align-items: center; gap: 12px; padding: 12px 4px; min-height: 58px; border-bottom: 1px solid var(--y-line); } .alert-row:last-child { border-bottom: 0; } .alert-row:active { background: var(--y-brand-tint); } .alert-row .body { flex: 1 1 auto; min-width: 0; display: block; } .alert-row .ttl { display: block; font-size: 16px; line-height: 1.38; letter-spacing: -.02em; word-break: keep-all; } .alert-row .sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: var(--y-muted); white-space: nowrap; overflow: hidden; } .alert-row .sub .org { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; } .alert-row .sub .tag { flex: 0 0 auto; background: var(--y-bg); padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; } .al-ico { flex: 0 0 auto; position: relative; width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .al-ico .ico-svg { width: 19px; height: 19px; } .alert-row .chev { flex: 0 0 auto; color: var(--y-muted2); } .alert-row .chev svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .alert-row.unread { position: relative; padding-left: calc(4px + 10px); } .alert-row.unread::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: var(--y-brand); } .alert-row.unread .ttl { font-weight: 800; } .alert-row.unread .al-ico { background: var(--y-brand-tint); color: var(--y-brand); } .alert-row.unread .al-ico::after { content: ""; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 999px; background: var(--y-danger); box-shadow: 0 0 0 2px var(--y-bg); } .alert-row.read .ttl { font-weight: 500; color: var(--y-ink); } .alert-row.read .al-ico { background: var(--y-bg); color: var(--y-muted2); } .alert-row.read .sub { color: var(--y-muted2); } /* ---------- 예측 결과 카드 ---------- 테두리 대신 강조색 틴트로 채운다. 앱에서 "중요한 것"은 선이 아니라 면으로 말한다. */ .result-card { background: var(--y-brand-tint); border-radius: 20px; padding: 20px; } .rc-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--y-muted); } .rc-top .badge { margin-left: auto; } .rc-figure { margin-top: 4px; font-size: 34px; font-weight: 900; color: var(--y-brand); letter-spacing: -.045em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .rc-rate { color: var(--y-muted); font-size: 13.5px; } .rc-rate strong { color: var(--y-ink); } .result-card .disclaimer { margin-top: 12px; } .result-card.empty-state { background: var(--y-bg); } .result-card.empty-state .rc-figure { color: var(--y-muted2); } .quota-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; padding-left: 4px; font-size: 13.5px; color: var(--y-muted); font-weight: 600; } .quota-line strong { color: var(--y-ink); } .quota-line .sep { width: 3px; height: 3px; border-radius: 999px; background: var(--y-line-strong); } /* ---------- 지표 3칸 ---------- */ .metric-strip { display: flex; padding: 16px 8px; } .metric-strip > div { flex: 1 1 0; text-align: center; min-width: 0; } .metric-strip > div + div { border-left: 1px solid var(--y-line); } .metric-strip .v { font-size: 22px; font-weight: 800; letter-spacing: -.035em; color: var(--y-brand); font-variant-numeric: tabular-nums; line-height: 1.2; } .metric-strip .k { margin-top: 2px; font-size: 12px; color: var(--y-muted); font-weight: 600; } /* ---------- 예측 이력 결과 카드 ---------- */ .res-list { display: flex; flex-direction: column; gap: 12px; } .res-card { background: var(--y-card); border-radius: 18px; padding: 16px 20px; box-shadow: var(--y-shadow); } .rr-top { display: flex; align-items: flex-start; gap: 8px; } .rr-top .ttl { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.38; letter-spacing: -.02em; word-break: keep-all; } .rr-top .badge { flex: 0 0 auto; } .rr-sub { margin-top: 8px; font-size: 13.5px; color: var(--y-muted); display: flex; align-items: center; gap: 8px; } .rr-nums { display: flex; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--y-line); } .rr-nums > div { flex: 1 1 0; text-align: center; min-width: 0; } .rr-nums .k { font-size: 12px; color: var(--y-muted); font-weight: 600; } .rr-nums .v { margin-top: 1px; font-size: 16px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .rr-nums .v.ok { color: var(--y-on-ok); } .rr-nums .v.bad { color: var(--y-on-danger); } .fineprint { margin: 20px 0 24px; font-size: 12px; color: var(--y-muted2); line-height: 1.6; text-align: center; } /* ---------- 하단 고정 액션바 — 상세화면의 주행동을 엄지 근처에. 탭바를 감추지 않고 그 위에 얹는다(감추면 다른 화면으로 갈 방법이 사라진다). ---------- */ .actionbar { position: fixed; left: 0; right: 0; z-index: 85; bottom: 0; padding: 12px 16px calc(12px + var(--sa-bottom)); background: var(--y-nav-bg-solid); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--y-line); display: flex; gap: 8px; } .actionbar .btn { flex: 1 1 0; } body.has-actionbar { padding-bottom: 84px; } @media (max-width: 1024px) { .actionbar { bottom: var(--tabbar-h); padding-bottom: 12px; } body.has-actionbar { padding-bottom: calc(var(--tabbar-h) + 76px); } } html.is-app .actionbar { bottom: var(--tabbar-h); padding-bottom: 12px; } /* ========================================================= 관리자 화면 보정 — .admin-side가 하드코딩 보라색(#201A45)이라 다크모드에서 홀로 떠 있었고, 활성 항목이 카카오 전용색(--y-yellow)이라 "단일 강조색" 원칙에서도 벗어나 있었다. ========================================================= */ :root { --admin-side-bg: #14171F; --admin-side-fg: #B9C1CE; --admin-side-grp: #6E7986; } :root[data-theme="dark"] { --admin-side-bg: #10141A; --admin-side-fg: #A8B2C0; } .admin-side { background: var(--admin-side-bg); color: var(--admin-side-fg); } .admin-nav a { color: var(--admin-side-fg); } .admin-nav a.active { background: var(--y-brand); color: #fff; } .admin-nav .grp { color: var(--admin-side-grp); } .admin-side .brand small { color: var(--admin-side-grp); } /* 관리자도 앱에서 쓴다 — 공개 화면과 같은 문법(위 앱바, 아래 탭바, 사이드바는 오버레이). */ html.is-app .admin-topbar { display: none; } html.is-app .admin-shell { grid-template-columns: 1fr; } html.is-app .admin-side { display: none; } html.is-app .admin-side.mobile-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; overflow-y: auto; padding: calc(22px + var(--sa-top)) 16px calc(34px + var(--sa-bottom)); } html.is-app .admin-main { padding: 16px 16px 0; background: var(--y-bg); } html.is-app .tabbar { display: flex; } html.is-app body { padding-bottom: calc(var(--tabbar-h) + 20px); }