/* ===== ai.helpstore.shop 셸 (디자인 A: 클린 워크스페이스) ===== 격리 규칙 - style.css 는 body{display:flex} 와 #container/#header/#menu/#contents/#footer 로 셸을 배치한다. 이 셸은 그 id·클래스를 쓰지 않고 body.aiSite 의 display 하나만 되돌린다. - 모든 셸 클래스는 ais-* / aih-*, id 는 #aiShell* 만 사용(전역 제네릭 클래스 충돌 방지). - 기능 페이지 CSS 는 건드리지 않는다. 유일한 예외: #nicheKeyword 의 헤더 높이 변수(맨 아래). */ :root { --ais-canvas: #F6F7F9; --ais-ink: #111827; --ais-muted: #6B7280; --ais-accent: #2563EB; --ais-accent-hover: #1D4ED8; --ais-side-bg: #FFFFFF; --ais-line: #E5E7EB; --ais-side-ink: #1F2937; --ais-side-muted: #9CA3AF; --ais-side-icon: #6B7280; --ais-cur-bg: #EEF2FF; --ais-cur-ink: #1E40AF; --ais-lock-bg: #FEF3C7; --ais-lock-ink: #92400E; --ais-ok-bg: #DCFCE7; --ais-ok-ink: #166534; --ais-admin-bg: #F3F4F6; --ais-admin-ink: #4B5563; --ais-side-w: 240px; --ais-side-w-min: 64px; --ais-top-h: 60px; --ais-surface: #FFFFFF; --ais-icon-bg: #EFF6FF; --ais-card-hover-line: #C7D2FE; --ais-card-hover-shadow: rgba(37, 99, 235, .08); --ais-purple-bg: #F3E8FF; --ais-purple-ink: #6B21A8; --ais-font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, sans-serif; } /* style.css 의 body{display:flex; flex-direction:row} 되돌림 */ body.aiSite, body.aiSite.mobileResponsive { display: block; width: auto; background: var(--ais-canvas); } /* 탭 홈마다 본문 높이가 달라 스크롤바가 생겼다 사라지면 폭이 바뀌어 상단바가 흔들리므로 스크롤바 자리를 항상 비워 둔다 */ html:has(body.aiSite) { scrollbar-gutter: stable; } #aiShell { display: flex; flex-direction: row; align-items: stretch; min-height: 100vh; font-family: var(--ais-font); } /* ----- 사이드바 ----- */ .ais-side { width: var(--ais-side-w); flex: 0 0 var(--ais-side-w); position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--ais-side-bg); border-right: 1px solid var(--ais-line); display: flex; flex-direction: column; z-index: 120; transition: width .18s ease, flex-basis .18s ease; } .ais-brand { height: var(--ais-top-h); flex: 0 0 var(--ais-top-h); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; border-bottom: 1px solid var(--ais-line); } .ais-logo { display: flex; align-items: center; gap: 10px; color: var(--ais-side-ink); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .ais-logo em, .ais-top-logo em { font-style: normal; color: var(--ais-accent); } .ais-mark { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: var(--ais-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .ais-collapse { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ais-side-muted); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .ais-collapse:hover { background: var(--ais-canvas); color: var(--ais-side-ink); } /* 메뉴 밀도(2026-11-06): 로그인 상태(상단 '새 대화' 포함)에서도 사이드바 전체가 높이 800px 안에 스크롤 없이 들어가도록 항목 44→36px, 그룹 제목 40→27px(패딩 18/6→8/3), nav 패딩 10/8→6/6 으로 줄였다. 항목 36px 은 클릭 영역 최소 34px 를 지키는 값 */ .ais-nav { display: flex; flex-direction: column; padding: 6px 0 6px; } .ais-gtitle { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ais-side-muted); padding: 8px 20px 3px; white-space: nowrap; } .ais-item { display: flex; align-items: center; gap: 12px; height: 36px; margin: 0 10px; padding: 0 12px; border-radius: 8px; color: var(--ais-side-ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } .ais-item:hover { background: var(--ais-canvas); color: var(--ais-side-ink); } .ais-ic { color: var(--ais-side-icon); display: inline-flex; flex: 0 0 20px; } .ais-item.ais-current { background: var(--ais-cur-bg); color: var(--ais-cur-ink); font-weight: 600; } .ais-item.ais-current .ais-ic { color: var(--ais-cur-ink); } .ais-item.ais-locked { color: var(--ais-side-muted); } .ais-item.ais-locked .ais-ic { color: var(--ais-side-muted); } .ais-lockb { margin-left: auto; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--ais-lock-ink); background: var(--ais-lock-bg); border-radius: 999px; padding: 3px 8px; } .ais-label { overflow: hidden; text-overflow: ellipsis; } .ais-ucard { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--ais-line); display: flex; align-items: center; gap: 12px; color: var(--ais-side-ink); } .ais-ucard-link { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; color: var(--ais-side-ink); text-decoration: none; border-radius: 8px; margin: -6px -8px; padding: 6px 8px; } .ais-ucard-link:hover { background: var(--ais-canvas); color: var(--ais-side-ink); } /* 탭 공통 하단 영역(강의실·추천 영상)을 사이드바 맨 아래, 사용자 카드 바로 위로 붙인다. .ais-ucard 의 margin-top:auto 가 남으면 빈 공간이 두 auto 마진에 반씩 나뉘므로 카드 쪽은 0 으로 되돌린다 */ .ais-common-bottom { margin-top: auto; } .ais-common-bottom + .ais-ucard { margin-top: 0; } /* 메뉴가 길어 사이드바가 스크롤돼도 사용자 카드는 사이드바 맨 아래에 붙어 보이도록 sticky 로 고정하고, 뒤로 지나가는 메뉴가 비치지 않게 배경을 칠한다 */ .ais-ucard { position: sticky; bottom: 0; flex-shrink: 0; background: var(--ais-side-bg); z-index: 1; } .ais-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--ais-line); color: var(--ais-admin-ink); display: inline-flex; align-items: center; justify-content: center; } .ais-uinfo { min-width: 0; } .ais-uname { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ais-uplan { font-size: 12px; color: var(--ais-side-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ais-login { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: 8px; background: var(--ais-accent); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; } .ais-login:hover { background: var(--ais-accent-hover); color: #fff; } /* 접힘 상태 (데스크톱) */ body.aiSite.ais-collapsed .ais-side { width: var(--ais-side-w-min); flex-basis: var(--ais-side-w-min); } body.aiSite.ais-collapsed .ais-logo-text, body.aiSite.ais-collapsed .ais-label, body.aiSite.ais-collapsed .ais-lockb, body.aiSite.ais-collapsed .ais-gtitle, body.aiSite.ais-collapsed .ais-uinfo, body.aiSite.ais-collapsed .ais-login { display: none; } body.aiSite.ais-collapsed .ais-brand { padding: 0; justify-content: center; } body.aiSite.ais-collapsed .ais-logo { display: none; } body.aiSite.ais-collapsed .ais-collapse { transform: rotate(180deg); } body.aiSite.ais-collapsed .ais-item { justify-content: center; padding: 0; margin: 0 12px; } body.aiSite.ais-collapsed .ais-nav { padding-top: 14px; } body.aiSite.ais-collapsed .ais-ucard { justify-content: center; padding: 14px 0 16px; } /* ----- 메인 컬럼 ----- */ #aiShellMain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .ais-top { position: sticky; top: 0; z-index: 110; height: var(--ais-top-h); flex: 0 0 var(--ais-top-h); background: var(--ais-surface); border-bottom: 1px solid var(--ais-line); display: flex; align-items: center; gap: 12px; padding: 0 24px; } .ais-hamburger { display: none; width: 44px; height: 44px; margin-left: -12px; border: 0; background: transparent; color: var(--ais-ink); border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; padding: 0; } .ais-top-logo { display: none; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--ais-ink); text-decoration: none; white-space: nowrap; } .ais-top-logo .ais-mark { width: 22px; height: 22px; flex-basis: 22px; border-radius: 6px; } .ais-crumb { font-size: 14px; font-weight: 600; color: var(--ais-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ais-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .ais-tok { display: inline-flex; text-decoration: none; cursor: pointer; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--ais-admin-bg); border: 1px solid var(--ais-line); color: var(--ais-ink); font-size: 13px; font-weight: 600; white-space: nowrap; } .ais-tok small { font-weight: 500; color: var(--ais-muted); font-size: 12px; } .ais-tok:hover { background: var(--ais-line); color: var(--ais-ink); } .ais-tlink { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ais-line); background: var(--ais-surface); color: var(--ais-ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; } .ais-tlink:hover { background: var(--ais-canvas); color: var(--ais-ink); } .ais-tlink-quiet { border-color: transparent; color: var(--ais-muted); } .ais-tlink-primary { background: var(--ais-accent); border-color: var(--ais-accent); color: #fff; font-weight: 600; } .ais-tlink-primary:hover { background: var(--ais-accent-hover); color: #fff; } #aiShellBody { flex: 1 1 auto; min-width: 0; } .ais-foot { padding: 18px 24px; font-size: 12px; color: var(--ais-muted); display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--ais-line); } .ais-foot a { color: var(--ais-muted); text-decoration: none; } .ais-foot a:hover { color: var(--ais-ink); } .ais-backdrop { display: none; position: fixed; inset: 0; background: rgba(17, 24, 39, .45); z-index: 115; } /* ----- AI 홈 (aiHome.jsp) ----- */ #aiHome { padding: 36px 40px 48px; max-width: 1100px; font-family: var(--ais-font); } .aih-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .aih-h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ais-ink); } .aih-sub { margin: 10px 0 0; font-size: 15px; color: var(--ais-muted); } .aih-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; background: var(--ais-accent); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .aih-cta:hover { background: var(--ais-accent-hover); color: #fff; } .aih-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .aih-card { background: var(--ais-surface); border: 1px solid var(--ais-line); border-radius: 12px; padding: 20px; min-height: 172px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ais-ink); transition: box-shadow .15s ease, border-color .15s ease; } .aih-card:hover { border-color: var(--ais-card-hover-line); box-shadow: 0 4px 16px var(--ais-card-hover-shadow); color: var(--ais-ink); } .aih-card.ais-locked { opacity: .72; } .aih-card-top { display: flex; align-items: center; justify-content: space-between; } .aih-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ais-icon-bg); color: var(--ais-accent); display: inline-flex; align-items: center; justify-content: center; } .aih-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ais-muted); } .aih-card h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ais-ink); } .aih-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ais-muted); flex: 1; } .aih-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 9px; } .aih-chip-open { background: var(--ais-ok-bg); color: var(--ais-ok-ink); } .aih-chip-ai { background: var(--ais-lock-bg); color: var(--ais-lock-ink); } .aih-chip-admin { background: var(--ais-admin-bg); color: var(--ais-admin-ink); } @media (max-width: 1100px) { .aih-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ----- 모바일: 사이드바를 드로어로 ----- */ @media (max-width: 768px) { .ais-side { position: fixed; top: 0; left: 0; height: 100vh; width: 300px; flex-basis: 300px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; z-index: 130; } body.aiSite.ais-drawer-open .ais-side { transform: translateX(0); box-shadow: 8px 0 32px rgba(0, 0, 0, .18); } body.aiSite.ais-drawer-open .ais-backdrop { display: block; } body.aiSite.ais-collapsed .ais-side { width: 300px; flex-basis: 300px; } body.aiSite.ais-collapsed .ais-logo-text, body.aiSite.ais-collapsed .ais-label, body.aiSite.ais-collapsed .ais-lockb, body.aiSite.ais-collapsed .ais-gtitle, body.aiSite.ais-collapsed .ais-uinfo, body.aiSite.ais-collapsed .ais-login, body.aiSite.ais-collapsed .ais-logo { display: flex; } body.aiSite.ais-collapsed .ais-gtitle { display: block; } body.aiSite.ais-collapsed .ais-item { justify-content: flex-start; padding: 0 12px; margin: 0 10px; } .ais-collapse { display: none; } .ais-hamburger { display: inline-flex; } .ais-top-logo { display: inline-flex; } .ais-crumb { display: none; } .ais-top { height: 56px; flex-basis: 56px; padding: 0 12px; } .ais-tlink:not(.ais-tlink-primary) span, .ais-tok small { display: none; } .ais-tlink { padding: 0 10px; } .ais-tlink-main, .ais-tlink-quiet { display: none; } #aiHome { padding: 20px 16px 32px; } .aih-hero { flex-direction: column; align-items: flex-start; gap: 16px; } .aih-h1 { font-size: 22px; } .aih-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .aih-card { padding: 16px; min-height: 0; } .aih-card p { display: none; } .ais-foot { padding: 16px; gap: 12px; } } /* ----- 기능 페이지와의 결합 1건: NICHE 가 상단 헤더 높이를 변수로 참조 ----- */ /* 배너가 있으면 상단바 아래로 높이가 더해진다. aiShell.js 가 상단바+배너 실제 높이를 --ais-head-h 로 넣는다 */ body.aiSite #nicheKeyword { --nk-header: var(--ais-head-h, var(--ais-top-h)); } /* ===================================================================== 도구 화면 레이아웃 통일 (2026-09-15) — 데스크톱 전용, body.aiSite 한정 기능 JSP 는 건드리지 않고 여기서만 덮어쓴다(helpstore.shop 무영향). 규격: 콘텐츠 영역 흰색 + padding 28px 30px 48px / 래퍼 max-width 1100px 가운데 배치(정렬은 각 페이지 원본) / 제목 22px·700 / 부제 13px 회색 / 페이지 안 sticky 패널은 상단바(60px) 아래에 걸림. ===================================================================== */ @media (min-width: 769px) { /* 데이터 탭 화면(기존 helpstore.shop 페이지)은 원래 여백·폭을 유지하려고 이 통일 규격에서 뺀다(2026-11-06) */ /* 좌우 30px 는 데이터 탭 #contents(style.css padding 0 30px)와 같게 맞춘 값: 탭을 바꿔도 본문 좌우 시작 위치가 같다 */ body.aiSite:not([data-shell-tab="data"]) #aiShellBody { background: #fff; padding: 28px 30px 48px; } body.aiSite.ais-home #aiShellBody { background: var(--ais-canvas); } body.aiSite #aiHome { padding: 0; max-width: 1100px; margin: 0 auto; } /* --- 제목·부제 공통 규격 --- */ body.aiSite #geoPage h1, body.aiSite #adaPage h1, body.aiSite #nicheKeyword .nk-hero h1, body.aiSite #nicheKeyword .nk-result-title, body.aiSite .calc-app-wrapper .hero h1, body.aiSite .adv-header h1, body.aiSite #contents .sthTitle, body.aiSite #contents .stpTitle, body.aiSite #contents .stmTitle, body.aiSite #contents .sttTitle, body.aiSite #contents .dtpTitle, body.aiSite .cpg-page .cpg-title, body.aiSite #ckaPage .cka-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--ais-ink); margin: 0 0 6px; } body.aiSite #nicheKeyword .nk-result-title { margin: 0; } body.aiSite #geoPage .geo-desc, body.aiSite #adaPage .ada-desc, body.aiSite #nicheKeyword .nk-hero p, body.aiSite .calc-app-wrapper .hero p, body.aiSite #contents .sthSub, body.aiSite #contents .stpSub, body.aiSite #contents .stmSub, body.aiSite #contents .sttSub, body.aiSite #contents .dtpSub, body.aiSite .cpg-page .cpg-title-sub, body.aiSite #ckaPage .cka-desc { font-size: 13px; color: var(--ais-muted); line-height: 1.6; margin: 0 0 20px; padding: 0; } /* --- AEO/GEO, AI 광고분석 --- */ body.aiSite #geoPage, body.aiSite #adaPage { max-width: 1100px; margin: 0 auto; padding: 0; } body.aiSite #adaPage .ada-head { margin-bottom: 0; } /* --- NICHE: 회색 바탕 → 흰색, 히어로 왼쪽 정렬 (폭 920/1080 은 유지) --- */ body.aiSite #nicheKeyword { background: transparent; min-height: auto; } /* 28px·48px 는 위 #aiShellBody 의 위·아래 padding(28px 30px 48px)과 같은 값: 이를 빼야 첫 화면이 뷰포트에 딱 맞아 세로 스크롤이 안 생긴다 */ body.aiSite #nicheKeyword .nk-pick-screen { min-height: calc(100vh - var(--nk-header) - 28px - 48px); } body.aiSite #nicheKeyword .nk-inner, body.aiSite #nicheKeyword .nk-inner-wide { margin: 0 auto; } body.aiSite #nicheKeyword .nk-hero { padding: 0 0 8px; } body.aiSite #nicheKeyword .nk-result-bar { padding-top: 0; } /* --- 소싱 마진계산기 --- */ body.aiSite .calc-app-wrapper { min-height: auto; background: transparent; } body.aiSite .calc-app-wrapper .hero { max-width: 1100px; margin: 0 auto; padding: 0 0 12px; } body.aiSite .calc-app-wrapper .layout-row { max-width: 1100px; margin: 0 auto; padding: 0 0 40px; } body.aiSite .calc-app-wrapper .side-panel { top: calc(var(--ais-top-h) + 16px); } body.aiSite .calc-app-wrapper .batch-bar { top: var(--ais-top-h); } body.aiSite .calc-app-wrapper .hero-add-btn { top: 0; right: 0; } /* --- 소싱 어드바이저: 폭(1380)·좌우 여백은 원본 그대로, 상단 여백만 셸 규격으로 --- */ body.aiSite .adv-header { padding-top: 0; } body.aiSite .adv-side-panel { top: calc(var(--ais-top-h) + 16px); } /* --- 스튜디오 5종 (허브/제품사진/모델/썸네일/상품기획·상세페이지=detailPage) --- */ body.aiSite:not([data-shell-tab="data"]) #contents { min-width: 0; min-height: auto; padding: 0; } body.aiSite #contents .sthLayout, body.aiSite #contents .stpLayout, body.aiSite #contents .stmLayout, body.aiSite #contents .sttLayout, body.aiSite #contents .dtpLayout { max-width: 1100px; margin: 0 auto; } body.aiSite #contents .sthSide, body.aiSite #contents .stpSide, body.aiSite #contents .stmSide, body.aiSite #contents .sttSide, body.aiSite #contents .dtpSide { top: calc(var(--ais-top-h) + 16px); } /* 그리드 위로 올린 제목 블록(허브/어드바이저 돌아가기 링크·제목·부제)은 본문 그리드와 같은 폭(1100)으로 맞춰 왼쪽 끝이 본문과 일치하게 */ body.aiSite #contents .stpHubLink, body.aiSite #contents .stmHubLink, body.aiSite #contents .sttHubLink, body.aiSite #contents .dtpHubLink, body.aiSite #contents .sthTitle, body.aiSite #contents .stpTitle, body.aiSite #contents .stmTitle, body.aiSite #contents .sttTitle, body.aiSite #contents .dtpTitle, body.aiSite #contents .sthSub, body.aiSite #contents .stpSub, body.aiSite #contents .stmSub, body.aiSite #contents .sttSub, body.aiSite #contents .dtpSub { max-width: 1100px; margin-left: auto; margin-right: auto; } /* --- 매출 마진계산기 --- */ body.aiSite .cpg-page { padding: 0; min-height: auto; background: transparent; } body.aiSite .cpg-page .cpg-container { max-width: 1100px; margin: 0 auto; } body.aiSite .cpg-page .cpg-header { margin-bottom: 0; } body.aiSite .cpg-page .cpg-title-sub { margin-top: 0; } /* --- 키워드 인사이트 --- */ body.aiSite #ckaPage .cka-header, body.aiSite #ckaPage .cka-desc { max-width: 1100px; margin: 0 auto; padding: 0; } body.aiSite #ckaPage .cka-header { padding-bottom: 6px; } body.aiSite #ckaPage .cka-layout-row { max-width: 1100px; margin: 0 auto; padding: 0 0 60px; } body.aiSite #ckaPage .cka-side-panel { top: calc(var(--ais-top-h) + 16px); } } /* ----- AI 홈 대시보드 (2026-09-16) ----- */ .aih-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; } .aih-tile { background: var(--ais-surface); border: 1px solid var(--ais-line); border-radius: 12px; padding: 18px 20px; min-width: 0; } .aih-tile-token { grid-column: span 3; } .aih-tile-pipe { grid-column: span 4; } .aih-tile-recent { grid-column: span 5; } .aih-tile-sales { grid-column: span 6; } .aih-tile-ad { grid-column: span 6; } .aih-tile-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ais-muted); margin-bottom: 12px; } .aih-tile-head a { font-size: 12px; font-weight: 500; color: var(--ais-accent); text-decoration: none; } .aih-tile-head a:hover { text-decoration: underline; } .aih-tile-big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ais-ink); line-height: 1.2; } .aih-gauge { height: 6px; border-radius: 999px; background: var(--ais-admin-bg); margin: 12px 0 8px; overflow: hidden; } .aih-gauge i { display: block; height: 100%; background: var(--ais-accent); border-radius: 999px; transition: width .3s ease; } .aih-tile-sub { font-size: 12px; color: var(--ais-muted); line-height: 1.5; } .aih-pipe { display: flex; align-items: center; gap: 6px; } .aih-pipe-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: var(--ais-canvas); text-decoration: none; color: var(--ais-ink); } .aih-pipe-step:hover { background: var(--ais-cur-bg); color: var(--ais-cur-ink); } .aih-pipe-step b { font-size: 22px; font-weight: 700; line-height: 1.1; } .aih-pipe-step span { font-size: 12px; color: var(--ais-muted); white-space: nowrap; } .aih-pipe-arrow { color: var(--ais-side-muted); font-size: 18px; } .aih-tile-pipe .aih-tile-sub { margin-top: 10px; } .aih-list { display: flex; flex-direction: column; } .aih-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ais-line); text-decoration: none; color: var(--ais-ink); font-size: 13px; } .aih-row:first-child { border-top: 0; } .aih-row:hover .aih-row-name { color: var(--ais-accent); } .aih-kind { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--ais-admin-bg); color: var(--ais-admin-ink); white-space: nowrap; } .aih-kind-어드바이저 { background: var(--ais-cur-bg); color: var(--ais-cur-ink); } .aih-kind-스튜디오 { background: var(--ais-purple-bg); color: var(--ais-purple-ink); } .aih-kind-마진 { background: var(--ais-ok-bg); color: var(--ais-ok-ink); } .aih-kind-광고 { background: var(--ais-lock-bg); color: var(--ais-lock-ink); } .aih-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aih-row-meta { font-size: 12px; color: var(--ais-muted); white-space: nowrap; } .aih-row-date { font-size: 12px; color: var(--ais-side-muted); white-space: nowrap; } .aih-empty { font-size: 13px; color: var(--ais-muted); padding: 6px 0; line-height: 1.5; } .aih-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .aih-stat { background: var(--ais-canvas); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .aih-stat-l { font-size: 12px; color: var(--ais-muted); } .aih-stat-v { font-size: 16px; font-weight: 700; color: var(--ais-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aih-stat-note { grid-column: 1 / -1; font-size: 12px; color: var(--ais-lock-ink); } .aih-section-title { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ais-muted); margin: 0 0 12px; } @media (max-width: 1100px) { .aih-tile-token, .aih-tile-pipe { grid-column: span 6; } .aih-tile-recent, .aih-tile-sales, .aih-tile-ad { grid-column: span 12; } } @media (max-width: 768px) { .aih-dash { gap: 12px; margin-bottom: 20px; } .aih-tile-token, .aih-tile-pipe, .aih-tile-recent, .aih-tile-sales, .aih-tile-ad { grid-column: span 12; } .aih-tile { padding: 14px 16px; } .aih-row { grid-template-columns: auto minmax(0, 1fr); } .aih-row-meta, .aih-row-date { display: none; } .aih-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* BETA 배지 (사이드바·홈 카드·대시보드 타일) */ .ais-beta { display: inline-block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--ais-purple-bg); color: var(--ais-purple-ink); vertical-align: middle; margin-left: 6px; } .ais-item .ais-beta { margin-left: 6px; } .aih-stat-note-muted { color: var(--ais-muted); } body.aiSite.ais-collapsed .ais-beta { display: none; } /* ===== 다크 테마 (셸 전용, 2026-09-16) ===== html.ais-dark 는 aiShell.js 가 에서 쿠키(aisTheme)로 즉시 붙인다(깜빡임 방지). 도구 화면 내부는 각 JSP 가 밝은 색을 직접 쓰므로 콘텐츠 영역(#aiShellBody)은 흰색 유지, AI 홈만 어둡게. */ html.ais-dark { /* D4 미드나잇 퍼플 (2026-09-16 선택) */ --ais-canvas: #110E1C; --ais-surface: #1A1530; --ais-ink: #EDE9FE; --ais-muted: #9D97B8; --ais-accent: #A78BFA; --ais-accent-hover: #8B5CF6; --ais-side-bg: #16122A; --ais-line: #26203F; --ais-side-ink: #DDD6FE; --ais-side-muted: #6B6488; --ais-side-icon: #9D97B8; --ais-cur-bg: #2E2657; --ais-cur-ink: #DDD6FE; --ais-lock-bg: #3A2D14; --ais-lock-ink: #FCD34D; --ais-ok-bg: #14352B; --ais-ok-ink: #A7F3D0; --ais-admin-bg: #221D3A; --ais-admin-ink: #C9C3E6; --ais-icon-bg: #2E2657; --ais-card-hover-line: #4C3F8A; --ais-card-hover-shadow: rgba(167, 139, 250, .18); --ais-purple-bg: #2E2657; --ais-purple-ink: #D8B4FE; } html.ais-dark body.aiSite { background: var(--ais-canvas); color: var(--ais-ink); } html.ais-dark .ais-hamburger, html.ais-dark .ais-top-logo { color: var(--ais-ink); } html.ais-dark .ais-mark { color: #fff; } @media (min-width: 769px) { /* 콘텐츠 영역도 테마를 따른다(도구 화면 내부 덮어쓰기는 아래 "도구 화면 다크" 절) */ html.ais-dark body.aiSite #aiShellBody { background: var(--ais-canvas); } } @media (max-width: 768px) { html.ais-dark body.aiSite.ais-home { background: var(--ais-canvas); } } /* ----- 다크 팔레트 토큰: 기본(html.ais-dark)은 D4 미드나잇 퍼플, 아래 클래스가 셸(--ais-*)·도구(--aid-*) 토큰을 함께 덮어쓴다 ----- */ html.ais-dark.ais-t-d1 { /* D1 그래파이트 + 앰버 */ --ais-canvas: #1B1916; --ais-surface: #24211D; --ais-ink: #F3EDE4; --ais-muted: #A39E96; --ais-accent: #F59E0B; --ais-accent-hover: #D97706; --ais-side-bg: #211E1A; --ais-line: #332E28; --ais-side-ink: #E7E0D5; --ais-side-muted: #7A736A; --ais-side-icon: #A39E96; --ais-cur-bg: #3A2D14; --ais-cur-ink: #FBBF24; --ais-lock-bg: #3A2D14; --ais-lock-ink: #FCD34D; --ais-ok-bg: #173B2A; --ais-ok-ink: #86EFAC; --ais-admin-bg: #2C2823; --ais-admin-ink: #CFC8BD; --ais-icon-bg: #3A2D14; --ais-card-hover-line: #5A4A1E; --ais-card-hover-shadow: rgba(245, 158, 11, .16); --ais-purple-bg: #2C2440; --ais-purple-ink: #C4B5FD; --aid-surface: #24211D; --aid-surface-2: #2C2823; --aid-canvas: #1B1916; --aid-line: #3A342D; --aid-line-light: #332E28; --aid-text: #F3EDE4; --aid-sub: #B3ADA3; --aid-mute: #7A736A; } html.ais-dark.ais-t-d2 { /* D2 딥 포레스트 + 민트 */ --ais-canvas: #0B1512; --ais-surface: #12201B; --ais-ink: #E6F4EE; --ais-muted: #8FA89E; --ais-accent: #34D399; --ais-accent-hover: #10B981; --ais-side-bg: #0F1B17; --ais-line: #1C2E28; --ais-side-ink: #D5E8DF; --ais-side-muted: #5F7A70; --ais-side-icon: #8FA89E; --ais-cur-bg: #123527; --ais-cur-ink: #A7F3D0; --ais-lock-bg: #3A2D14; --ais-lock-ink: #FCD34D; --ais-ok-bg: #123527; --ais-ok-ink: #A7F3D0; --ais-admin-bg: #1B2925; --ais-admin-ink: #C4D6CE; --ais-icon-bg: #123527; --ais-card-hover-line: #2A5A48; --ais-card-hover-shadow: rgba(52, 211, 153, .16); --ais-purple-bg: #1E2333; --ais-purple-ink: #C4B5FD; --aid-surface: #12201B; --aid-surface-2: #182A24; --aid-canvas: #0B1512; --aid-line: #22382F; --aid-line-light: #1C2E28; --aid-text: #E6F4EE; --aid-sub: #9DB5AA; --aid-mute: #5F7A70; } html.ais-dark.ais-t-d3 { /* D3 모노크롬 블랙 + 라임 */ --ais-canvas: #0A0A0A; --ais-surface: #141414; --ais-ink: #F5F5F5; --ais-muted: #8A8A8A; --ais-accent: #C6F135; --ais-accent-hover: #B5E02A; --ais-side-bg: #0A0A0A; --ais-line: #262626; --ais-side-ink: #E5E5E5; --ais-side-muted: #5C5C5C; --ais-side-icon: #8A8A8A; --ais-cur-bg: #1F1F1F; --ais-cur-ink: #C6F135; --ais-lock-bg: #262626; --ais-lock-ink: #D4D4D4; --ais-ok-bg: #1F2A0A; --ais-ok-ink: #C6F135; --ais-admin-bg: #1F1F1F; --ais-admin-ink: #BDBDBD; --ais-icon-bg: #1F1F1F; --ais-card-hover-line: #3A3A3A; --ais-card-hover-shadow: rgba(198, 241, 53, .12); --ais-purple-bg: #262626; --ais-purple-ink: #D4D4D4; --aid-surface: #141414; --aid-surface-2: #1F1F1F; --aid-canvas: #0A0A0A; --aid-line: #2E2E2E; --aid-line-light: #262626; --aid-text: #F5F5F5; --aid-sub: #A3A3A3; --aid-mute: #5C5C5C; } /* D3 는 시안대로 모서리를 각지게(셸 요소만) */ html.ais-t-d3 .ais-mark, html.ais-t-d3 .ais-collapse, html.ais-t-d3 .ais-item, html.ais-t-d3 .ais-ucard-link, html.ais-t-d3 .ais-login, html.ais-t-d3 .ais-hamburger, html.ais-t-d3 .ais-tok, html.ais-t-d3 .ais-tlink, html.ais-t-d3 .ais-theme-toggle, html.ais-t-d3 .ais-theme-opt, html.ais-t-d3 .aih-cta, html.ais-t-d3 .aih-ic, html.ais-t-d3 .aih-pipe-step, html.ais-t-d3 .aih-stat { border-radius: 4px; } html.ais-t-d3 .ais-top-logo .ais-mark { border-radius: 3px; } html.ais-t-d3 .aih-card, html.ais-t-d3 .aih-tile, html.ais-t-d3 .ais-theme-menu { border-radius: 6px; } /* ===================================================================== 도구 화면 다크 (2026-09-16, D4 미드나잇 퍼플) — html.ais-dark body.aiSite 한정 - 변수 기반 페이지(GEO·광고분석·NICHE·마진계산기·어드바이저·키워드 인사이트·쿠팡키워드뷰)는 변수만 덮어쓴다. - 하드코딩 페이지(매출 마진계산기·스튜디오 5화면·상품 추가 팝업)는 주요 표면 선택자를 열거한다. - detailPage.js / coupangKeywordAnswer.js 는 인라인 style 색이 많아 [style*=] 로 일부만 보정한다(완전하지 않음). ===================================================================== */ html.ais-dark { --aid-surface: #1A1530; /* 카드·패널 */ --aid-surface-2: #221C3C; /* 카드 안의 한 단계 밝은 면(표 머리·입력) */ --aid-canvas: #110E1C; --aid-line: #2E2750; --aid-line-light: #26203F; --aid-text: #EDE9FE; --aid-sub: #A9A3C4; --aid-mute: #7C7699; --aid-blue-soft: #1E2A4A; /* primary-light 대체(파란 배지·활성 탭 배경) */ --aid-blue-softer: #172038; /* primary-lighter 대체 */ --aid-blue-ink: #93C5FD; --aid-amber-soft: #3A2D14; --aid-amber-ink: #FCD34D; --aid-green-soft: #14352B; --aid-green-ink: #A7F3D0; --aid-red-soft: #3B1A1F; --aid-red-ink: #FCA5A5; --aid-teal-soft: #0F2E2B; } /* ----- 공용 변수(--hs-*) : 마진계산기·어드바이저(:root 선언) + 래퍼 선언 페이지(NICHE·.cpkw·#ckaPage) ----- */ html.ais-dark body.aiSite, html.ais-dark body.aiSite #nicheKeyword, html.ais-dark body.aiSite .cpkw, html.ais-dark body.aiSite #ckaPage { --hs-bg: var(--aid-canvas); --hs-card: var(--aid-surface); --hs-text: var(--aid-text); --hs-text-sub: var(--aid-sub); --hs-text-mute: var(--aid-mute); --hs-border: var(--aid-line); --hs-border-light: var(--aid-line-light); --hs-primary-light: var(--aid-blue-soft); --hs-primary-lighter: var(--aid-blue-softer); --hs-niche-light: var(--aid-amber-soft); --hs-teal-light: var(--aid-teal-soft); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 8px 24px rgba(0,0,0,.5); } html.ais-dark body.aiSite #geoPage { --geo-card: var(--aid-surface); --geo-fg: var(--aid-text); --geo-muted: var(--aid-sub); --geo-border: var(--aid-line); --geo-primary-surface: var(--aid-blue-softer); --geo-bg: var(--aid-surface-2); } html.ais-dark body.aiSite #adaPage { --ada-card: var(--aid-surface); --ada-fg: var(--aid-text); --ada-muted: var(--aid-sub); --ada-border: var(--aid-line); --ada-primary-surface: var(--aid-blue-softer); --ada-bg: var(--aid-surface-2); --ada-gray: var(--aid-sub); } /* ----- 변수 페이지에 남은 리터럴 흰색/연회색 표면 ----- */ html.ais-dark body.aiSite #geoPage .geo-field input, html.ais-dark body.aiSite #geoPage .geo-field textarea, html.ais-dark body.aiSite #geoPage .geo-cancel, html.ais-dark body.aiSite #geoPage .geo-pdf-btn, html.ais-dark body.aiSite #geoPage .geo-load-chip { background: var(--aid-surface-2); } html.ais-dark body.aiSite #geoPage .geo-loading, html.ais-dark body.aiSite #geoPage .geo-comment, html.ais-dark body.aiSite #geoPage .geo-cta { background: var(--aid-surface); border-color: var(--aid-line); } html.ais-dark body.aiSite #geoPage .geo-bar-track, html.ais-dark body.aiSite #geoPage .geo-mini-track, html.ais-dark body.aiSite #geoPage .geo-load-track { background: var(--aid-line-light); } html.ais-dark body.aiSite #geoPage .geo-card .badge.off { background: var(--aid-line-light); color: var(--aid-sub); } html.ais-dark body.aiSite #geoPage .geo-card .badge.on { background: var(--aid-green-soft); color: var(--aid-green-ink); } html.ais-dark body.aiSite #geoPage .geo-resp .body { color: var(--aid-sub); } html.ais-dark body.aiSite #adaPage .ada-tabs a, html.ais-dark body.aiSite #adaPage .ada-topbar select, html.ais-dark body.aiSite #adaPage .ada-field input, html.ais-dark body.aiSite #adaPage .ada-field select, html.ais-dark body.aiSite #adaPage .ada-back, html.ais-dark body.aiSite #adaPage .ada-filt, html.ais-dark body.aiSite #adaPage .ada-chip, html.ais-dark body.aiSite #adaPage .ada-dm, html.ais-dark body.aiSite #adaPage .ada-pager button, html.ais-dark body.aiSite #adaPage .ada-log-item, html.ais-dark body.aiSite #adaPage .ada-log-acts button, html.ais-dark body.aiSite #adaPage .ada-act, html.ais-dark body.aiSite #adaPage .ada-todo-item, html.ais-dark body.aiSite #adaPage .ada-camp, html.ais-dark body.aiSite #adaPage .ada-stop { background: var(--aid-surface-2); color: var(--aid-text); } html.ais-dark body.aiSite #adaPage .ada-log-new textarea, html.ais-dark body.aiSite #adaPage .ada-log-edit textarea { background: var(--aid-surface-2); color: var(--aid-text); } html.ais-dark body.aiSite #adaPage .ada-bar, html.ais-dark body.aiSite #adaPage .ada-stack, html.ais-dark body.aiSite #adaPage .ada-b { background: var(--aid-line-light); } html.ais-dark body.aiSite #adaPage .ada-note { background: var(--aid-amber-soft); color: var(--aid-amber-ink); border-color: #5A431A; } html.ais-dark body.aiSite #adaPage .ada-ai th, html.ais-dark body.aiSite #adaPage .ada-ai code { background: var(--aid-surface-2); } html.ais-dark body.aiSite #adaPage .ada-ai table, html.ais-dark body.aiSite #adaPage .ada-ai th, html.ais-dark body.aiSite #adaPage .ada-ai td { border-color: var(--aid-line); } html.ais-dark body.aiSite #adaPage .g-green, html.ais-dark body.aiSite #adaPage .badge.normal { background: var(--aid-green-soft); color: var(--aid-green-ink); } html.ais-dark body.aiSite #adaPage .g-blue, html.ais-dark body.aiSite #adaPage .badge.bidDown { background: var(--aid-blue-soft); color: var(--aid-blue-ink); } html.ais-dark body.aiSite #adaPage .g-orange, html.ais-dark body.aiSite #adaPage .badge.budgetUp, html.ais-dark body.aiSite #adaPage .badge.lowData { background: var(--aid-amber-soft); color: var(--aid-amber-ink); } html.ais-dark body.aiSite #adaPage .g-red, html.ais-dark body.aiSite #adaPage .badge.exclude { background: var(--aid-red-soft); color: var(--aid-red-ink); } html.ais-dark body.aiSite #adaPage .g-gray { background: var(--aid-line-light); color: var(--aid-sub); } html.ais-dark body.aiSite #nicheKeyword .nk-pick .nk-emoji { background: var(--aid-blue-softer); } html.ais-dark body.aiSite #nicheKeyword .nk-pick:hover .nk-emoji, html.ais-dark body.aiSite #nicheKeyword .nk-pick.active .nk-emoji { background: var(--aid-surface-2); } html.ais-dark body.aiSite #nicheKeyword .nk-badge { border-color: #5A431A; } html.ais-dark body.aiSite .cpkw .sortButtons a:hover { background: var(--aid-line); } html.ais-dark body.aiSite .cpkw .listProducts > li { border-color: var(--aid-line); background: transparent; } html.ais-dark body.aiSite .cpkw .listProducts > li > span { color: var(--aid-sub); } html.ais-dark body.aiSite #keywordListPopup .sortButtons a { background: var(--aid-line-light); color: var(--aid-sub); } html.ais-dark body.aiSite #nkOverlay { background: rgba(17, 14, 28, .88); } html.ais-dark body.aiSite #nkOverlay .nk-ov-title { color: var(--aid-text); } html.ais-dark body.aiSite #nkOverlay .nk-ov-sub { color: var(--aid-sub); } /* 마진계산기(.calc-app-wrapper 는 흰색 리터럴) */ html.ais-dark body.aiSite .calc-app-wrapper, html.ais-dark body.aiSite .calc-app-wrapper .hero { background: transparent; } html.ais-dark body.aiSite .calc-app-wrapper .platform-tabs { background: var(--aid-surface-2); } html.ais-dark body.aiSite .calc-app-wrapper .form-input { background: var(--aid-surface-2); color: var(--aid-text); } html.ais-dark body.aiSite .calc-app-wrapper .form-input:focus { background: var(--aid-surface-2); } html.ais-dark body.aiSite .calc-app-wrapper .form-input.locked-input { background: var(--aid-line-light); color: var(--aid-sub); } html.ais-dark body.aiSite .calc-app-wrapper .form-input.user-input-field { background: var(--aid-red-soft); } html.ais-dark body.aiSite .calc-app-wrapper .list-search, html.ais-dark body.aiSite .calc-app-wrapper .side-recent-row, html.ais-dark body.aiSite .calc-app-wrapper .compare-table th, html.ais-dark body.aiSite .calc-app-wrapper .compare-actions { background: var(--aid-surface-2); } html.ais-dark body.aiSite .calc-app-wrapper .compare-label { background: var(--aid-surface-2) !important; } html.ais-dark body.aiSite .calc-app-wrapper .view-tabs, html.ais-dark body.aiSite .calc-app-wrapper .sourcing-card, html.ais-dark body.aiSite .calc-app-wrapper .sm-diag-panel, html.ais-dark body.aiSite .calc-app-wrapper .import-modal, html.ais-dark body.aiSite .calc-app-wrapper .compare-modal, html.ais-dark body.aiSite .calc-app-wrapper .import-modal-cancel, html.ais-dark body.aiSite .calc-app-wrapper .status-dropdown, html.ais-dark body.aiSite .calc-app-wrapper .card-action-menu, html.ais-dark body.aiSite .calc-app-wrapper .export-menu { background: var(--aid-surface); } html.ais-dark body.aiSite .calc-app-wrapper .result-section, html.ais-dark body.aiSite .calc-app-wrapper .qty-section, html.ais-dark body.aiSite .calc-app-wrapper .product-info-section, html.ais-dark body.aiSite .calc-app-wrapper .side-kpi-item, html.ais-dark body.aiSite .calc-app-wrapper .compare-header { background: var(--aid-surface-2); } html.ais-dark body.aiSite .calc-app-wrapper .sm-diag-panel th, html.ais-dark body.aiSite .calc-app-wrapper .sm-diag-panel code, html.ais-dark body.aiSite .calc-app-wrapper .sm-diag-panel blockquote { background: var(--aid-surface-2); } html.ais-dark body.aiSite .calc-app-wrapper .cost-krw-display, html.ais-dark body.aiSite .calc-app-wrapper .v5-customs-vat-row { background: var(--aid-amber-soft); border-color: #5A431A; color: var(--aid-amber-ink); } html.ais-dark body.aiSite .calc-app-wrapper .cfs-wing-connect, html.ais-dark body.aiSite .calc-app-wrapper .v5-income-info, html.ais-dark body.aiSite .calc-app-wrapper .v5-glossary-toggle { background: var(--aid-blue-softer); border-color: var(--aid-line); color: var(--aid-blue-ink); } html.ais-dark body.aiSite .calc-app-wrapper .cfs-cost-display, html.ais-dark body.aiSite .calc-app-wrapper .v5-glossary-panel, html.ais-dark body.aiSite .calc-app-wrapper .v5-vat-credit-panel { background: var(--aid-surface-2); } html.ais-dark body.aiSite .calc-app-wrapper .tip-trigger { background: var(--aid-line); color: var(--aid-sub); } html.ais-dark body.aiSite .calc-app-wrapper .calc-blocked-overlay { background: var(--aid-surface); } /* 어드바이저 */ html.ais-dark body.aiSite .adv-side-action-btn, html.ais-dark body.aiSite .adv-trend-kw-row input[type="text"], html.ais-dark body.aiSite .adv-qa-input, html.ais-dark body.aiSite .adv-nav .adv-prev, html.ais-dark body.aiSite .adv-score-opt, html.ais-dark body.aiSite .adv-modal-footer button, html.ais-dark body.aiSite .cy-node.wait { background: var(--aid-surface-2); color: var(--aid-text); } html.ais-dark body.aiSite .adv-modal-card { background: var(--aid-surface); } html.ais-dark body.aiSite .adv-app-wrapper select, html.ais-dark body.aiSite .adv-app-wrapper textarea, html.ais-dark body.aiSite .adv-app-wrapper input[type="number"] { background: var(--aid-surface-2); color: var(--aid-text); border-color: var(--aid-line); } /* 키워드 인사이트(#ckaPage 변수 + 리터럴 표면) */ html.ais-dark body.aiSite #ckaPage .TB, html.ais-dark body.aiSite #ckaPage .form-input, html.ais-dark body.aiSite #ckaPage .P, html.ais-dark body.aiSite #ckaPage .PB, html.ais-dark body.aiSite #ckaPage .TC, html.ais-dark body.aiSite #ckaPage .nb, html.ais-dark body.aiSite #ckaPage .tx, html.ais-dark body.aiSite #ckaPage .cka-side-action-btn { background: var(--aid-surface-2); color: var(--aid-text); } html.ais-dark body.aiSite .cka-header, html.ais-dark body.aiSite .cka-modal-card h2 { color: var(--aid-text); } html.ais-dark body.aiSite .cka-desc { color: var(--aid-sub); } html.ais-dark body.aiSite .cka-header .cka-badge { background: var(--aid-blue-softer); color: var(--aid-blue-ink); } html.ais-dark body.aiSite .cka-mobile-notice { background: var(--aid-surface-2); color: var(--aid-sub); } html.ais-dark body.aiSite .cka-upsell { background: var(--aid-surface); color: var(--aid-text); border-color: var(--aid-line); } html.ais-dark body.aiSite .cka-modal-card { background: var(--aid-surface); } html.ais-dark body.aiSite .cka-modal-header, html.ais-dark body.aiSite .cka-list-row { border-color: var(--aid-line-light); } html.ais-dark body.aiSite .cka-list-row:hover { background: var(--aid-surface-2); } html.ais-dark body.aiSite .cka-list-row .cka-recent-name { color: var(--aid-text); } html.ais-dark body.aiSite #ckaPage .Bg { background: var(--aid-green-soft); color: var(--aid-green-ink); } html.ais-dark body.aiSite #ckaPage .Ba { background: var(--aid-amber-soft); color: var(--aid-amber-ink); } html.ais-dark body.aiSite #ckaPage .Bp { background: var(--ais-purple-bg); color: var(--ais-purple-ink); } html.ais-dark body.aiSite #ckaPage .Bx { background: var(--aid-line-light); color: var(--aid-sub); } /* keywordAnswer.js 인라인 색 보정(부분) */ html.ais-dark body.aiSite #ckaPage [style*="background:#fff"], html.ais-dark body.aiSite #ckaPage [style*="background: #fff"], html.ais-dark body.aiSite #ckaPage [style*="background:#FFF"] { background: var(--aid-surface-2) !important; } html.ais-dark body.aiSite #ckaPage [style*="background:#F"], html.ais-dark body.aiSite #ckaPage [style*="background:#f"], html.ais-dark body.aiSite #ckaPage [style*="background:linear-gradient(135deg,#fff"] { background: var(--aid-surface-2) !important; color: var(--aid-text); } /* 매출 마진계산기(.cpg-*, 전부 리터럴) */ html.ais-dark body.aiSite .cpg-page { background: transparent; color: var(--aid-text); } html.ais-dark body.aiSite .cpg-page .cpg-title, html.ais-dark body.aiSite .cpg-page .cpg-empty .title, html.ais-dark body.aiSite .cpg-page .cost-card-title, html.ais-dark body.aiSite .cpg-page .sales-summary .value, html.ais-dark body.aiSite .cpg-page .cpg-diag-body, html.ais-dark body.aiSite .cpg-page .cpg-page-size { color: var(--aid-text); } html.ais-dark body.aiSite .cpg-page .cpg-title-sub, html.ais-dark body.aiSite .cpg-page .cpg-topbar label, html.ais-dark body.aiSite .cpg-page .cpg-tab, html.ais-dark body.aiSite .cpg-page .cpg-empty, html.ais-dark body.aiSite .cpg-page .sales-summary .label, html.ais-dark body.aiSite .cpg-page .sales-summary .sub, html.ais-dark body.aiSite .cpg-page .cpg-preset-btn, html.ais-dark body.aiSite .cpg-page .cpg-page-btn, html.ais-dark body.aiSite .cpg-page .cost-row-input.readonly { color: var(--aid-sub); } html.ais-dark body.aiSite .cpg-page .cpg-pc-only, html.ais-dark body.aiSite .cpg-page .cpg-topbar, html.ais-dark body.aiSite .cpg-page .cpg-card, html.ais-dark body.aiSite .cpg-page .cost-card, html.ais-dark body.aiSite .cpg-page .sales-summary, html.ais-dark body.aiSite .cpg-page .cpg-diag-panel, html.ais-dark body.aiSite .cpg-page .cpg-overlay .panel, html.ais-dark body.aiSite .cpg-page .cpg-tab.active { background: var(--aid-surface); border-color: var(--aid-line); } html.ais-dark body.aiSite .cpg-page .cpg-tabs, html.ais-dark body.aiSite .cpg-page .cpg-table th, html.ais-dark body.aiSite .cpg-page .cpg-diag-body th, html.ais-dark body.aiSite .cpg-page .cpg-diag-body code, html.ais-dark body.aiSite .cpg-page .cpg-diag-body blockquote, html.ais-dark body.aiSite .cpg-page .cost-row-input.readonly { background: var(--aid-surface-2); border-color: var(--aid-line); } html.ais-dark body.aiSite .cpg-page .cpg-acct-select, html.ais-dark body.aiSite .cpg-page .cpg-search-row input[type="date"], html.ais-dark body.aiSite .cpg-page .cost-row-input, html.ais-dark body.aiSite .cpg-page .cost-biz-type, html.ais-dark body.aiSite .cpg-page .cpg-prod-table input[type=number], html.ais-dark body.aiSite .cpg-page .ord-cost-cell, html.ais-dark body.aiSite .cpg-page .cpg-preset-btn, html.ais-dark body.aiSite .cpg-page .cpg-page-btn, html.ais-dark body.aiSite .cpg-page .cpg-page-size, html.ais-dark body.aiSite .cpg-page .cpg-tool-btn, html.ais-dark body.aiSite .cpg-page .cpg-diag-pdf, html.ais-dark body.aiSite .cpg-page .cpg-sync-btn-sub { background: var(--aid-surface-2); border-color: var(--aid-line); color: var(--aid-text); } html.ais-dark body.aiSite .cpg-page .cpg-acct-select:focus, html.ais-dark body.aiSite .cpg-page .cost-row-input:focus, html.ais-dark body.aiSite .cpg-page .cpg-search-row input[type="date"]:focus { background: var(--aid-surface-2); } html.ais-dark body.aiSite .cpg-page .cpg-table td, html.ais-dark body.aiSite .cpg-page .cpg-table th, html.ais-dark body.aiSite .cpg-page .cost-row, html.ais-dark body.aiSite .cpg-page .cpg-diag-body td { border-color: var(--aid-line-light); } html.ais-dark body.aiSite .cpg-page .cpg-table tr.cost-missing { background: var(--aid-red-soft); } html.ais-dark body.aiSite .cpg-page .cpg-progress { background: var(--aid-blue-softer); border-color: var(--aid-line); color: var(--aid-blue-ink); } html.ais-dark body.aiSite .cpg-page .cpg-progress.success { background: var(--aid-green-soft); color: var(--aid-green-ink); } html.ais-dark body.aiSite .cpg-page .cpg-progress.error, html.ais-dark body.aiSite .cpg-page .cpg-warn, html.ais-dark body.aiSite .cpg-page .cpg-diag-stop { background: var(--aid-red-soft); border-color: #5A2A30; color: var(--aid-red-ink); } html.ais-dark body.aiSite .cpg-page .cpg-progress-track { background: var(--aid-line); } html.ais-dark body.aiSite .cpg-page .delivered, html.ais-dark body.aiSite .cpg-page .badge.auto, html.ais-dark body.aiSite .cpg-page .badge-ok { background: var(--aid-green-soft); color: var(--aid-green-ink); } html.ais-dark body.aiSite .cpg-page .shipped { background: var(--aid-blue-soft); color: var(--aid-blue-ink); } html.ais-dark body.aiSite .cpg-page .processing, html.ais-dark body.aiSite .cpg-page .badge.manual { background: var(--aid-amber-soft); color: var(--aid-amber-ink); } html.ais-dark body.aiSite .cpg-page .cancel, html.ais-dark body.aiSite .cpg-page .badge-missing { background: var(--aid-red-soft); color: var(--aid-red-ink); } html.ais-dark body.aiSite .cpg-page .default, html.ais-dark body.aiSite .cpg-page .badge.skip { background: var(--aid-line-light); color: var(--aid-sub); } /* 스튜디오 5화면(#contents .sth/.stp/.stm/.stt/.dtp — 전부 리터럴, OS 다크 블록은 #252a33 계열이라 함께 덮어씀) */ html.ais-dark body.aiSite #contents .sthSide, html.ais-dark body.aiSite #contents .stpSide, html.ais-dark body.aiSite #contents .stmSide, html.ais-dark body.aiSite #contents .sttSide, html.ais-dark body.aiSite #contents .dtpSide, html.ais-dark body.aiSite #contents .sthCard, html.ais-dark body.aiSite #contents .stpCard, html.ais-dark body.aiSite #contents .stmCard, html.ais-dark body.aiSite #contents .sttCard, html.ais-dark body.aiSite #contents .dtpCard, html.ais-dark body.aiSite #contents .sthProject, html.ais-dark body.aiSite #contents .dtpModal { background: var(--aid-surface); border-color: var(--aid-line); } html.ais-dark body.aiSite #contents .sthSideRow, html.ais-dark body.aiSite #contents .stpSideRow, html.ais-dark body.aiSite #contents .stmSideRow, html.ais-dark body.aiSite #contents .sttSideRow, html.ais-dark body.aiSite #contents .dtpSideRow, html.ais-dark body.aiSite #contents .sthIdeasWrap, html.ais-dark body.aiSite #contents .stpIdeasWrap, html.ais-dark body.aiSite #contents .stmIdeasWrap, html.ais-dark body.aiSite #contents .sttIdeasWrap, html.ais-dark body.aiSite #contents .stpGal .it, html.ais-dark body.aiSite #contents .stmGal .it, html.ais-dark body.aiSite #contents .sttGal .it, html.ais-dark body.aiSite #contents .dtpMsg.bot, html.ais-dark body.aiSite #contents .dtpMd th, html.ais-dark body.aiSite #contents .dtpMd blockquote, html.ais-dark body.aiSite #contents .dtpMd code, html.ais-dark body.aiSite #contents .dtpBtn.ghost, html.ais-dark body.aiSite #contents .stpBtn.ghost { background: var(--aid-surface-2); border-color: var(--aid-line); } html.ais-dark body.aiSite #contents .sthSideRow:hover, html.ais-dark body.aiSite #contents .stpSideRow:hover, html.ais-dark body.aiSite #contents .stmSideRow:hover, html.ais-dark body.aiSite #contents .sttSideRow:hover, html.ais-dark body.aiSite #contents .dtpSideRow:hover { background: var(--aid-blue-softer); } html.ais-dark body.aiSite #contents .sthTitle, html.ais-dark body.aiSite #contents .stpTitle, html.ais-dark body.aiSite #contents .stmTitle, html.ais-dark body.aiSite #contents .sttTitle, html.ais-dark body.aiSite #contents .dtpTitle, html.ais-dark body.aiSite #contents .sthProjectName, html.ais-dark body.aiSite #contents .sthCardName, html.ais-dark body.aiSite #contents .sthSideName, html.ais-dark body.aiSite #contents .stpSideName, html.ais-dark body.aiSite #contents .stmSideName, html.ais-dark body.aiSite #contents .sttSideName, html.ais-dark body.aiSite #contents .dtpSideName, html.ais-dark body.aiSite #contents .dtpBrief b, html.ais-dark body.aiSite #contents .dtpBrief .v, html.ais-dark body.aiSite #contents .dtpQText, html.ais-dark body.aiSite #contents .dtpMsg.bot, html.ais-dark body.aiSite #contents .stpIdea .t, html.ais-dark body.aiSite #contents .stmIdea .t, html.ais-dark body.aiSite #contents .sttIdea .t, html.ais-dark body.aiSite #contents .sthIdeasWrap b { color: var(--aid-text); } html.ais-dark body.aiSite #contents .sthSideTitle, html.ais-dark body.aiSite #contents .stpSideTitle, html.ais-dark body.aiSite #contents .stmSideTitle, html.ais-dark body.aiSite #contents .sttSideTitle, html.ais-dark body.aiSite #contents .dtpSideTitle, html.ais-dark body.aiSite #contents .dtpBrief, html.ais-dark body.aiSite #contents .dtpMd blockquote, html.ais-dark body.aiSite #contents .stmPersona { color: var(--aid-sub); } html.ais-dark body.aiSite #contents .sthSub, html.ais-dark body.aiSite #contents .stpSub, html.ais-dark body.aiSite #contents .stmSub, html.ais-dark body.aiSite #contents .sttSub, html.ais-dark body.aiSite #contents .dtpSub, html.ais-dark body.aiSite #contents .sthSideMeta, html.ais-dark body.aiSite #contents .stpSideMeta, html.ais-dark body.aiSite #contents .stmSideMeta, html.ais-dark body.aiSite #contents .sttSideMeta, html.ais-dark body.aiSite #contents .dtpSideMeta, html.ais-dark body.aiSite #contents .sthSideEmpty, html.ais-dark body.aiSite #contents .stpSideEmpty, html.ais-dark body.aiSite #contents .stmSideEmpty, html.ais-dark body.aiSite #contents .sttSideEmpty, html.ais-dark body.aiSite #contents .dtpSideEmpty, html.ais-dark body.aiSite #contents .sthEmpty { color: var(--aid-mute); } html.ais-dark body.aiSite #contents .stpInput, html.ais-dark body.aiSite #contents .stmInput, html.ais-dark body.aiSite #contents .sttInput, html.ais-dark body.aiSite #contents .dtpQInput, html.ais-dark body.aiSite #contents .stpTextarea, html.ais-dark body.aiSite #contents .stmTextarea, html.ais-dark body.aiSite #contents .sttTextarea, html.ais-dark body.aiSite #contents .dtpTextarea, html.ais-dark body.aiSite #contents .stpChips button, html.ais-dark body.aiSite #contents .stmChips button, html.ais-dark body.aiSite #contents .sttChip, html.ais-dark body.aiSite #contents .sttTypes button, html.ais-dark body.aiSite #contents .dtpQOpts button, html.ais-dark body.aiSite #contents .dtpOxT button, html.ais-dark body.aiSite #contents .dtpSideBtn, html.ais-dark body.aiSite #contents .cy-node.wait, html.ais-dark body.aiSite #contents .stpIdea, html.ais-dark body.aiSite #contents .stmIdea, html.ais-dark body.aiSite #contents .sttIdea, html.ais-dark body.aiSite #contents .stpGal .tools a, html.ais-dark body.aiSite #contents .stpGal .tools button, html.ais-dark body.aiSite #contents .stmGal .tools a, html.ais-dark body.aiSite #contents .stmGal .tools button, html.ais-dark body.aiSite #contents .sttGal .tools a, html.ais-dark body.aiSite #contents .sttGal .tools button { background: var(--aid-surface-2); border-color: var(--aid-line); color: var(--aid-text); } html.ais-dark body.aiSite #contents .stpIdea.on, html.ais-dark body.aiSite #contents .stmIdea.on, html.ais-dark body.aiSite #contents .sttIdea.on, html.ais-dark body.aiSite #contents .sttTypes button.on { background: var(--aid-blue-softer); } html.ais-dark body.aiSite #contents .sthBadge, html.ais-dark body.aiSite #contents .sthBadge.lock, html.ais-dark body.aiSite #contents .dtpSideBadge { background: var(--aid-line-light); color: var(--aid-sub); } html.ais-dark body.aiSite #contents .dtpQ { border-color: var(--aid-line); } html.ais-dark body.aiSite #contents .dtpQSrc { background: var(--aid-blue-softer); } html.ais-dark body.aiSite #contents .dtpMd th, html.ais-dark body.aiSite #contents .dtpMd td { border-color: var(--aid-line); } html.ais-dark body.aiSite #contents .cy-label { color: var(--aid-sub); } /* detailPage.js 인라인 색 보정(부분): 흰/연회색 배경 → 표면색, 짙은 회색 글자 → 밝은 회색 */ html.ais-dark body.aiSite #contents [style*="background:#fff"], html.ais-dark body.aiSite #contents [style*="background: #fff"] { background: var(--aid-surface-2) !important; } html.ais-dark body.aiSite #contents [style*="background:#f"], html.ais-dark body.aiSite #contents [style*="background:#F"] { background: var(--aid-surface-2) !important; } html.ais-dark body.aiSite #contents [style*="border:1px solid #dfe4ec"], html.ais-dark body.aiSite #contents [style*="border:1px solid #e6eaf1"], html.ais-dark body.aiSite #contents [style*="border:1px dashed #dfe4ec"] { border-color: var(--aid-line) !important; } html.ais-dark body.aiSite #contents [style*="color:#5a6270"], html.ais-dark body.aiSite #contents [style*="color:#1b2b4b"] { color: var(--aid-sub) !important; } /* 상품 추가 팝업(.psp-*) */ html.ais-dark body.aiSite .psp-modal { background: var(--aid-surface); color: var(--aid-text); } html.ais-dark body.aiSite .psp-head { border-color: var(--aid-line); } html.ais-dark body.aiSite .psp-close { color: var(--aid-sub); } html.ais-dark body.aiSite .psp-close:hover { background: var(--aid-surface-2); color: var(--aid-text); } html.ais-dark body.aiSite .psp-desc, html.ais-dark body.aiSite .psp-hint, html.ais-dark body.aiSite .psp-card .psp-sub, html.ais-dark body.aiSite .psp-status { color: var(--aid-sub); } html.ais-dark body.aiSite .psp-card, html.ais-dark body.aiSite .psp-btn { background: var(--aid-surface-2); border-color: var(--aid-line); color: var(--aid-text); } html.ais-dark body.aiSite .psp-card.psp-disabled { background: var(--aid-canvas); } html.ais-dark body.aiSite .psp-card .psp-logo { background: #fff; border-radius: 8px; padding: 6px 10px; } /* 로고는 밝은 배지 위에 */ html.ais-dark body.aiSite .psp-input { background: var(--aid-surface-2); border-color: var(--aid-line); color: var(--aid-text); } html.ais-dark body.aiSite .psp-btn:hover { background: var(--aid-line-light); } html.ais-dark body.aiSite .psp-err { background: var(--aid-red-soft); color: var(--aid-red-ink); } html.ais-dark body.aiSite .psp-soon { background: var(--aid-amber-soft); color: var(--aid-amber-ink); } html.ais-dark body.aiSite .psp-spinner { border-color: var(--aid-line); border-top-color: var(--ais-accent); } /* 전역 컴포넌트(style.css): 팝업·표·입력창 — 콘텐츠 안에서 쓰이는 것만 */ html.ais-dark body.aiSite .popup > section { background: var(--aid-surface); color: var(--aid-text); } html.ais-dark body.aiSite .popup > section > header h2 { color: var(--aid-text); } html.ais-dark body.aiSite .popup > section > header > p { color: var(--aid-sub); } html.ais-dark body.aiSite .grid table, html.ais-dark body.aiSite table.grid { background: var(--aid-surface); } html.ais-dark body.aiSite .grid td, html.ais-dark body.aiSite .grid th { color: var(--aid-text); border-color: var(--aid-line-light); } html.ais-dark body.aiSite .grid thead th, html.ais-dark body.aiSite .grid tbody tr[onclick]:hover th, html.ais-dark body.aiSite .grid tbody tr[onclick]:hover td { background: var(--aid-surface-2); } html.ais-dark body.aiSite .textfield { background-color: var(--aid-surface-2) !important; color: var(--aid-text); border-color: var(--aid-line); } html.ais-dark body.aiSite .listProducts > li { border-color: var(--aid-line); } html.ais-dark body.aiSite .listProducts > li > strong, html.ais-dark body.aiSite .listProducts > li > strong a { color: var(--aid-text); } html.ais-dark body.aiSite .listProducts > li > span { color: var(--aid-sub); } /* 기본 폼 요소 안전망 */ html.ais-dark body.aiSite #aiShellBody select, html.ais-dark body.aiSite #aiShellBody input[type="text"], html.ais-dark body.aiSite #aiShellBody input[type="number"], html.ais-dark body.aiSite #aiShellBody input[type="url"], html.ais-dark body.aiSite #aiShellBody input[type="date"], html.ais-dark body.aiSite #aiShellBody textarea { color-scheme: dark; } html.ais-dark body.aiSite #aiShellBody { color: var(--aid-text); } /* ===================================================================== 통합 셸 (2026-11-06) — helpstore.shop(*.main)·ai.helpstore.shop(*.ai) 공용 사이드바·상단바 ===================================================================== */ /* 사이드바 [데이터][AI] 탭 */ .ais-tabs { display: flex; gap: 4px; margin: 12px 10px 0; padding: 4px; border-radius: 10px; background: var(--ais-canvas); } .ais-tab { flex: 1 1 0; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ais-side-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; padding: 0 6px; } .ais-tab:hover { color: var(--ais-side-ink); } .ais-tab.ais-tab-on { background: var(--ais-surface); color: var(--ais-cur-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } body.aiSite.ais-collapsed .ais-tabs { flex-direction: column; margin: 10px 8px 0; padding: 3px; } body.aiSite.ais-collapsed .ais-tab { height: 28px; padding: 0; font-size: 11px; } @media (max-width: 768px) { body.aiSite.ais-collapsed .ais-tabs { flex-direction: row; margin: 12px 10px 0; padding: 4px; } body.aiSite.ais-collapsed .ais-tab { height: 32px; padding: 0 6px; font-size: 13px; } } /* 비활성 탭 메뉴 숨김(.ais-nav 의 display:flex 가 hidden 속성을 이기므로 명시) */ .ais-nav[hidden] { display: none; } .ais-sep { border: 0; border-top: 1px solid var(--ais-line); margin: 10px 20px; } body.aiSite.ais-collapsed .ais-sep { margin: 10px 12px; } /* 2depth 메뉴 그룹(.ais-group): 부모 버튼(.ais-group-toggle)은 펼침/접힘, 하위 목록(.ais-sub)은 open 일 때만 보인다 */ .ais-group { display: flex; flex-direction: column; } .ais-group-toggle { border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: left; } .ais-group-arrow { margin-left: auto; display: inline-flex; color: var(--ais-side-muted); transition: transform .15s ease; } .ais-group.open > .ais-group-toggle .ais-group-arrow { transform: rotate(180deg); } .ais-sub { display: none; flex-direction: column; } .ais-group.open > .ais-sub { display: flex; } /* 하위 항목은 아이콘 없이 부모 라벨 시작 위치(12 + 아이콘 20 + 간격 12)에 맞춰 들여쓴다. body.aiSite 를 붙인 건 모바일 드로어의 body.aiSite.ais-collapsed .ais-item 패딩 되돌림보다 뒤에서 이기게 하려는 것 */ body.aiSite .ais-item.ais-sub-item { height: 38px; padding-left: 44px; font-size: 13px; } .ais-group.ais-group-current > .ais-group-toggle { color: var(--ais-cur-ink); font-weight: 600; } .ais-group.ais-group-current > .ais-group-toggle .ais-ic { color: var(--ais-cur-ink); } /* 아이콘만 보이는 접힘 모드(데스크톱): 하위 목록·화살표를 숨기고 부모 아이콘만 둔다. 하위가 현재 화면이면 부모를 현재 항목처럼 칠한다 */ @media (min-width: 769px) { body.aiSite.ais-collapsed .ais-group-arrow, body.aiSite.ais-collapsed .ais-group.open > .ais-sub { display: none; } body.aiSite.ais-collapsed .ais-group.ais-group-current > .ais-group-toggle { background: var(--ais-cur-bg); } } /* 사용자 카드: 확장 버전·이용 현황 */ .ais-ucard-link .ais-uinfo { flex: 1 1 auto; } .ais-ulink { color: var(--ais-accent); cursor: pointer; } .ais-usage { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ais-line); font-size: 12px; line-height: 1.7; color: var(--ais-side-muted); } .ais-usage-row { display: flex; justify-content: space-between; gap: 8px; } .ais-usage-val { color: var(--ais-side-ink); font-weight: 600; white-space: nowrap; } .ais-usage-go { cursor: pointer; } .ais-usage-go .ais-usage-val { color: var(--ais-accent); text-decoration: underline; } /* 상단바: 확장 프로그램 연동 상태(main/header.jsp 에서 이동, id 는 기존 스크립트가 참조) */ .ais-stats { display: flex; align-items: center; gap: 6px; margin-right: 4px; } /* 연동 표시가 상단바 왼쪽 끝을 차지하므로 메뉴 이름은 데스크톱에서도 숨긴다(2026-11-06 사용자 결정, 모바일은 원래 숨김) */ .ais-top .ais-crumb { display: none; } .ais-stat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color .3s; } .ais-stat .status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; transition: background-color .3s; } .ais-stat.logged-in { background-color: #03c75a; color: #fff; } .ais-stat.logged-inC { background-color: #d93d34; color: #fff; } .ais-stat.logged-inW { background-color: #661919; color: #fff; } .ais-stat.logged-out { background-color: #ccc; color: #000; } .ais-stats .tooltip > div { white-space: normal; font-family: var(--ais-font); } /* 상단바: 셀러 캘린더·멤버십·사용 가이드 */ .ais-tlink-cal { border-color: #E5484D; background: #E5484D; color: #fff; font-weight: 600; } .ais-tlink-cal:hover { background: #C93A3F; border-color: #C93A3F; color: #fff; } /* 상단 배너 줄(배너가 있을 때만 출력된다) */ .ais-banner.swiper { width: 600px; max-width: calc(100% - 48px); height: 80px; margin: 12px 24px 0; border-radius: 10px; } .ais-banner .swiper-slide a { display: block; border-radius: 8px; overflow: hidden; } .ais-banner .swiper-slide a img { display: block; width: 100%; height: 80px; object-fit: cover; } .ais-banner .pagination { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 1; display: flex; justify-content: center; gap: 4px; } .ais-banner .pagination .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 4px; background: #fff; opacity: 1; } .ais-banner .pagination .swiper-pagination-bullet-active { width: 16px; background: #5C98F6; } /* 데이터 탭 화면: 기존 helpstore.shop 처럼 흰 바탕(다크 클래스는 aiShell.js 가 붙이지 않는다) */ body.aiSite[data-shell-tab="data"] { background: #fff; } /* main/footer.jsp 의 #footer 는 min-width:1160px 라 사이드바 옆 좁은 메인 컬럼에서 가로 넘침이 생긴다 */ #aiShellMain #footer { min-width: 0; } /* 데이터 탭 화면도 첫 글자가 상단바 아래 28px 에서 시작하게 AI 탭(#aiShellBody padding-top 28px)과 맞춘다(2026-11-06). 위쪽 간격은 #aiShellBody 가 주므로 각 페이지 첫 요소가 따로 주던 위쪽 여백은 없앤다. 좌우·아래는 그대로 둔다. */ @media (min-width: 769px) { body.aiSite[data-shell-tab="data"] #aiShellBody { padding-top: 28px; } /* 목록·결제·강의실 등 제목형 페이지: .subtitle 의 padding-top 60px 가 위쪽 간격이었다 */ body.aiSite[data-shell-tab="data"] #contents > h2.subtitle:first-of-type { padding-top: 0; } /* 결제 결과 페이지: 첫 section.mypage 의 margin-top 30px(제목 뒤에 올 때는 .subtitle margin-bottom 30px 와 겹쳐 간격 그대로) */ body.aiSite[data-shell-tab="data"] #contents > section.mypage:first-of-type { margin-top: 0; } /* 게시글·히스토리 상세 */ body.aiSite[data-shell-tab="data"] #contents > header.detailHeader:first-of-type { padding-top: 0; } /* 추적·순위 상세: 돌아가기 버튼이 absolute top:40px 이라 padding 107px 을 0 으로 못 하고, 둘을 같이 40px 올려 버튼-제목 간격을 유지한다 */ body.aiSite[data-shell-tab="data"] #contents > header.analysDetailHeader:first-of-type, body.aiSite[data-shell-tab="data"] #contents > header.rankingDetailHeader:first-of-type { padding-top: 67px; } body.aiSite[data-shell-tab="data"] #contents > header.analysDetailHeader:first-of-type button.back, body.aiSite[data-shell-tab="data"] #contents > header.rankingDetailHeader:first-of-type button.back { top: 0; } /* 멤버십: 회색 띠가 좌우 끝까지 닿는 머리 영역이라 위쪽도 상단바에 붙여 둔다(띠 안 여백은 원본 유지) */ body.aiSite[data-shell-tab="data"] #contents > header.membershipHeader:first-of-type { margin-top: -28px; } /* 홈: home.jsp 의 .hsl-hero padding-top 56px */ body.aiSite[data-shell-tab="data"] #hslRoot > .hsl-hero:first-child { padding-top: 0; } /* 쿠팡 카테고리: #ccatPage padding-top 50px */ body.aiSite[data-shell-tab="data"] #aiShellBody > #ccatPage { padding-top: 0; } /* 소개: about.jsp 가 인라인 style(padding:40px 20px)로 여백을 줘서 !important 없이는 덮을 수 없다 */ body.aiSite[data-shell-tab="data"] #aiShellBody > .aboutPage { padding-top: 0 !important; } /* 입찰관리: 파란 탭바를 숨긴 뒤 첫 section.api 의 margin-top 60px 가 #contents 밖으로 겹쳐 나와 본문이 60px 내려간다 */ body.aiSite[data-shell-tab="data"] #contents > section.api:first-of-type { margin-top: 0; } /* 쿠팡·빠른 순위: 같은 이유로 .rankingHeader margin-top 18px 가 겹쳐 나온다. /rank 는 앞에 .hsfi-reopen-row(div)가 있어 :first-of-type 이면 같이 걸리므로 :first-child 로 좁힌다 */ /* 네이버 순위(/rank)는 아래에서 이용 안내 줄을 높이 0 으로 만들어 헤더가 쿠팡·빠른 순위와 같은 자리(본문 맨 위)에 오므로 margin-top 도 같이 없앤다(2026-11-06 세 순위 화면 통일) */ body.aiSite[data-shell-tab="data"] #contents > header.rankingHeader:first-child, body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:first-child + header.rankingHeader { margin-top: 0; } /* 이용 안내 줄(.hsfi-reopen-row, featureIntro.jsp)이 아이템(/item)·네이버 순위(/rank) 머리 위에 한 줄(24px + 여백)을 따로 차지해 쿠팡 카테고리·쿠팡 순위보다 머리가 아래에서 시작했다(2026-11-06). 버튼을 머리 안으로 옮기려면 페이지 JSP 를 고쳐야 하므로 줄은 높이 0 으로 만들고 버튼만 머리 첫 줄 오른쪽 끝(본문 1100px 폭 기준)에 겹쳐 둔다. z-index 는 뒤에 오는 카드(position:relative)에 가리지 않게 하려는 것 */ body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ section.filterGroup), body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ header.rankingHeader) { position: relative; z-index: 1; height: 0; max-width: 1100px; margin: 0 auto; box-sizing: border-box; } body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ section.filterGroup) .hsfi-reopen, body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ header.rankingHeader) .hsfi-reopen { position: relative; } /* 아이템: 첫 카드(.filterGroup 테두리 1 + 패딩 20) 안 '카테고리' 제목 줄(26px)의 세로 가운데·오른쪽 안쪽 끝 */ body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ section.filterGroup) { padding-right: 21px; } body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ section.filterGroup) .hsfi-reopen { top: 22px; } /* 네이버 순위: 일반/빠른 순위추적 탭 줄(29px)의 세로 가운데 */ body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row:has(+ header.rankingHeader) .hsfi-reopen { top: 2px; } /* 아이템: 첫 카드의 margin-top 50px(style.css .filterGroup:first-of-type)가 위쪽 간격이었다. 쿠팡 카테고리(#ccatPage padding-top 50px → 0)와 같은 처리 */ body.aiSite[data-shell-tab="data"] #contents > .hsfi-reopen-row + section.filterGroup { margin-top: 0; } } /* 데이터 화면의 파란 탭바(.tabMenu: 경쟁분석/예산수립/입찰관리, 네이버/쿠팡 순위)는 사이드바 데이터 탭 메뉴가 대신하므로 숨긴다(2026-11-06). 각 페이지 JSP 는 그대로 두고 셸 안에서만 숨긴다 */ body.aiSite #aiShellBody > .tabMenu { display: none; } @media (max-width: 768px) { .ais-stats, .ais-tlink-guide { display: none; } .ais-banner.swiper { display: none; } } /* style.css 의 sticky/fixed top:68px 는 옛 #header 높이 기준이라 셸 상단바 높이로 바꾼다(style.css 는 그대로 둔다). .column 머리 56px = 68 - 12 이므로 같은 차이를 calc 로 유지한다. style.css 의 body:has(.tabMenu) ... .column thead(top 120px = 56 + 탭바 64)는 탭바가 DOM 에 남아 계속 매치되지만, 탭바를 숨겼으므로(위 .tabMenu display:none) 탭바 없는 화면과 같은 값이어야 한다. 아래 .column 규칙이 그 규칙과 명시도(0,5,2)가 같고 style.css 뒤에 로드돼 이긴다. */ @media (min-width: 769px) { body.aiSite *:not(.popup) .grid.fixedTop thead { top: var(--ais-top-h); } body.aiSite *:not(.popup) .grid.fixedTop.column thead { top: calc(var(--ais-top-h) - 12px); } body.aiSite .tableOverview.case.fixedTop thead { top: var(--ais-top-h); } } /* responsive.css 의 모바일 top:55px 는 옛 모바일 헤더 기준이라 모바일 상단바(.ais-top height 56px)에 맞춘다 */ @media (max-width: 768px) { body.aiSite.mobileResponsive *:not(.popup) .grid.fixedTop thead { top: 56px; } }