/* ========================================================================== sub.css 1. 공통 (여러 페이지에서 같이 쓰는 것) 2. 페이지별 (해당 페이지에서만 쓰는 것) - 맨 아래, 페이지마다 주석으로 구분 ========================================================================== */ /* ========================================================================== 1. 공통 ========================================================================== */ /* 변수 */ :root { --titColor: white; --textColor: var(--gray); --decColor: var(--light-gray); --borderColor : var(--gray); --btnColor: var(--gray); --btnColor-hover: #535353; --panelBg: var(--dark-gray); --Radius : 4px; --H: 3.375rem; --dashGap : 1rem; --green : #38BA79 } /* 준비중 */ .prepare{position: relative;} .prepare:before{content:'';position: absolute;width: 100%;height: 100%;background:rgba(0,0,0,0.05);backdrop-filter: blur(3px);} .prepare p{position: absolute;top: 0;left: 0; bottom: 0;right: 0;display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: 500;} /* 유틸 */ .color-green { color:var(--green)} .grow-1 { flex-grow: 1; } .gap-1 {gap:1rem} /* 레이아웃 */ .dashboard { display: flex; flex-direction: column; gap: 5rem; overflow: hidden; } .dashboard .subTit { font-size: 1.625rem; font-weight: 600; } .dashboard .dash-sec { display: flex; flex-direction: column; gap:var(--dashGap) } .dashboard :is(input,select,textarea) { background: transparent } /* 좌우 분할 (간격은 --dashGap) */ .split { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: var(--dashGap); } .split > * { min-width: 0; } @media (max-width: 1620px) { .lg-split { grid-template-columns: 1fr; } } @media (max-width: 1240px) { .md-split { grid-template-columns: 1fr; } } @media (max-width: 990px) { .sm-split { grid-template-columns: 1fr; } } @media (max-width: 768px) { .xs-split { grid-template-columns: 1fr; } } @media (max-width: 500px) { .xxs-split { grid-template-columns: 1fr; } } /* auto 레이아웃 */ .autoFlex { display: flex; flex-wrap: wrap; gap: 1rem;} .autoFlex > .box {flex: 1 1 var(--autoSize,400px);min-width: var(--autoSize,400px);} .autoFlex[boxSize="400"] { --autoSize: 400px; } .autoFlex[boxSize="300"] { --autoSize: 300px; } .autoFlex[boxSize="200"] { --autoSize: 200px; } @media (width <= 500px) { .autoFlex:not([boxSize="200"], [boxSize="300"]) { --autoSize: auto; } } /* 버튼 */ .base-btn { background-color: var(--btnColor); height: var(--H); border-radius: var(--Radius); transition: background-color 0.2s; padding:.5rem 1rem; color:white;min-width:6.25rem } .base-btn:hover {background-color:#393737 } .base-btn.submit-btn { background-color:var(--pointcolor) } .base-btn.submit-btn:hover { background:#b23804} .base-btn.btn-sm { height: auto; min-width: 0; padding: .4rem .9rem; font-size: .875rem; } .base-btn.btn-line { background: transparent; border: 1px solid #fff; height: auto; min-width: 0; padding: .7rem 1.5rem; display: inline-flex; align-items: center; gap: .5em; } .base-btn.btn-dark { background: #141413; border: 1px solid var(--gray); height: 2.75rem; min-width: 5.5rem; } /* 패널 / 박스 */ .bg-panel { background:var(--panelBg); border-radius:4px} .bg-panel.borderBox {border-radius:0px} .borderBox { border: 1px solid var(--borderColor) } .borderBox.point-border { border-color: var(--pointcolor) } .borderBox.round { border-radius: 1.5rem; } .base-box { min-height: var(--H); border: 1px solid var(--borderColor); display: flex; align-items: center; padding:.5rem 1rem } /* 정보 행 (왼쪽 라벨 / 오른쪽 값) */ .info-row { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: #1c1c1c; } .info-row + .info-row { margin-top: .5rem; } /* 번호 원 / 프로필 이미지 */ .dotNum{display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--gray); width: 2em; aspect-ratio: 1; line-height: 1;transition: all .3s;} .dotNum.sm { width: 1.25rem; font-size: .6875rem; } .profile-img { width: 3.25rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .profile-img.sm { width: 2.25rem; } /* 뱃지 및 태그 */ .tag { background-color: var(--pointcolor); display: inline-flex; padding: .2em .5em } .tag.green { background: var(--green); } .tag.gray { background: var(--light-gray); } .tag.line { background: transparent; border: 1px solid #666; border-radius: 4px; color: #ccc; } .badge { display: inline-block; padding: var(--badgePd,.1em) 1em; border-radius: 10em; } .badge-green { border: 1px solid var(--green); color:var(--green) } .badge-gray { border: 1px solid #555555; color: #aaaaaa; } .badge-orange { background-color: #FF4500; color: white; } .badge-point { border: 1px solid var(--pointcolor); color: #fff; } .badge-yellow { border: 1px solid #FFD65A; color: #FFD65A; } .badge-white { background: #fff; color: var(--pointcolor); } .badge.fill { color: #141413; } .badge-yellow.fill { background: #FFD65A; } .badge-gray.fill { background: var(--light-gray); border-color: var(--light-gray); } /* AI-category (뱃지형 필터) */ .AI-category{display: flex; flex-wrap:wrap;gap: 6px;--badgePd:.2em} .AI-category .badge:hover,.AI-category .badge.act {border-color:var(--pointcolor); background:var(--pointcolor); color: #fff;} .AI-category.cursorCategory .badge {cursor: pointer;} /* 키워드 칩 / 리스트 */ .kw-list { display: flex; flex-wrap: wrap; gap: .5rem; } .kw-chip { display: flex; align-items: center; gap: .5em; padding: .6em .9em; background: var(--dark-gray); } .kw-chip .kw-num { color: var(--light-gray); } .kw-chip .kw-name { color: #fff; } .kw-chip .badge { --badgePd: .05em; font-size: .85em; } /* 툴팁 */ .tooltip{ display: flex;flex-direction: column; } .tooltip p{ position: relative; background-color: var(--dark-gray); padding: 1rem; margin: auto;display: inline-flex;flex-direction: column; } .tooltip:before{content: ''; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 1em; display: block; background: var(--dark-gray); aspect-ratio: 1 / 0.85;margin: auto;margin-bottom: -1px; } /* 상단 입력 및 컨트롤 영역 */ .top-section { display: flex; align-items: flex-end; gap: var(--dashGap); width: 100%; } .top-section .bt-box { display: flex; gap: var(--dashGap); } .input-group { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; } @media (width <= 990px) { .top-section:has(.input-group) { flex-direction: column; align-items: stretch; } .top-section:has(.input-group) .input-group .flexList > .box { width: 100%; } .top-section:has(.input-group) > :is(.base-btn, .bt-box) { align-self: center; } } /* input 관련 입력 필드 */ .text-input { border: 1px solid var(--borderColor); height: var(--H); padding: 0 16px; transition: border-color 0.2s; width: 100%; color: inherit; } .text-input:focus { border-color: var(--pointcolor); } .text-input.sm { height: 2.5rem; } .text-input:-webkit-autofill, .text-input:-webkit-autofill:hover, .text-input:-webkit-autofill:focus, .text-input:-webkit-autofill:active { -webkit-box-shadow: none!important; -webkit-text-fill-color: #fff ; transition: background-color 5000s ease-in-out 0s; } /* 체크박스 : label.chk-item > input[type=checkbox] + span */ .chk-item { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .chk-item input { position: absolute; opacity: 0; width: 0; height: 0; } /* 숨기되 키보드 포커스는 유지 */ .chk-item span { display: inline-flex; align-items: center; gap: .75rem; } .chk-item span::before { content: ''; flex-shrink: 0; width: 1.25rem; aspect-ratio: 1; border: 1px solid #fff; transition: background-color .2s, border-color .2s; } .chk-item input:checked + span::before { background: var(--pointcolor) url(/_inc/img/check.svg) center / 95% no-repeat; border-color: var(--pointcolor); } .chk-item input:focus-visible + span::before { outline: 2px solid var(--pointcolor); outline-offset: 2px; } /* 셀렉트 박스 */ .sel-wrap { position: relative; } .sel-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; color: #fff; } .sel-wrap select option { background: #1c1c1c; color: #fff; } .sel-wrap.panel select { background: var(--panelBg); border-color: var(--panelBg); } .sel-wrap.solid select { background: var(--gray); border-color: var(--gray); } .sel-wrap i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; } /* 이미지 첨부 */ .drop-box { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem; text-align: center; cursor: pointer; } .drop-box input { display: none; } .drop-box.lg { min-height: 14.5rem; justify-content: center; } .drop-box.drag { border-color: var(--pointcolor); } /* 파일을 끌어다 놓을 때 */ /* contentTab 영역 */ .contentTab { --x-gap:1rem; --y-gap:1rem } .contentTab li { transition: background 0.2s; cursor: pointer; color:var(--textColor) } .contentTab li.current { border: 1px solid var(--pointcolor); color: #fff; } .contentList { display: none; } .contentList.current { display: block; } /* 번호 리스트 (NumberList) */ .NumberList { counter-reset: item-counter; max-height:var(--maxH,auto) ; overflow-y: auto;} .NumberList::-webkit-scrollbar { width: 2px; } .NumberList::-webkit-scrollbar-thumb { background-color: var(--gray); } .NumberList::-webkit-scrollbar-track { background-color: #222; } .NumberList li { counter-increment: item-counter; display: flex; align-items: center; gap: 10px; } .NumberList li+li { margin-top:1em } .NumberList li::before { content: counter(item-counter); background-color: var(--gray); color: white; width: 2em; height: 2em; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .NumberList li:nth-child(-n+3)::before { background-color: var(--pointcolor); } .NumberList li > a { color:white; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .NumberList .rank{ flex-shrink: 0;} .NumberList li.empty-li{min-height: 12.5rem; justify-content: center;} .NumberList li.empty-li:before{display: none;} .NumberList li:has(.rank){padding-right:2rem;} /* 운영지수 (게이지) */ .gaugeSec .labels { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: #888888; } .gaugeSec .labels .class-active { color: #ffffff; font-weight: 600; } .gaugeSec .gauge-bg { position: relative; width: 100%; height: 6px; background-color: var(--light-gray); overflow: hidden; } .gaugeSec .gauge-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--pointcolor) } /* 원형 게이지 : --v(0~100) / --size(크기) / --th(두께) / --c1(시작색) */ .gauge { position: relative; width: var(--size, 6rem); aspect-ratio: 1; } .gauge::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c1, #fff) 0, var(--pointcolor) calc(var(--v) * 1%), var(--gray) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--th, .45rem)), #000 calc(100% - var(--th, .45rem) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--th, .45rem)), #000 calc(100% - var(--th, .45rem) + 1px)); } .gauge-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* 공통 Table */ .tableWrap {overflow-x: auto;padding-bottom:8px} .tableWrap::-webkit-scrollbar{height: 4px;}/* 아이폰 오류로 재설정 */ .basic-table {border-collapse:collapse;border-spacing:0;vertical-align:middle; min-width:600px} .basic-table th{padding:1rem;border-bottom:1px solid var(--gray)} .basic-table td{padding:0.5rem 1rem;border-bottom:1px solid var(--gray)} .basic-table tr:last-child td{border-bottom:none} .basic-table tr:hover .dotNum{background:var(--pointcolor); color: #fff; border-color:var(--pointcolor)} .basic-table :is(th+th, td+td){border-left:1px solid var(--gray)} .basic-table a { text-decoration: underline; } .basic-table.line-h :is(th + th, td + td) { border-left: 0; } /* 세로선 없는 표 */ .basic-table.center :is(th, td) { text-align: center; } /* 가운데 정렬 표 */ /* dataTable기준 Table */ #DataTables_Table_0_filter{display: none;} .dataTables_scrollBody::-webkit-scrollbar {height: 6px; } table.dataTable thead th {background:var(--dark-gray);text-align: center;} table.dataTable.basic-table :is(th+th, td+td){border-left:1px solid var(--gray)} table.dataTable01 {border-collapse:collapse;border-spacing:0;vertical-align:middle;} table.dataTable01 thead th {background:var(--dark-gray);text-align: center;} table.dataTable01 :is(th, td){border:1px solid var(--gray)} /* 구독체크 */ .membership-chk { display: flex; align-items: center; flex-wrap: wrap; gap: .8em 2em; line-height: 1.5; } .membership-chk__status { display: inline-flex; align-items: center; gap: .8em; } .membership-chk__dot { width: 8px; height: 8px; background-color: #ff5722;border-radius: 50%;display: inline-block; } /* Chart.js 공통 컨테이너 */ .chart-container {aspect-ratio: 1; overflow: hidden;} .chart-container canvas{width: 100%;} /* 로딩 덮개 (분석 중 결과 영역 위에 표시 - JS가 .rp-loading 을 넣고 뺌) */ .rp-loading-host { position: relative; } .rp-loading { position: absolute; inset: 0; z-index: 20; background: rgba(10, 10, 10, .78); backdrop-filter: blur(2px); border-radius: var(--Radius); } .rp-loading-box { position: sticky; top: 35vh; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 4rem 1rem; text-align: center; } .rp-loading-box .fa { font-size: 2.5rem; color: var(--pointcolor); } .rp-loading-msg { color: #fff; font-size: .9375rem; } .rp-loading-sub { color: var(--light-gray); font-size: .8125rem; } .rp-loading-fixed { position: fixed; z-index: 10001; border-radius: 0; } .rp-loading-fixed .rp-loading-box { position: absolute; top: 50%; left: 0; right: 0; padding: 0 1rem; transform: translateY(-50%); } .rp-loading-count { color: #fff; font-size: 1.125rem; font-weight: 700; } .rp-loading-bar { width: 240px; max-width: 80%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; } .rp-loading-bar span { display: block; width: 0; height: 100%; background: var(--pointcolor); transition: width .2s; } /* 예시 화면 안내 (분석 전 예시 데이터 위에 표시 - 분석하면 JS가 숨김) */ .rp-sample-note { display: flex; align-items: center; gap: .5em; padding: .75em 1em; color: #fff; font-size: .8125rem; background: var(--pointcolor);} .rp-sample-note .fa { font-size: 1rem; align-self: baseline;} .rp-sample-note[hidden] { display: none; } /* 토스트 알림 (복사 완료 등 - JS가 .rp-toast 를 만들어 사용) */ .rp-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 9600; transform: translate(-50%, 1rem); padding: .7em 1.4em; border-radius: 2em; background: rgba(30,30,30,.95); border: 1px solid #2b2b2b; color: #fff; font-size: .875rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .rp-toast.show { opacity: 1; transform: translate(-50%, 0); } /* ========================================================================== 2. 페이지별 (해당 페이지에서만 사용) : 폴더(analyze / keyword / solution / program) 순서로 정리 ========================================================================== */ /* ----- analyze ----- */ /* -------------------------------------------------------------------------- 통합검색 순위 조회 (analyze/int-rank.php) -------------------------------------------------------------------------- */ /* 상세 목록: 내 채널 행 강조 */ .ir-me td { background: rgba(var(--pointcolor-rgb), .12); } .ir-me .dotNum { border-color: var(--pointcolor); color: var(--pointcolor); } /* 저장내역 모달 */ .ir-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.7); } .ir-modal[hidden] { display: none; } .ir-modal-box { width: 100%; max-width: 1100px; max-height: 85vh; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; overflow: hidden; } .ir-modal-box .tableWrap { overflow: auto; } .ir-modal-close { color: #fff; font-size: 1.75rem; line-height: 1; } body.ir-modal-open #Layout { overflow: hidden; } .ir-days { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; } .ir-day { flex-shrink: 0; min-width: 7.5rem; padding: .5rem .6rem; border: 1px solid var(--borderColor); border-radius: var(--Radius); background: transparent; color: #fff; text-align: left; font-size: .75rem; line-height: 1.6; cursor: pointer; transition: border-color .2s; } .ir-day:hover { border-color: var(--pointcolor); } .ir-day-date { display: block; margin-bottom: .2rem; color: var(--light-gray); } .ir-day-sec b { color: var(--pointcolor); font-weight: 500; } .ir-day-sec.is-no { color: var(--light-gray); } .ir-days::-webkit-scrollbar { height: 4px; } .ir-smart { display: inline-block; margin-right: .25em; padding: 0 .3em; border-radius: 2px; background: var(--pointcolor); color: #fff; font-size: .625rem; } .ir-actions { white-space: nowrap; } .ir-actions .base-btn + .base-btn { margin-left: .3rem; } /* -------------------------------------------------------------------------- 키워드 검색의도 분석 (analyze/search-intent.php) -------------------------------------------------------------------------- */ /* 항목 목록 (왼쪽 라벨 / 오른쪽 값) */ .stat-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .stat-list li + li { margin-top: 0.5rem; } /* -------------------------------------------------------------------------- 블로그 종합 분석 (analyze/blog-analysis.php) -------------------------------------------------------------------------- */ .grade-box { display: flex; align-items: center; justify-content: center; width: 3.375rem; height: 3.375rem; background: var(--pointcolor); color: #fff; font-size: 1.25rem; font-weight: 500; } .kw-search { display: flex; align-items: center; height: 1.75rem; padding: 0 .5rem; border: 1px solid var(--light-gray); } .kw-search input { flex-grow: 1; min-width: 0; height: 100%; border: 0; color: #fff; font-size: .75rem; } .kw-search button { color: #fff; } /* ----- keyword ----- */ /* -------------------------------------------------------------------------- 키워드 검색량 (keyword/search.php) -------------------------------------------------------------------------- */ .swiper-play { display: flex; align-items: center; justify-content: center; width: 2rem; aspect-ratio: 1; background: #eee; color: var(--pointcolor); font-size: .75rem; } /* -------------------------------------------------------------------------- N키워드 마스터 (keyword/Nkeyword.php) -------------------------------------------------------------------------- */ .text-input.kw-textarea { height: 7.5rem; padding: 1rem; resize: none; display: block; color: #fff; } .text-input.kw-textarea[hidden] { display: none; } .kw-dot { display: inline-block; width: 6px; height: 6px; margin-left: .5em; border-radius: 50%; background: var(--pointcolor); } .kw-head { display: flex; flex-direction: column; gap: .75rem; } .kw-time { align-self: flex-end; white-space: nowrap; } .kw-tabs li { max-width: 14rem; white-space: nowrap; } .kw-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kw-tabs li > i { flex-shrink: 0; } @media (max-width: 768px) { .kw-time { align-self: flex-start; } .kw-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; --x-gap: .5rem; } .kw-tabs li { flex-shrink: 0; } .kw-tabs::-webkit-scrollbar { height: 4px; } } /* -------------------------------------------------------------------------- 키워드 트렌드 분석 (keyword/trend.php) -------------------------------------------------------------------------- */ /* 일간 / 월간 토글 */ .trend-toggle { display: inline-flex; gap: .5rem; align-self: flex-start; } .trend-toggle button { padding: .5em 1.4em; border-radius: 2em; background: var(--gray); color: #fff; font-size: .9375rem; cursor: pointer; transition: background .2s; } .trend-toggle button.act { background: var(--pointcolor); } .trend-toggle button:disabled { opacity: .4; cursor: not-allowed; } /* 차트 영역 */ .trend-chart { position: relative; height: 26rem; } /* -------------------------------------------------------------------------- 플레이스 트렌드 (keyword/place-trend.php) -------------------------------------------------------------------------- */ /* 카테고리 탭 */ .cat-tab { display: flex; flex-wrap: wrap; gap: 1rem 2rem; } .cat-tab button { color: #fff; font-size: 1rem; } .cat-tab button.act { color: var(--pointcolor); } /* 랭킹 목록 */ .place-groups { display: flex; flex-direction: column; gap: 4rem; } .rank-list { display: flex; flex-direction: column; gap: .6rem; } .rank-item { display: flex; gap: 1rem; padding: .9rem 1rem; } .rank-side { width: 2rem; flex-shrink: 0; text-align: center; } .rank-no { display: flex; align-items: center; justify-content: center; width: 1.75rem; aspect-ratio: 1; margin: 0 auto .2rem; border-radius: 4px; background: #0d0d0d; color: #fff; font-size: .8125rem; font-weight: 500; } .rank-no.r1 { background: var(--pointcolor); } .rank-no.r2 { background: var(--green); } .rank-no.r3 { background: #9b9b9b; } .rank-body { flex-grow: 1; min-width: 0; } .kw-row { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: .3rem; font-size: .75rem; } /* ----- solution ----- */ /* -------------------------------------------------------------------------- AI 글쓰기 (solution/ai-write*.php) -------------------------------------------------------------------------- */ /* 홈판 스타일 유형 (라디오 리스트) */ .opt-list { display: flex; flex-direction: column; gap: .6rem; max-height: var(--maxH,14em); overflow-y: auto;padding-right: 1em;} .opt-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--panelBg); border: 1px solid transparent; cursor: pointer; } .opt-item input { display: none; } .opt-item:has(input:checked) { border-color: var(--pointcolor); } .opt-item:has(input:checked) .dotNum { background: var(--pointcolor); border-color: var(--pointcolor); color: #fff; } /* AI 글쓰기 결과 원고 (소제목 · 문단 · 목록 간격) */ .ai-article h2 { margin-top: 1.5rem; font-size: .9375rem; font-weight: 500; color: #fff; } .ai-article p, .ai-article ol, .ai-article ul { margin-top: .75rem; } .ai-article ol, .ai-article ul { padding-left: 1.25rem; } .ai-article ol { list-style: decimal; } .ai-article ul { list-style: disc; } /* 제휴마케팅 상품 이미지 : 큰 이미지 + 썸네일 */ .kv-row { display: flex; align-items: center; padding: .5rem 1rem; border-bottom: 1px solid #2b2b2b; } .kv-row .k { width: 5em; color: var(--light-gray);flex-shrink: 0; } .kv-row .v { flex-grow: 1; } .img-area { min-height: 20rem; } /* 제휴마케팅 상품 이미지 : Swiper (큰 이미지 + 썸네일) */ .img-viewer { position: relative; background: #0d0d0d; } .img-main-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; height: 28rem; } .img-main-swiper .swiper-slide img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .img-viewer-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 2.25rem; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; } .img-viewer-nav.prev { left: .75rem; } .img-viewer-nav.next { right: .75rem; } .img-viewer-nav.swiper-button-disabled { opacity: .25; pointer-events: none; } .img-viewer-tools { position: absolute; z-index: 2; top: .75rem; right: .75rem; display: flex; gap: .4rem; } .img-viewer-tools a, .img-viewer-tools button { display: flex; align-items: center; justify-content: center; width: 2rem; aspect-ratio: 1; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8125rem; } .img-thumbs { padding: .75rem; } .img-thumbs .swiper-slide { width: 4rem; aspect-ratio: 1; border: 1px solid #2b2b2b; opacity: .45; cursor: pointer; transition: opacity .2s, border-color .2s; } .img-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--pointcolor); } .img-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 제휴마케팅 상품 이미지 크게 보기 (확대 창) */ .img-zoom { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, .82); } .img-zoom[hidden] { display: none; } .img-zoom img { display: block; max-width: min(1200px, 92vw); max-height: 88vh; object-fit: contain; } .img-zoom-close { position: absolute; top: 1.1rem; right: 1.4rem; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #222; font-size: 1.875rem; line-height: 1; } /* 트렌드 목록 */ .trend-list { max-height: 40rem; overflow-y: auto; padding-right: 2em; } .trend-list::-webkit-scrollbar { width: 4px; } .trend-list::-webkit-scrollbar-thumb { background-color: var(--pointcolor); } .trend-list::-webkit-scrollbar-track { background-color: #2b2b2b; } .trend-list li { display: flex; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--gray); cursor: pointer; } .trend-list .num { min-width: 2em; } .trend-list small { display: block; color: var(--light-gray); font-size: .7rem; } .trend-panel[hidden], .trend-result[hidden] { display: none; } /* -------------------------------------------------------------------------- 이미지 제작 (solution/ai-image*.php) -------------------------------------------------------------------------- */ .pick-list { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: .5rem; } .pick-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 0; border: 1px solid var(--borderColor); font-size: .6875rem; cursor: pointer; } .pick-item input { display: none; } .pick-item:has(input:checked) { border-color: var(--pointcolor); } .ratio-ico { width: calc(1.25rem * min(1, var(--r))); aspect-ratio: var(--r); background: linear-gradient(180deg, #ffb89c, var(--pointcolor)); } .free-card { aspect-ratio: 3 / 4; border: 1px solid #2b2b2b; overflow: hidden; cursor: pointer; } .free-card.on { border-color: var(--pointcolor); } .free-card { position: relative; } .free-card:hover { border-color: var(--pointcolor); } .free-card .img-viewer-tools { opacity: 0; transition: opacity .2s; } .free-card:hover .img-viewer-tools, .free-card:focus-within .img-viewer-tools { opacity: 1; } .img-zoom-save { position: absolute; top: 1.1rem; right: 4.6rem; display: flex; align-items: center; justify-content: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #222; font-size: 1.125rem; } /* 이미지 생성기 결과 (생성된 이미지 목록) */ .ai-img-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; width: 100%; padding: 1rem; } .ai-img-item { position: relative; background: #0d0d0d; } .ai-img-item img { display: block; width: 100%; height: auto; } /* 이미지 수정 : 첨부한 이미지 미리보기 */ .edit-previews { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; } .edit-preview { position: relative; aspect-ratio: 1; background: #0d0d0d; border: 1px solid var(--borderColor); } .edit-preview img { display: block; width: 100%; height: 100%; object-fit: cover; } .edit-preview button { position: absolute; top: .2rem; right: .2rem; width: 1.25rem; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: .625rem; } /* 카드뉴스 : 장별 생성 중 / 실패 표시 */ .card-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 100%; color: var(--light-gray); font-size: .75rem; text-align: center; } .card-wait .fa { font-size: 1.75rem; color: var(--pointcolor); } .img-thumbs .card-wait .fa { font-size: 1rem; } /* -------------------------------------------------------------------------- 상위노출 분석 (solution/exposure-analysis.php) -------------------------------------------------------------------------- */ .lg-box { display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; background: var(--c); } .post-item > summary { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: var(--panelBg); font-size: .875rem; cursor: pointer; list-style: none; } .post-item > summary::-webkit-details-marker { display: none; } .post-item .tag { min-width: 3rem; justify-content: center; } .post-item .txt{ text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} .post-item .tgl::before { content: '상세 보기'; } .post-item[open] .tgl::before { content: '상세 접기'; } .post-item .post-body { padding: 0 1rem 1.5rem; background: var(--panelBg); } .ea-seg { display: flex; flex-wrap: wrap; gap: .4rem; } .ea-seg label { position: relative; cursor: pointer; } .ea-seg input { position: absolute; opacity: 0; width: 0; height: 0; } .ea-seg span { display: inline-block; padding: .35em .9em; border: 1px solid var(--borderColor); border-radius: 10em; font-size: .75rem; color: var(--light-gray); transition: background-color .2s, border-color .2s, color .2s; } .ea-seg label:hover span { border-color: var(--pointcolor); } .ea-seg input:checked + span { background: var(--pointcolor); border-color: var(--pointcolor); color: #fff; } .ea-seg input:focus-visible + span { outline: 2px solid var(--pointcolor); outline-offset: 2px; } .ea-stat { display: flex; flex-direction: column; } .ea-stat .ea-stat-val { color: var(--c); } .ea-bar { height: .375rem; margin-top: auto; border-radius: 1em; background: #2b2b2b; overflow: hidden; } .ea-stat > :nth-last-child(3) { margin-bottom: 1.25rem; } .ea-bar span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--c); transition: width .4s; } .ea-lv-mid { color: #FFD65A; } .ea-score { padding: .7rem .5rem; background: #1c1c1c; text-align: center; } /* -------------------------------------------------------------------------- 원고 형태소 분석 (solution/blog-morpheme.php) -------------------------------------------------------------------------- */ /* 워드 클라우드 : lv1 매우 높음 / lv2 높음 / lv3 중간 / lv4 낮음 */ .wc-legend { display: flex; flex-wrap: wrap; gap: 1rem; } .wc-legend i { display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: currentColor; } .wc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; } .wc-grid span { padding: .5rem; text-align: center; background: #1c1c1c; font-size: .75rem; font-weight: 500; } .wc-legend .lv1, .wc-grid .lv1 { color: var(--pointcolor); } .wc-legend .lv2, .wc-grid .lv2 { color: var(--green); } .wc-legend .lv3, .wc-grid .lv3 { color: #F1B93B; } .wc-legend .lv4, .wc-grid .lv4 { color: #6b6b6b; } /* 키워드 밀도 막대 */ .bar-track { flex-grow: 1; height: 4px; margin-left: 1rem; background: var(--gray); } .bar-track i { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--pointcolor), #fff); } /* ----- program ----- */ /* -------------------------------------------------------------------------- 서이추 프로그램 (program/soi.php) - 필수 확인사항 팝업 -------------------------------------------------------------------------- */ .pg-popup { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .7); } .pg-popup.on { display: flex; } .pg-popup .pg-box { position: relative; width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; padding: 2.5rem 2rem 1.5rem; background: var(--panelBg); border: 1px solid var(--gray); } .pg-popup .pg-x { position: absolute; top: .75rem; right: .75rem; color: #fff; font-size: 1.25rem; line-height: 1; } .pg-popup .pg-note { display: flex; gap: .7rem; padding: 1rem; background: #2b2b2b; font-size: .75rem; line-height: 1.6; } .pg-popup .pg-note.ok { background: var(--green); } .pg-popup .pg-check li + li { margin-top: 1.25rem; } .soi-btn { display: inline-flex; align-items: center; justify-content: center; } #soiForm [hidden] { display: none; } .soi-status { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.2rem; border: 1px solid var(--borderColor); background: var(--panelBg); } .soi-msg { font-size: .875rem; } .soi-msg:empty { display: none; } .soi-msg.is-error { color: #ff6b6b; } .soi-msg.is-success { color: var(--green); } @media (max-width: 768px) { .soi-status .ml-auto { margin-left: 0; width: 100%; } } /* ----- Mypage ----- */ /* 페이지 번호 (마이페이지 결제내역 · 리워드 · AI 내역 등 - /