/* Generated from public/k110/index.html by scripts/k110-extract-facade-css.js.
Source of truth: K110 SECTION CSS-10 through CSS-99.
Do not hand-edit design values here; regenerate from the source facade. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;700;900&display=swap');
body.k110-page-active {
margin: 0 !important;
padding: 0 !important;
background: #000 !important;
overflow-x: hidden !important;
}
.k110-root,
.k110-root * {
font-family: 'Noto Sans KR', sans-serif !important;
}
.k110-root {
position: relative;
min-height: 100vh;
background: #000;
color: #7cff00;
overflow-x: hidden;
}
.k110-root #spaceCanvas {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 0 !important;
pointer-events: none !important;
background: #000 !important;
}
/* K110 SECTION CSS-10 APP DESIGN SYSTEM TOKENS */
:root {
--k110-color-green: #7cff00;
--k110-color-cyan: #00e5ff;
--k110-color-yellow: #ffe600;
--k110-color-pink: #ff4ecb;
--k110-color-red: #ff3b30;
--k110-color-purple: #b455ff;
--k110-neon-roll-c1: #7CFF00;
--k110-neon-roll-c2: #00E5FF;
--k110-neon-roll-c3: #FFEE00;
--k110-neon-roll-c4: #FF5CC8;
--k110-neon-roll-c5: #B45CFF;
--k110-neon-roll-speed-1: 8.4s;
--k110-neon-roll-speed-2: 4.2s;
--k110-neon-roll-speed-3: 1.8s;
--k110-neon-roll-speed-4: 0.82s;
--k110-neon-roll-speed-5: 0.34s;
--k110-neon-roll-duration: var(--k110-neon-roll-speed-3);
--k110-neon-roll-gradient:
linear-gradient(110deg,
var(--k110-neon-roll-c1) 0%,
color-mix(in srgb, var(--k110-neon-roll-c1) 44%, var(--k110-neon-roll-c2) 56%) 10%,
var(--k110-neon-roll-c2) 20%,
color-mix(in srgb, var(--k110-neon-roll-c2) 45%, var(--k110-neon-roll-c3) 55%) 30%,
var(--k110-neon-roll-c3) 40%,
color-mix(in srgb, var(--k110-neon-roll-c3) 42%, var(--k110-neon-roll-c4) 58%) 50%,
var(--k110-neon-roll-c4) 60%,
color-mix(in srgb, var(--k110-neon-roll-c4) 44%, var(--k110-neon-roll-c5) 56%) 72%,
var(--k110-neon-roll-c5) 84%,
color-mix(in srgb, var(--k110-neon-roll-c5) 40%, var(--k110-neon-roll-c1) 60%) 92%,
var(--k110-neon-roll-c1) 100%);
--k110-bg-black: #000;
--k110-bg-white: #fff;
--k110-line-1: 1px;
--k110-line-2: 2px;
--k110-line-3: 3px;
--k110-radius-sm: 4px;
--k110-radius-md: 8px;
--k110-radius-pill: 999px;
--k110-shadow-hard: 6px;
--k110-motion-fast: 120ms;
--k110-motion-mid: 240ms;
--k110-motion-slow: 480ms;
--k110-type-micro: 11px;
--k110-type-caption: 12px;
--k110-type-body: 16px;
--k110-type-heading: 24px;
--k110-type-display-min: 32px;
--k110-type-display: clamp(72px, 9vw, 150px);
--k110-button-cluster-gap: 2px;
--k110-gap: var(--k110-button-cluster-gap);
--k110-button-inset: var(--k110-button-cluster-gap);
--k110-button-line-w: var(--k110-line-1);
--k110-tab-cut-size: 12px;
--k110-tab-line-w: var(--k110-line-1);
--k110-tab-diagonal-center: calc(var(--k110-tab-cut-size) * 0.70710678);
--k110-tab-diagonal-line-w: calc(var(--k110-tab-line-w) * 1.41421356);
--k110-button-glow-alpha: 34%;
--k110-button-glow-hover-alpha: 58%;
--k110-button-fill-alpha: 18%;
--k110-button-fill-hover-alpha: 76%;
--k110-button-fill-active-alpha: 92%;
--k110-capsule-font-size: var(--k110-type-micro);
--k110-capsule-line-w: var(--k110-line-1);
--k110-capsule-pad-x: 8px;
--k110-capsule-pad-y: 4px;
--k110-capsule-min-h: 20px;
--k110-capsule-button-pad-x: 10px;
--k110-capsule-button-min-h: 24px;
--k110-panel-content-x: 14px;
--k110-bar-text-inset: var(--k110-panel-content-x);
--k110-edge-x: clamp(15px, 2.5vw, 48px);
--k110-edge-y: clamp(20px, 4vh, 40px);
--k110-header-h: clamp(46px, 7vh, 76px);
--k110-panel-w: min(67.5vw, 1080px);
--k110-panel-max-h: calc(100vh - (var(--k110-edge-y) * 2));
--k110-portrait-layout-min-w: 1100px;
--k110-portrait-page-gap: 0px;
--k110-panel-line-w: var(--k110-line-1);
--k110-transition-line-w: var(--k110-line-1);
--k110-cell-bg-z: 0;
--k110-cell-content-z: 2;
--k110-cell-line-z: 3;
--k110-pattern-flow-speed: 9s;
--k110-pattern-flow-x: 24px;
--k110-pattern-flow-y: 24px;
--k110-warp-critical-intensity: 0;
}
/* K110 SECTION CSS-20 GLOBAL SPACE WARP AND BASE LAYERS */
body.is-space-warp-critical::before {
content: "";
position: fixed;
inset: 0;
z-index: 1190;
pointer-events: none;
opacity: calc(0.12 + (var(--k110-warp-critical-intensity) * 0.22));
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(124,255,0,0.08) 16%, rgba(0,0,0,0.3) 62%, rgba(0,0,0,0.52) 100%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 5px);
mix-blend-mode: screen;
}
body.is-space-warp-critical .k110-header,
body.is-space-warp-critical .k110-hero,
body.is-space-warp-critical .k110-ui,
body.is-space-warp-critical #authModal,
body.is-space-warp-critical #starwarsView,
body.is-space-warp-critical #userToast,
body.is-space-warp-critical #k110RetroLoader,
body.is-space-warp-critical #adminFinalDBModal {
filter:
brightness(calc(1 - (var(--k110-warp-critical-intensity) * 0.32)))
contrast(calc(1 + (var(--k110-warp-critical-intensity) * 0.42)))
saturate(calc(0.78 + (var(--k110-warp-critical-intensity) * 0.18)))
drop-shadow(0 0 calc(8px + (var(--k110-warp-critical-intensity) * 18px)) rgba(0,0,0,0.92)) !important;
text-shadow:
0 0 calc(8px + (var(--k110-warp-critical-intensity) * 18px)) rgba(0,0,0,0.95),
0 2px 0 rgba(0,0,0,0.8) !important;
animation: k110WarpShipShake 74ms steps(2, end) infinite !important;
}
body.is-space-warp-critical .k110-hero {
opacity: 1 !important;
}
body.is-space-warp-critical .k110-hero-title,
body.is-space-warp-critical .k110-sample-counter,
body.is-space-warp-critical .k110-mobile-scroll-hint {
opacity: 1 !important;
}
body.is-space-warp-critical .k110-hero-title,
body.is-space-warp-critical .k110-hero-line {
color: #020202 !important;
-webkit-text-stroke: calc(0.5px + (var(--k110-warp-critical-intensity) * 1.2px)) rgba(255,255,255,0.78);
text-shadow:
0 0 calc(10px + (var(--k110-warp-critical-intensity) * 34px)) rgba(255,255,255,0.82),
0 0 calc(26px + (var(--k110-warp-critical-intensity) * 58px)) rgba(124,255,0,0.34),
0 2px 0 rgba(255,255,255,0.44) !important;
filter: brightness(0.82) contrast(calc(1.2 + (var(--k110-warp-critical-intensity) * 0.8))) !important;
}
body.is-space-warp-critical .k110-ui,
body.is-space-warp-critical .k110-panel,
body.is-space-warp-critical .k110-panel-main,
body.is-space-warp-critical .k110-discover-stage,
body.is-space-warp-critical .k110-discover-card,
body.is-space-warp-critical .k110-contribution-flight,
body.is-space-warp-critical .k110-contribution-modal.is-launching,
body.is-space-warp-critical #authModal,
body.is-space-warp-critical #starwarsView,
body.is-space-warp-critical #adminFinalDBModal {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
body.is-space-warp-critical .k110-box,
body.is-space-warp-critical .k110-user-badge,
body.is-space-warp-critical .k110-user-toast,
body.is-space-warp-critical .k110-admin-finaldb-card,
body.is-space-warp-critical .k110-admin-finaldb-panel,
body.is-space-warp-critical .k110-contribution-card,
body.is-space-warp-critical .k110-contribution-success,
body.is-space-warp-critical #authModal .k110-box,
body.is-space-warp-critical #designOutput,
body.is-space-warp-critical #designStatus,
body.is-space-warp-critical #discoverStatus,
body.is-space-warp-critical .k110-discover-status,
body.is-space-warp-critical .k110-discover-existing-row,
body.is-space-warp-critical .k110-discover-input,
body.is-space-warp-critical .k110-discover-input-box,
body.is-space-warp-critical .k110-review-card,
body.is-space-warp-critical .k110-review-word,
body.is-space-warp-critical .k110-label,
body.is-space-warp-critical .k110-meta-chip,
body.is-space-warp-critical input,
body.is-space-warp-critical textarea,
body.is-space-warp-critical select {
background-color: rgba(0,0,0,calc(0.28 + (var(--k110-warp-critical-intensity) * 0.44))) !important;
background-blend-mode: multiply !important;
border-color: rgba(0,0,0,calc(0.62 + (var(--k110-warp-critical-intensity) * 0.34))) !important;
text-shadow:
0 0 calc(6px + (var(--k110-warp-critical-intensity) * 16px)) rgba(0,0,0,0.98),
0 1px 0 rgba(0,0,0,0.95) !important;
box-shadow:
inset 0 0 0 9999px rgba(0,0,0,calc(0.18 + (var(--k110-warp-critical-intensity) * 0.67))),
0 0 calc(12px + (var(--k110-warp-critical-intensity) * 28px)) rgba(0,0,0,0.94) !important;
}
body.is-space-warp-critical button,
body.is-space-warp-critical .k110-feature-btn,
body.is-space-warp-critical .k110-back-btn,
body.is-space-warp-critical .k110-admin-action,
body.is-space-warp-critical .k110-discover-vote,
body.is-space-warp-critical .glyph-item,
body.is-space-warp-critical .k110-discover-meta-pill,
body.is-space-warp-critical .glyph-group-label,
body.is-space-warp-critical .history-symbol {
background-color: rgba(0,0,0,calc(0.28 + (var(--k110-warp-critical-intensity) * 0.48))) !important;
border-color: rgba(0,0,0,0.96) !important;
text-shadow:
0 0 calc(7px + (var(--k110-warp-critical-intensity) * 18px)) rgba(0,0,0,1),
0 1px 0 rgba(0,0,0,0.95) !important;
box-shadow:
inset 0 0 0 9999px rgba(0,0,0,calc(0.18 + (var(--k110-warp-critical-intensity) * 0.67))),
0 0 calc(10px + (var(--k110-warp-critical-intensity) * 24px)) rgba(0,0,0,0.98) !important;
}
body.is-space-warp-critical .k110-hero-title,
body.is-space-warp-critical .k110-hero * ,
body.is-space-warp-critical .k110-panel * ,
body.is-space-warp-critical .k110-header * {
text-shadow:
0 0 calc(8px + (var(--k110-warp-critical-intensity) * 20px)) rgba(0,0,0,0.98),
0 2px 0 rgba(0,0,0,0.9) !important;
}
body.is-space-warp-critical .k110-hero-title,
body.is-space-warp-critical .k110-hero-title * {
text-shadow:
0 0 calc(10px + (var(--k110-warp-critical-intensity) * 34px)) rgba(255,255,255,0.82),
0 0 calc(26px + (var(--k110-warp-critical-intensity) * 58px)) rgba(124,255,0,0.34),
0 2px 0 rgba(255,255,255,0.44) !important;
}
body.is-space-warp-critical .dot-green,
body.is-space-warp-critical .dot-red,
body.is-space-warp-critical .k110-status-dot {
background: #050505 !important;
box-shadow: 0 0 calc(10px + (var(--k110-warp-critical-intensity) * 18px)) rgba(0,0,0,1) !important;
}
@keyframes k110WarpShipShake {
0% { translate: 0 0; rotate: 0deg; }
20% { translate: calc(var(--k110-warp-critical-intensity) * 1.8px) calc(var(--k110-warp-critical-intensity) * -1.2px); rotate: calc(var(--k110-warp-critical-intensity) * -0.12deg); }
40% { translate: calc(var(--k110-warp-critical-intensity) * -1.4px) calc(var(--k110-warp-critical-intensity) * 1.5px); rotate: calc(var(--k110-warp-critical-intensity) * 0.1deg); }
60% { translate: calc(var(--k110-warp-critical-intensity) * 1.2px) calc(var(--k110-warp-critical-intensity) * 1px); rotate: calc(var(--k110-warp-critical-intensity) * -0.08deg); }
80% { translate: calc(var(--k110-warp-critical-intensity) * -1.7px) calc(var(--k110-warp-critical-intensity) * -0.8px); rotate: calc(var(--k110-warp-critical-intensity) * 0.12deg); }
100% { translate: 0 0; rotate: 0deg; }
}
.k110-header {
position: fixed !important;
top: var(--k110-edge-y) !important;
left: var(--k110-edge-x) !important;
right: var(--k110-edge-x) !important;
height: var(--k110-header-h) !important;
z-index: 1200 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
pointer-events: none !important;
}
.k110-brand-lockup {
display: flex !important;
align-items: center !important;
/* 잉크 기준 간격 14px 을 목표로 한다. `×` 글리프는 advance 안에서 좌 4.47 / 우 4.28 의
사이드베어링을 갖기 때문에 flex gap 은 그만큼 뺀 값이어야 한다.
기준자는 `×` 잉크 폭(17.3px)이고 14px 은 그 0.8배다. */
gap: calc(var(--k110-brand-ink-h) * 0.213) !important;
height: 44px !important;
min-width: 0 !important;
pointer-events: none !important;
color: #fff !important;
}
.k110-brand-item {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
height: 44px !important;
box-sizing: border-box !important;
}
/* 폭 고정 154px 을 걷었다. 확정 에셋(120x64 세로 조합)은 높이에 맞추면 폭이 절반쯤
되는데, 고정 폭을 두면 남는 공간이 로고와 `X` 사이 빈칸으로 그대로 보였다.
높이는 shell-layout 의 `--k110-brand-lockup-h` 가 정하고 폭은 비율로 따라온다. */
.k110-sandoll-cloud-logo {
justify-content: flex-start !important;
flex: 0 0 auto !important;
width: auto !important;
padding: 0 !important;
pointer-events: auto !important;
}
/* 요구사항 1-7: 앵커 전환 후에도 텍스트 장식과 링크 색이 붙지 않게 한다.
SVG 는 앵커의 text-decoration 을 물려받으므로 명시적으로 끊는다.
.k110-home-logo 는 SVG 가 path 로만 구성돼 필요 없었지만, 두 브랜드 앵커의
동작을 일치시키기 위해 함께 지정한다. */
.k110-brand-lockup a.k110-brand-item,
.k110-brand-lockup a.k110-brand-item:hover,
.k110-brand-lockup a.k110-brand-item:visited {
text-decoration: none !important;
color: inherit !important;
}
.k110-brand-lockup a.k110-brand-item text {
text-decoration: none !important;
}
/* 요구사항 1-6: 키보드 포커스 시각 표시. 레이아웃에 영향을 주지 않도록
outline 대신 box-shadow 를 쓴다(요구사항 1-7 의 렌더 박스 보존).
전환 전에는 두 브랜드 앵커 모두 포커스 표시가 없었다. */
.k110-brand-lockup a.k110-brand-item:focus-visible {
outline: none !important;
border-radius: 4px !important;
box-shadow:
0 0 0 2px rgba(0, 229, 255, 0.9),
0 0 12px rgba(0, 229, 255, 0.45) !important;
}
/* 자식이 인라인 SVG placeholder 에서 확정 에셋 이미지로 바뀌었다.
종전 규칙은 `svg` 를 196x42 로 늘리고 `translateY(4px)` 로 눌러 3원+텍스트의
baseline 을 맞췄다. 세로 조합은 그 보정이 필요 없다 — 높이만 슬롯에 맞추고 폭은
비율로 둔다. `circle`/`text` 의 `fill: #4173FA` 도 함께 걷었다. 에셋 내부가
래스터 PNG 라 `fill` 이 닿지 않고, 확정 에셋은 흰색이다. */
/* 슬롯 높이(100%)가 아니라 잉크 토큰을 그대로 쓴다. 에셋의 `viewBox` 를 잉크 영역으로
잘라 두었으므로(그 파일 상단 주석) 내재 크기가 66x45 이고 잉크 == 레이아웃 박스다.
즉 보정 계수가 1 이라 토큰을 곱하지 않고 그대로 넣는다. */
.k110-sandoll-cloud-logo img {
display: block !important;
width: auto !important;
height: var(--k110-brand-ink-h) !important;
max-width: none !important;
user-select: none !important;
}
/* 자식이 인라인 SVG 에서 곱하기 문자 `×` 로 바뀌었다.
종전 `.k110-brand-x-svg` 와 그 `path` 규칙 두 개는 선 두 개를 그리던 것이라 함께
걷었다. 획 두께는 이제 폰트가 정하므로 `stroke-width` 에 대응하는 값이 없다.
크기는 `font-size` 로 잡는다. 종전 SVG 가 18x37 박스에 3px 획이었고, 그와 비슷한
시각 무게가 되는 값을 골랐다. 폭 고정은 두지 않는다 — 글리프 폭에 맞춘다. */
.k110-brand-x {
width: auto !important;
color: #fff !important;
/* 잉크 토큰에서 파생한다. `0.578` 은 지금 비례(26px / 잉크 45px)를 보존하는 값이라
토큰이 45 인 동안 결과가 26px 로 같다. 아래 모바일 블록의 clamp 는 소스가 뒤라
좁은 화면에서 여전히 이 값을 덮는다. */
font-size: calc(var(--k110-brand-ink-h) * 0.578) !important;
font-weight: 700 !important;
line-height: 1 !important;
/* 글리프 잉크 중심이 산돌구름 잉크 중심보다 1.63px 아래에 있다. 곱하기 기호가 수학
중심선에 놓이는 반면 두 로고는 잉크 박스 중앙에 놓이기 때문이다. 박스 기준으로
재면 맞아 보여서 놓치기 쉬운 차이다. */
transform: translateY(calc(var(--k110-brand-ink-h) * -0.036)) !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
/* 폭 고정(58px) 대신 높이를 기준으로 둔다. 산돌구름 로고와 위·아래 끝을 맞추라는
요청이고, 두 로고의 높이는 shell-layout 의 `--k110-brand-lockup-h` 하나가 정한다.
viewBox 가 `0 0 110 58` 이므로 폭은 `높이 x 110/58` 로 따라온다(64px -> 약 121px).
아래 두 오버라이드(모바일 세로, 낮은 데스크톱)도 같은 이유로 `auto` 로 뒀다. */
.k110-home-logo {
width: auto !important;
pointer-events: auto !important;
color: #f2f2f2 !important;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
/* `58 / 57.45` 는 path bbox 가 viewBox 를 다 채우지 못하는 몫을 되돌리는 계수다.
viewBox 는 `0 0 110 58` 인데 실제 path bbox 는 `y=0.28 h=57.45` 라 위아래로 0.55 가
비어 있다. 그 0.95% 를 보정하지 않으면 산돌구름 잉크보다 그만큼 작아진다.
산돌구름 쪽 계수가 1 인 것과 값이 다른 이유가 이것이다 — 그쪽은 에셋을 잘라서
여백을 없앴고, 이쪽은 SVG 를 고칠 수 없어 CSS 로 갚는다. */
.k110-home-logo svg {
display: block !important;
width: auto !important;
height: calc(var(--k110-brand-ink-h) * 58 / 57.45) !important;
overflow: visible !important;
}
.k110-home-logo svg * {
fill: currentColor !important;
}
.k110-home-logo:hover {
animation: k110LogoShake 100ms ease-in-out infinite !important;
transform-origin: center center;
}
@keyframes k110LogoShake {
0% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(1px, -1px) rotate(-0.6deg); }
50% { transform: translate(-1px, 1px) rotate(0.6deg); }
75% { transform: translate(1px, 1px) rotate(0); }
100% { transform: translate(0, 0) rotate(0); }
}
.k110-hero {
position: fixed !important;
left: var(--k110-edge-x) !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: min(40vw, 760px) !important;
z-index: 50 !important;
pointer-events: none !important;
}
.k110-hero-title {
--k110-hero-title-size: clamp(58px, min(8vw, 17vh), 120px);
color: #fff !important;
font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
font-size: var(--k110-hero-title-size) !important;
font-weight: 900 !important;
font-variation-settings: 'wght' 900;
line-height: 0.92 !important;
margin: 0 !important;
text-shadow:
0 0 7px rgba(255,255,255,0.62),
0 0 22px rgba(255,255,255,0.36);
animation: k110HeroTitleGlow 3.6s ease-in-out infinite;
max-width: 100%;
}
.k110-hero-line {
display: block;
width: 100%;
max-width: 100%;
font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
font-weight: 900 !important;
font-variation-settings: 'wght' 900;
white-space: nowrap;
overflow: visible;
letter-spacing: 0;
}
@keyframes k110HeroTitleGlow {
0%, 100% {
text-shadow:
0 0 6px rgba(255,255,255,0.56),
0 0 18px rgba(255,255,255,0.28);
filter: brightness(1);
}
35% {
text-shadow:
0 0 9px rgba(255,255,255,0.78),
0 0 29px rgba(255,255,255,0.42);
filter: brightness(1.06);
}
58% {
text-shadow:
0 0 5px rgba(255,255,255,0.48),
0 0 16px rgba(255,255,255,0.24);
filter: brightness(0.98);
}
}
.k110-sample-counter {
color: #7CFF00;
font-size: clamp(18px, 2vw, 24px);
font-weight: 700;
margin-top: clamp(30px, 4.2vh, 54px);
}
.k110-hero-info {
display: flex;
flex-direction: column;
align-items: stretch;
pointer-events: auto;
}
.k110-mobile-scroll-hint {
display: none !important;
}
.k110-ranking-board {
width: min(100%, 430px);
margin: clamp(22px, 3.2vh, 38px) auto 0;
padding: 12px;
border: 1px solid rgba(255,255,255,0.74);
background:
linear-gradient(135deg, rgba(0,0,0,0.64), rgba(10,18,20,0.76)),
repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6px);
color: #fff;
text-align: left;
pointer-events: auto;
box-shadow:
inset 0 0 0 1px rgba(124,255,0,0.18),
inset 0 -18px 34px rgba(0,232,255,0.07),
0 0 22px rgba(0,0,0,0.42),
0 0 18px rgba(124,255,0,0.12);
}
.k110-ranking-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 22px;
margin-bottom: 10px;
font-size: 11px;
font-weight: 900;
line-height: 1.2;
}
.k110-ranking-kicker {
color: #7CFF00;
white-space: nowrap;
}
.k110-ranking-eyebrow {
color: #00E5FF;
white-space: nowrap;
}
.k110-ranking-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 11px;
}
.k110-ranking-title {
min-width: 0;
margin: 0;
color: #fff;
font-size: 18px;
font-weight: 900;
line-height: 1.15;
text-shadow: 0 0 12px rgba(255,255,255,0.28);
}
.k110-ranking-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: min(100%, 212px);
border: 1px solid rgba(255,255,255,0.34);
background: rgba(0,0,0,0.36);
}
.k110-ranking-tab {
min-width: 0;
min-height: 30px;
padding: 0 8px;
border: 0;
border-right: 1px solid rgba(255,255,255,0.24);
border-radius: 0;
background: transparent;
color: rgba(255,255,255,0.72);
font: inherit;
font-size: 11px;
font-weight: 900;
line-height: 1.1;
cursor: pointer;
white-space: nowrap;
}
.k110-ranking-tab:last-child {
border-right: 0;
}
.k110-ranking-tab.is-active,
.k110-ranking-tab:hover {
background: rgba(124,255,0,0.14);
color: #7CFF00;
box-shadow: inset 0 -10px 18px rgba(124,255,0,0.09);
}
.k110-ranking-list {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.k110-ranking-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 56px;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,0.24);
background:
linear-gradient(90deg, rgba(124,255,0,0.08), transparent 46%),
rgba(0,0,0,0.36);
}
.k110-ranking-row:first-child {
border-color: rgba(255,47,214,0.54);
box-shadow: inset 0 0 18px rgba(255,47,214,0.1);
}
.k110-ranking-row.is-status {
border-color: rgba(255,255,255,0.22);
box-shadow: none;
}
.k110-ranking-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid rgba(124,255,0,0.62);
color: #7CFF00;
font-size: 12px;
font-weight: 900;
}
.k110-ranking-main {
display: grid;
min-width: 0;
gap: 3px;
}
.k110-ranking-label,
.k110-ranking-caption,
.k110-ranking-metric {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k110-ranking-label {
color: #fff;
font-size: 15px;
font-weight: 900;
line-height: 1.15;
}
.k110-ranking-caption {
color: rgba(255,255,255,0.62);
font-size: 11px;
font-weight: 700;
line-height: 1.15;
}
.k110-ranking-metric {
max-width: 92px;
color: #00E5FF;
font-size: 13px;
font-weight: 900;
line-height: 1.15;
text-align: right;
}
@media (max-width: 767px) {
.k110-ranking-board {
width: min(100%, 320px);
margin-top: 18px;
padding: 10px;
}
.k110-ranking-head {
min-height: 18px;
margin-bottom: 8px;
font-size: 10px;
}
.k110-ranking-title-row {
align-items: stretch;
flex-direction: column;
gap: 8px;
margin-bottom: 9px;
}
.k110-ranking-title {
font-size: 16px;
}
.k110-ranking-tabs {
width: 100%;
}
.k110-ranking-tab {
min-height: 28px;
padding: 0 6px;
font-size: 10px;
}
.k110-ranking-list {
gap: 5px;
}
.k110-ranking-row {
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 7px;
min-height: 50px;
padding: 7px;
}
.k110-ranking-rank {
width: 30px;
height: 30px;
font-size: 11px;
}
.k110-ranking-label {
font-size: 13px;
}
.k110-ranking-caption {
font-size: 10px;
}
.k110-ranking-metric {
max-width: 74px;
font-size: 11px;
}
}
@media (min-width: 768px) and (max-height: 760px) {
.k110-ranking-board {
margin-top: 12px;
padding: 10px;
}
.k110-ranking-title-row {
margin-bottom: 8px;
}
.k110-ranking-title {
font-size: 16px;
}
.k110-ranking-list {
gap: 5px;
}
.k110-ranking-row {
min-height: 46px;
padding: 6px 9px;
}
.k110-ranking-rank {
width: 30px;
height: 30px;
}
.k110-ranking-caption {
display: none;
}
}
@keyframes k110MobileScrollHintGlow {
0% {
background-position: 0% 50%;
filter: drop-shadow(0 0 5px rgba(124,255,0,0.55));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 9px rgba(0,232,255,0.55));
}
100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 5px rgba(255,47,214,0.55));
}
}
@keyframes k110MobileScrollHintNudge {
0%, 100% {
transform: translateY(0);
}
38% {
transform: translateY(5px);
}
62% {
transform: translateY(2px);
}
}
.k110-user-layer {
position: relative !important;
top: auto !important;
right: auto !important;
z-index: 1201;
pointer-events: auto !important;
font-family: 'Noto Sans KR', sans-serif !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
}
.k110-auth-action {
appearance: none;
min-height: 36px;
height: 36px;
background: transparent;
color: #fff;
padding: 2px 8px 2px 4px;
border-radius: 8px;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
box-shadow: none;
font-family: 'Sandoll GothicNeo1Unicode', 'Noto Sans KR', sans-serif !important;
font-size: 14px;
font-weight: 400;
line-height: 1.61;
letter-spacing: 0;
white-space: nowrap;
}
.k110-auth-action:hover,
.k110-auth-action:focus-visible {
background: rgba(255,255,255,0.12);
outline: none;
}
.k110-user-layer.is-authenticated .k110-signup-badge {
display: none !important;
}
.k110-auth-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 24px;
height: 24px;
overflow: hidden;
}
.k110-auth-icon svg {
display: block;
width: 24px;
height: 24px;
}
.k110-auth-icon path {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.k110-status-dot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
pointer-events: none;
border-radius: 50%;
}
.dot-red { background: #FF3B30; box-shadow: 0 0 10px #FF3B30; animation: blink 1.5s infinite; }
.dot-green { background: #7CFF00; box-shadow: 0 0 10px #7CFF00; }
.k110-user-toast {
position: absolute;
top: 60px;
right: 0;
width: 260px;
background: #fff;
border: 5px solid #000;
padding: 20px;
display: none;
box-shadow: 10px 10px 0 #000;
color: #000;
transform-origin: calc(100% - 24px) -34px;
}
.k110-user-toast.is-open {
display: block;
animation: k110ToastIn 0.18s ease-out both;
}
.k110-user-toast.is-closing {
display: block;
pointer-events: none;
animation: k110ToastOut 0.22s ease-in both;
}
.k110-user-toast h4 { margin: 0 0 10px 0; font-weight: 900; }
.k110-user-toast button {
width: 100%;
margin-top: 10px;
padding: 10px;
background: #000;
color: #fff;
border: none;
font-weight: 900;
cursor: pointer;
}
.k110-user-toast button.danger { background: #FF3B30; }
.k110-user-toast button.k110-admin-finaldb-entry {
display: none;
background: #7CFF00;
color: #000;
border: 3px solid #000;
}
.k110-user-toast button.k110-optimize-entry {
background: #fff;
color: #000;
border: 3px solid #000;
}
.k110-user-toast .k110-user-toast-close {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
min-height: 28px;
margin: 0;
padding: 0;
background: #000;
color: #fff;
border: 0;
display: grid;
place-items: center;
font-size: 14px;
line-height: 1.18;
box-shadow: none;
}
@keyframes k110ToastIn {
from { opacity: 0; transform: translate(18px, -18px) scale(0.72); }
to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes k110ToastOut {
from { opacity: 1; transform: translate(0, 0) scale(1); }
to { opacity: 0; transform: translate(46px, -46px) scale(0.08); }
}
.k110-ui {
position: fixed !important;
right: var(--k110-edge-x) !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: var(--k110-panel-w) !important;
max-height: var(--k110-panel-max-h) !important;
overflow: hidden !important;
z-index: 100 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
font-family: 'Noto Sans KR', sans-serif !important;
}
.k110-ui.is-design-mode {
width: var(--k110-panel-w) !important;
}
@media (max-width: 1599px) and (orientation: landscape) {
:root {
--k110-edge-x: clamp(12px, 1.8vw, 29px);
--k110-edge-y: clamp(14px, 3vh, 30px);
--k110-panel-w: clamp(50vw, 56vw, 60vw);
--k110-panel-max-h: calc(100vh - (var(--k110-edge-y) * 2));
}
.k110-hero {
width: clamp(32vw, 36vw, 40vw) !important;
}
.k110-hero-title {
--k110-hero-title-size: clamp(46px, min(7.2vw, 15vh), 92px);
}
}
@media (orientation: portrait) {
:root {
--k110-edge-x: clamp(9px, 2.5vw, 24px);
--k110-edge-y: clamp(14px, 3vh, 32px);
--k110-panel-w: calc(100vw - (var(--k110-edge-x) * 2));
--k110-panel-max-h: calc(100svh - var(--k110-header-h) - (var(--k110-edge-y) * 3));
}
.k110-ui {
top: calc(var(--k110-edge-y) + var(--k110-header-h) + 16px) !important;
left: var(--k110-edge-x) !important;
right: var(--k110-edge-x) !important;
transform: none !important;
width: auto !important;
max-width: var(--k110-panel-w) !important;
max-height: var(--k110-panel-max-h) !important;
}
}
.k110-action-row button,
/* V0.2 요구사항 2-14: 번역 실행 버튼을 결과 액션바 버튼과 같은 계열로 묶는다.
여기서 얻는 것은 font-weight 900 · cursor · font-family · transition 이고,
border/background/color 는 아래 `#translatePanel .k110-action-row button` 계열
규칙이 `!important` 로 덮는다(액션바 버튼과 동일한 해결 순서). */
.k110-translate-run-btn,
.k110-feature-btn,
.k110-back-btn,
#designCopyBtn,
#designBackspaceBtn,
#resetBtn,
#closeHistoryBtn,
#authMainBtn {
border: 3px solid #000;
background: #fff;
color: #000;
font-weight: 900;
cursor: pointer;
box-shadow: 5px 5px 0 #222;
font-family: 'Noto Sans KR', sans-serif !important;
transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}
#authMainBtn[style*="255, 59, 48"],
#authMainBtn[style*="#FF3B30"],
#authMainBtn[style*="rgb(255, 59, 48)"] {
box-shadow: 0 0 18px rgba(255,59,48,0.42);
}
.k110-action-row button:active,
.k110-feature-btn:active,
.k110-back-btn:active,
#designCopyBtn:active,
#designBackspaceBtn:active,
#resetBtn:active,
#closeHistoryBtn:active,
#authMainBtn:active {
transform: translate(3px, 3px);
box-shadow: 1px 1px 0 #111;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
.k110-action-row button:not(#authMainBtn),
.k110-feature-btn,
.k110-back-btn,
#designCopyBtn,
#designBackspaceBtn,
#resetBtn,
#closeHistoryBtn {
position: relative;
overflow: visible;
outline: none;
}
.k110-action-row button:not(#authMainBtn):focus-visible,
.k110-feature-btn:focus-visible,
.k110-back-btn:focus-visible,
#designCopyBtn:focus-visible,
#designBackspaceBtn:focus-visible,
#resetBtn:focus-visible,
#closeHistoryBtn:focus-visible {
z-index: 40;
outline: none;
animation: k110KeyboardButtonFocusPulse 1.05s ease-in-out infinite;
box-shadow:
5px 5px 0 #222,
0 0 0 2px rgba(255,255,255,0.72),
0 0 16px rgba(124,255,0,0.38),
0 0 28px rgba(0,229,255,0.22) !important;
}
.k110-action-row button:not(#authMainBtn):focus-visible:before,
.k110-feature-btn:focus-visible:before,
.k110-back-btn:focus-visible:before,
#designCopyBtn:focus-visible:before,
#designBackspaceBtn:focus-visible:before,
#resetBtn:focus-visible:before,
#closeHistoryBtn:focus-visible:before,
.k110-action-row button:not(#authMainBtn):focus-visible:after,
.k110-feature-btn:focus-visible:after,
.k110-back-btn:focus-visible:after,
#designCopyBtn:focus-visible:after,
#designBackspaceBtn:focus-visible:after,
#resetBtn:focus-visible:after,
#closeHistoryBtn:focus-visible:after {
position: absolute;
top: 50%;
transform: translateY(-52%);
color: currentColor;
font-weight: 900;
font-size: 0.92em;
line-height: 1;
pointer-events: none;
text-shadow: 0 0 8px rgba(255,255,255,0.62);
opacity: 0.92;
}
.k110-action-row button:not(#authMainBtn):focus-visible:before,
.k110-feature-btn:focus-visible:before,
.k110-back-btn:focus-visible:before,
#designCopyBtn:focus-visible:before,
#designBackspaceBtn:focus-visible:before,
#resetBtn:focus-visible:before,
#closeHistoryBtn:focus-visible:before {
content: "‹";
left: 8px;
}
.k110-action-row button:not(#authMainBtn):focus-visible:after,
.k110-feature-btn:focus-visible:after,
.k110-back-btn:focus-visible:after,
#designCopyBtn:focus-visible:after,
#designBackspaceBtn:focus-visible:after,
#resetBtn:focus-visible:after,
#closeHistoryBtn:focus-visible:after {
content: "›";
right: 8px;
}
#authMainBtn:focus-visible {
outline: none;
box-shadow: none !important;
}
#authMainBtn:focus-visible:before {
animation: k110AuthButtonFocusPulse 1.05s ease-in-out infinite;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.2),
0 0 0 2px rgba(255,255,255,0.64),
0 0 16px var(--k110-auth-glow-a),
0 0 28px var(--k110-auth-glow-b);
}
}
@keyframes k110KeyboardButtonFocusPulse {
0%, 100% {
transform: scale(1);
filter: brightness(1);
}
50% {
transform: scale(1.018);
filter: brightness(1.08);
}
}
@keyframes k110AuthButtonFocusPulse {
0%, 100% {
inset: 0;
filter: brightness(1);
}
50% {
inset: -2px;
filter: brightness(1.08);
}
}
/* K110 SECTION CSS-30 PANEL FRAME AND FOOTER LAYOUT */
.k110-panel {
--k110-panel-footer-h: clamp(48px, 5.8svh, 58px);
--k110-panel-footer-gap: clamp(10px, 1.7svh, 18px);
--k110-panel-frame-h: max(120px, calc(var(--k110-panel-max-h) - var(--k110-panel-footer-h) - var(--k110-panel-footer-gap)));
display: none;
width: 100%;
max-width: 100%;
box-sizing: border-box;
transition: opacity 0.35s ease, transform 0.35s ease !important;
}
.k110-panel-frame {
position: relative;
width: 100%;
height: var(--k110-panel-frame-h);
max-height: var(--k110-panel-frame-h);
flex: 0 0 var(--k110-panel-frame-h);
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
color: var(--k110-panel-primary, currentColor);
}
.k110-panel-main {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.k110-panel-frame > .k110-panel-main {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.k110-panel-frame > .k110-panel-main > .k110-review-card,
.k110-panel-frame > .k110-panel-main > .k110-discover-box {
height: 100%;
min-height: 0;
margin-bottom: 0 !important;
}
.k110-panel.is-active > :not(.k110-feature-buttons):not(.k110-subnav) {
box-sizing: border-box;
}
.k110-panel.is-active > .k110-panel-bar,
.k110-panel.is-active > .k110-panel-main,
.k110-panel.is-active > .k110-panel-frame,
.k110-panel.is-active > .k110-panel-frame > .k110-panel-bar,
.k110-panel.is-active > .k110-panel-frame > .k110-panel-main {
margin-left: 0;
margin-right: 0;
}
.k110-panel.is-active {
display: block;
opacity: 1;
transform: translateX(0);
max-height: var(--k110-panel-max-h);
overflow-y: auto;
overflow-x: hidden;
padding-right: 10px;
box-sizing: border-box;
}
.k110-panel.is-left-out,
.k110-panel.is-right-in {
display: none;
opacity: 0;
pointer-events: none;
}
.k110-panel.is-transition-measuring {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transition: none !important;
animation: none !important;
}
.k110-panel.is-transition-measuring > .k110-panel-main {
padding-right: 0 !important;
scrollbar-gutter: auto !important;
}
.k110-panel.is-transition-measuring > .k110-panel-frame > .k110-panel-main {
padding-right: 0 !important;
scrollbar-gutter: auto !important;
}
.k110-panel.is-mobile-tab-staging {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.k110-box,
.k110-review-card {
background: #fff !important;
border: 5px solid #000 !important;
box-shadow: 8px 8px 0 rgba(255,255,255,0.2) !important;
padding: 20px;
margin-bottom: 20px;
color: #000;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
#designPanel .k110-box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 20px;
color: #fff;
overflow: visible;
}
#designPanel .k110-label {
display: none !important;
}
.k110-label {
background: #000;
color: #fff;
font-size: 11px;
padding: 4px 10px;
margin: -20px -20px 15px -20px;
width: fit-content;
font-weight: 900;
}
#normalInput,
#alienOutput {
width: 100% !important;
min-height: 220px;
border: 3px solid #000;
font-size: clamp(44px, 6vw, 68px) !important;
font-weight: 900 !important;
padding: 16px;
background: #fff;
color: #000;
box-sizing: border-box;
line-height: 1.35;
word-break: break-all;
white-space: pre-wrap;
}
#normalInput {
resize: vertical;
outline: none;
text-align: center;
align-content: center;
}
#normalInput::placeholder {
text-align: center;
}
#alienOutput {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.k110-action-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: var(--k110-button-inset);
margin-top: 14px;
box-sizing: border-box;
}
#translatePanel .k110-action-row {
--k110-translate-action-cols: 4;
grid-template-columns: repeat(var(--k110-translate-action-cols), minmax(0, 1fr));
transition: grid-template-columns 0.28s cubic-bezier(0.16, 0.86, 0.32, 1);
}
@media (max-width: 640px) {
#translatePanel .k110-action-row {
--k110-translate-action-cols: 2;
}
}
#translatePanel .k110-action-row > button:disabled {
cursor: not-allowed !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
transform: none !important;
}
.k110-panel-bar {
--k110-panel-primary: #7CFF00;
--k110-bar-side-slot-w: 0px;
--k110-bar-side-slot-gap: 0px;
--k110-bar-pattern-right: calc(var(--k110-bar-side-slot-w) + var(--k110-bar-side-slot-gap));
position: relative;
height: var(--k110-bar-h, calc(52px * 2 / 3));
min-height: var(--k110-bar-h, calc(52px * 2 / 3));
width: 100%;
overflow: hidden;
isolation: isolate;
contain: paint;
background: rgba(0, 0, 0, 0.52);
border-top: var(--k110-panel-line-w) solid color-mix(in srgb, var(--k110-panel-primary) 42%, transparent);
box-sizing: border-box;
color: var(--k110-panel-primary);
}
.k110-panel-bar-dots {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: var(--k110-cell-bg-z);
pointer-events: none;
-webkit-mask-image: none;
mask-image: none;
clip-path: inset(0);
contain: paint;
overflow: hidden;
background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--k110-panel-primary) 24%, transparent) 0.75px, transparent 1.08px);
background-size: var(--k110-bar-dot-size, 5px 5px);
background-origin: border-box;
background-clip: border-box;
background-repeat: repeat;
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
opacity: 0.78;
transform: translateZ(0);
}
.k110-c-bar-title {
--k110-bar-title-inset: var(--k110-bar-text-inset);
--k110-bar-title-glow: color-mix(in srgb, var(--k110-panel-primary, currentColor) 55%, transparent);
position: relative;
z-index: var(--k110-cell-content-z);
height: 100%;
display: inline-flex;
align-items: center;
padding: 0 var(--k110-bar-title-inset);
color: var(--k110-panel-primary);
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-bar-font-size, clamp(12px, 1.1vw, 15px));
font-weight: 900;
letter-spacing: 0.02em;
text-shadow: 0 0 9px var(--k110-bar-title-glow);
}
.k110-panel-title {
--k110-bar-title-inset: var(--k110-bar-text-inset);
}
/* K110 SECTION CSS-30 COMMON COMPONENT MODULES
Add these classes beside existing feature classes during phased migration. */
.k110-c-cell {
position: relative;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
}
.k110-c-cell-bg,
.k110-c-pattern {
position: absolute;
inset: 0;
z-index: var(--k110-cell-bg-z);
pointer-events: none;
overflow: hidden;
}
.k110-c-cell-content {
position: relative;
z-index: var(--k110-cell-content-z);
}
.k110-bidi-lock,
#alienOutput,
#designOutput,
#discoverGlyph,
#contributionFinalAlien,
#contribAlienText,
#innerAli,
.glyph-item,
.k110-review-option-text,
.k110-discover-existing-glyph,
.k110-contribution-alien-card,
.k110-flight-alien,
.k110-contribution-final-alien,
.k110-contribution-success-glyph,
.k110-translate-noise-linebox,
.k110-translate-noise-slot,
.k110-translate-noise-glyph,
.k110-admin-finaldb-grid-input {
direction: ltr;
unicode-bidi: isolate-override;
font-variant-emoji: text;
}
/* K110 MODULE: ALIEN OUTPUT TEXT
Uniform glyph color and glow for editable/output alien text surfaces. */
.k110-c-alien-output-text {
--k110-alien-output-color: var(--k110-panel-primary, currentColor);
--k110-alien-output-glow-tight: 10px;
--k110-alien-output-glow-wide: 24px;
--k110-alien-output-glow-strong: 72%;
--k110-alien-output-glow-soft: 42%;
--k110-alien-output-glow:
0 0 var(--k110-alien-output-glow-tight) color-mix(in srgb, var(--k110-alien-output-color) var(--k110-alien-output-glow-strong), transparent),
0 0 var(--k110-alien-output-glow-wide) color-mix(in srgb, var(--k110-alien-output-color) var(--k110-alien-output-glow-soft), transparent);
color: var(--k110-alien-output-color) !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: var(--k110-alien-output-glow) !important;
filter: none !important;
mix-blend-mode: normal !important;
}
.k110-c-alien-output-text *,
.k110-c-alien-output-text .k110-bidi-lock {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: inherit !important;
filter: none !important;
mix-blend-mode: normal !important;
background: transparent !important;
}
.k110-c-alien-output-text br {
text-shadow: none !important;
}
.k110-c-pattern-dots {
--pattern-accent: var(--k110-panel-primary, currentColor);
background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pattern-accent) 24%, transparent) 0.75px, transparent 1.08px);
background-size: var(--k110-bar-dot-size, 5px 5px);
background-origin: border-box;
background-clip: border-box;
background-repeat: repeat;
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
}
.k110-c-pattern-grid {
--pattern-accent: var(--k110-panel-primary, currentColor);
--pattern-grid-size: 24px;
background-image:
repeating-linear-gradient(90deg, color-mix(in srgb, var(--pattern-accent) 30%, transparent) 0 var(--k110-panel-line-w), transparent var(--k110-panel-line-w) var(--pattern-grid-size)),
repeating-linear-gradient(0deg, color-mix(in srgb, var(--pattern-accent) 26%, transparent) 0 var(--k110-panel-line-w), transparent var(--k110-panel-line-w) var(--pattern-grid-size));
background-size: var(--pattern-grid-size) var(--pattern-grid-size);
animation: k110PatternGridFlow var(--k110-pattern-flow-speed) linear infinite;
}
.k110-c-output-grid-bg,
.k110-fx-grid-surface {
--grid-accent: var(--k110-panel-primary, currentColor);
--grid-size: 24px;
--grid-line-alpha-x: 30%;
--grid-line-alpha-y: 26%;
--grid-glow-alpha: 16%;
--grid-glow-opacity: 0.34;
--grid-bg: rgba(0,0,0,0.66);
--grid-shadow:
inset 0 0 0 var(--k110-panel-line-w) color-mix(in srgb, var(--grid-accent) 46%, transparent),
inset 0 -24px 48px color-mix(in srgb, var(--grid-accent) 15%, transparent),
0 0 22px color-mix(in srgb, var(--grid-accent) 22%, transparent),
0 0 48px color-mix(in srgb, var(--grid-accent) 9%, transparent);
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--grid-bg) !important;
box-shadow: var(--grid-shadow) !important;
}
.k110-c-output-grid-bg::before,
.k110-c-output-grid-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.k110-c-output-grid-bg::before {
background-image:
repeating-linear-gradient(90deg, color-mix(in srgb, var(--grid-accent) var(--grid-line-alpha-x), transparent) 0 var(--k110-panel-line-w), transparent var(--k110-panel-line-w) var(--grid-size)),
repeating-linear-gradient(0deg, color-mix(in srgb, var(--grid-accent) var(--grid-line-alpha-y), transparent) 0 var(--k110-panel-line-w), transparent var(--k110-panel-line-w) var(--grid-size));
background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
background-position: 0 0, 0 0;
background-repeat: repeat, repeat;
opacity: 1;
animation: k110PatternGridFlow var(--k110-pattern-flow-speed) linear infinite;
will-change: background-position;
}
.k110-c-output-grid-bg::after {
background:
linear-gradient(0deg,
color-mix(in srgb, var(--grid-accent) 28%, transparent) 0%,
color-mix(in srgb, var(--grid-accent) 14%, transparent) 30%,
rgba(0,0,0,0) 72%);
opacity: var(--grid-glow-opacity);
transform: translateY(10%);
}
.k110-c-output-grid-bg > * {
position: relative;
z-index: 1;
}
.k110-c-output-window {
--output-accent: var(--k110-panel-primary, currentColor);
--output-grid-size: var(--grid-size, 24px);
--output-enter-duration: 1280ms;
--output-glow-duration: 1180ms;
--output-pulse-duration: 980ms;
position: relative;
overflow: hidden;
isolation: isolate;
border: 0 !important;
outline: 0 !important;
--grid-accent: var(--output-accent);
--grid-shadow:
inset 0 -24px 48px color-mix(in srgb, var(--grid-accent) 15%, transparent),
0 0 22px color-mix(in srgb, var(--grid-accent) 22%, transparent),
0 0 48px color-mix(in srgb, var(--grid-accent) 9%, transparent);
}
.k110-c-output-window.k110-has-bottom-divider {
--output-divider-color: color-mix(in srgb, var(--output-accent) 58%, transparent);
box-shadow:
var(--grid-shadow),
inset 0 calc(var(--k110-panel-line-w, 1px) * -1) 0 var(--output-divider-color) !important;
}
.k110-c-output-grid-bg.is-output-entering::before {
animation: k110OutputGridDraw var(--output-enter-duration) cubic-bezier(0.14, 0.86, 0.22, 1) both;
}
.k110-c-output-grid-bg.is-output-entering::after {
animation: k110OutputGlowRise calc(var(--output-enter-duration) + 520ms) cubic-bezier(0.32, 0, 0.16, 1) both;
}
.k110-c-output-grid-bg.is-output-text-pulse::after {
animation: k110OutputTextPulse var(--output-pulse-duration) cubic-bezier(0.18, 0.82, 0.24, 1) both;
}
@keyframes k110OutputGridDraw {
0% {
opacity: 0;
clip-path: inset(0 100% 100% 0);
background-position: 0 0, 0 0;
}
46% {
opacity: 0.86;
clip-path: inset(0 0 100% 0);
background-position: 0 0, 0 0;
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
background-position: 0 0, 0 0;
}
}
@keyframes k110OutputGlowRise {
0% {
opacity: 0;
transform: translateY(52%);
}
42% {
opacity: 0;
transform: translateY(52%);
}
100% {
opacity: 0.88;
transform: translateY(0);
}
}
@keyframes k110OutputTextPulse {
0% {
opacity: 0.16;
transform: translateY(24%);
filter: brightness(1);
}
36% {
opacity: 0.96;
transform: translateY(0);
filter: brightness(1.22);
}
100% {
opacity: 0.34;
transform: translateY(10%);
filter: brightness(1);
}
}
.k110-c-pattern-diagonal {
--pattern-accent: var(--k110-panel-primary, currentColor);
--pattern-line-alpha: 18%;
--pattern-line-gap: var(--k110-status-pattern-gap, 4px);
--pattern-tile: calc(var(--pattern-line-gap) * 2) calc(var(--pattern-line-gap) * 2);
background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--pattern-accent) var(--pattern-line-alpha), transparent) 0 var(--k110-panel-line-w), transparent var(--k110-panel-line-w) var(--pattern-line-gap));
background-size: var(--pattern-tile);
background-position: 0 0;
background-repeat: repeat;
animation: k110StatusSlashFlow var(--k110-pattern-flow-speed) linear infinite;
}
.k110-c-terminal-status.k110-c-pattern-diagonal {
--status-pattern-accent: var(--status-accent, var(--k110-panel-primary, currentColor));
--status-pattern-alpha: 16%;
--status-pattern-gap: var(--k110-status-pattern-gap, 4px);
--status-pattern-flow-x: calc(var(--status-pattern-gap) * 6);
--status-pattern-flow-y: calc(var(--status-pattern-gap) * 4);
--status-pattern-image: repeating-linear-gradient(
135deg,
transparent 0 calc(var(--status-pattern-gap) * 1.72),
color-mix(in srgb, var(--status-pattern-accent) var(--status-pattern-alpha), transparent) calc(var(--status-pattern-gap) * 1.72) calc((var(--status-pattern-gap) * 1.72) + var(--k110-panel-line-w, 1px)),
transparent calc((var(--status-pattern-gap) * 1.72) + var(--k110-panel-line-w, 1px)) calc(var(--status-pattern-gap) * 3.44)
);
--status-pattern-size: calc(var(--status-pattern-gap) * 3.44) calc(var(--status-pattern-gap) * 3.44);
--status-pattern-animation: k110StatusPatternTravel var(--k110-pattern-flow-speed, 9s) linear infinite;
background-image: none !important;
background-size: auto !important;
background-position: 0 0 !important;
animation: none !important;
}
.k110-c-terminal-status.k110-c-pattern-dots {
--status-pattern-accent: var(--status-accent, var(--k110-panel-primary, currentColor));
--status-pattern-alpha: 24%;
--status-pattern-gap: var(--k110-status-pattern-gap, 4px);
--status-pattern-flow-x: calc(var(--status-pattern-gap) * 5);
--status-pattern-flow-y: calc(var(--status-pattern-gap) * 3);
--status-pattern-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--status-pattern-accent) var(--status-pattern-alpha), transparent) 0.75px, transparent 1.08px);
--status-pattern-size: var(--k110-bar-dot-size, 5px 5px);
--status-pattern-animation: k110PatternDotFlow var(--k110-pattern-flow-speed, 9s) linear infinite;
background-image: none !important;
background-size: auto !important;
background-position: 0 0 !important;
animation: none !important;
}
.k110-c-terminal-status.k110-c-pattern-none {
--status-pattern-image: none;
--status-pattern-size: auto;
--status-pattern-animation: none;
background-image: none !important;
background-size: auto !important;
background-position: 0 0 !important;
animation: none !important;
}
.k110-c-list-zone {
--list-line-color: color-mix(in srgb, var(--k110-panel-primary, currentColor) 50%, transparent);
--list-row-h: var(--k110-list-row-h, 38px);
position: relative;
box-sizing: border-box;
background-image: repeating-linear-gradient(
to bottom,
transparent 0 calc(var(--list-row-h) - var(--k110-panel-line-w)),
var(--list-line-color) calc(var(--list-row-h) - var(--k110-panel-line-w)) var(--list-row-h)
);
background-position: 0 0;
background-size: 100% var(--list-row-h);
background-clip: padding-box;
}
/* K110 MODULE: PANEL ROW
A panel row owns its side edges. Transparent rows deliberately do not draw
left/right edges and do not impose row-level side clipping; adjacent edged
rows sit above them so their horizontal dividers remain visible. */
.k110-c-panel-row {
--panel-row-line-color: color-mix(in srgb, var(--k110-panel-primary, currentColor) 58%, transparent);
position: relative;
box-sizing: border-box;
min-width: 0;
}
.k110-c-panel-row-edge {
z-index: var(--k110-panel-row-edge-z, 2);
border-left: var(--k110-panel-line-w) solid var(--panel-row-line-color);
border-right: var(--k110-panel-line-w) solid var(--panel-row-line-color);
}
.k110-c-panel-row-transparent {
z-index: var(--k110-panel-row-transparent-z, 1);
border-left-width: 0 !important;
border-right-width: 0 !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
outline-left: 0 !important;
outline-right: 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
.k110-c-panel-row-transparent::before,
.k110-c-panel-row-transparent::after {
border-left: 0 !important;
border-right: 0 !important;
}
.k110-c-panel-row-transparent > * {
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
.k110-c-panel-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--k110-panel-primary, currentColor) transparent;
scrollbar-gutter: stable;
}
.k110-c-panel-scrollbar::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.k110-c-panel-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.k110-c-panel-scrollbar::-webkit-scrollbar-thumb {
min-height: 28px;
border-radius: var(--k110-radius-pill);
background: color-mix(in srgb, var(--k110-panel-primary, currentColor) 72%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--k110-panel-primary, currentColor) 42%, transparent);
}
.k110-c-panel-scrollbar::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
.k110-c-control-slot {
--control-slot-line-color: color-mix(in srgb, var(--k110-panel-primary, currentColor) 58%, transparent);
display: grid;
gap: var(--k110-button-cluster-gap);
padding: var(--k110-button-inset);
border: var(--k110-panel-line-w) solid var(--control-slot-line-color, currentColor);
box-sizing: border-box;
}
.k110-c-control-slot > * {
min-width: 0;
min-height: 0;
}
/* K110 MODULE: PANEL SLOT LINE POLICY
Top and bottom panel slots share the panel edge line. Slot children keep
one gap of inset from that line; buttons never consume the slot padding. */
.k110-c-panel-slot {
position: relative;
margin: 0;
box-sizing: border-box;
border: 0;
overflow: hidden;
}
.k110-c-panel-slot-bottom {
margin-left: calc(var(--k110-panel-line-w, 1px) * -1);
margin-right: calc(var(--k110-panel-line-w, 1px) * -1);
width: calc(100% + (var(--k110-panel-line-w, 1px) * 2));
}
.k110-c-control-slot.k110-c-panel-slot {
border: var(--k110-panel-line-w) solid var(--control-slot-line-color, currentColor);
}
.k110-c-panel-slot > .k110-c-button,
.k110-c-panel-slot > * > .k110-c-button {
width: 100%;
height: 100%;
min-height: 0;
box-sizing: border-box;
}
.k110-c-button-row {
--button-count: 1;
display: grid;
gap: var(--k110-button-cluster-gap);
padding: var(--k110-button-inset);
grid-template-columns: repeat(var(--button-count), minmax(0, 1fr));
box-sizing: border-box;
}
.k110-c-button-row > .k110-c-button {
width: 100%;
min-width: 0;
}
.k110-c-button {
--btn-bg: var(--k110-bg-white);
--btn-fg: var(--k110-bg-black);
--btn-accent: var(--k110-panel-primary, var(--k110-color-green));
--fx-color: var(--btn-accent);
--btn-border: var(--k110-bg-black);
--btn-line-w: var(--k110-button-line-w);
--btn-shadow-x: var(--k110-shadow-hard);
--btn-shadow-y: var(--k110-shadow-hard);
--btn-pad-x: 1em;
--btn-pad-y: 0.7em;
--btn-min-h: 2.75rem;
--btn-cell-inset: var(--k110-button-inset);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: var(--btn-min-h);
padding: var(--btn-pad-y) var(--btn-pad-x);
border: var(--btn-line-w) solid var(--btn-border);
background:
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent) var(--k110-button-fill-alpha), transparent), transparent 58%),
var(--btn-bg);
color: var(--btn-fg);
box-shadow:
inset 0 0 0 var(--btn-line-w) color-mix(in srgb, var(--btn-accent) 28%, transparent),
inset 0 -12px 24px color-mix(in srgb, var(--btn-accent) 14%, transparent),
0 0 8px color-mix(in srgb, var(--btn-accent) var(--k110-button-glow-alpha), transparent),
var(--btn-shadow-x) var(--btn-shadow-y) 0 rgba(0,0,0,0.75);
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
cursor: pointer;
transition:
background var(--k110-motion-fast) ease,
border-color var(--k110-motion-fast) ease,
box-shadow var(--k110-motion-mid) ease,
color var(--k110-motion-fast) ease,
transform 80ms ease;
}
.k110-c-button-row,
.k110-action-row,
.k110-review-choices,
.k110-discover-bottom {
--button-cell-inset: var(--k110-button-inset);
}
.k110-c-button > .k110-c-button__text,
.k110-c-button > .k110-front-text {
position: relative;
z-index: 3;
}
.k110-c-button.is-disabled,
.k110-c-button:disabled {
cursor: default;
opacity: 0.55;
filter: grayscale(0.72);
border-color: #777;
box-shadow: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.78);
}
.k110-c-button.is-selected {
background: var(--btn-accent);
color: var(--k110-bg-black);
}
.k110-c-button:not(:disabled):not(.is-disabled):hover {
background:
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent) var(--k110-button-fill-hover-alpha), transparent), color-mix(in srgb, var(--btn-accent) 12%, transparent) 72%),
var(--btn-bg);
box-shadow:
inset 0 -18px 36px color-mix(in srgb, var(--btn-accent) 22%, transparent),
0 0 14px color-mix(in srgb, var(--btn-accent) var(--k110-button-glow-hover-alpha), transparent),
0 0 32px color-mix(in srgb, var(--btn-accent) 24%, transparent),
var(--btn-shadow-x) var(--btn-shadow-y) 0 rgba(0,0,0,0.75);
}
.k110-c-button:not(:disabled):not(.is-disabled):active,
.k110-c-button.is-pressing {
transform: scale(0.985);
background:
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent) var(--k110-button-fill-active-alpha), white 12%), color-mix(in srgb, var(--btn-accent) 28%, transparent) 78%),
var(--btn-bg);
}
/* K110 MODULE: INDEPENDENT BUTTON
Panel-free square command button. Layout containers own size and position. */
.k110-c-independent-button {
--independent-btn-accent: var(--btn-accent, var(--k110-panel-primary, var(--k110-color-green)));
--btn-accent: var(--independent-btn-accent);
--btn-bg: rgba(0,0,0,0.36);
--btn-fg: color-mix(in srgb, var(--independent-btn-accent) 82%, #fff 18%);
--btn-border: color-mix(in srgb, var(--independent-btn-accent) 72%, transparent);
--btn-line-w: var(--k110-line-1);
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
border-radius: 0 !important;
border: var(--btn-line-w) solid var(--btn-border);
background:
linear-gradient(0deg, color-mix(in srgb, var(--independent-btn-accent) 8%, transparent), transparent 62%),
var(--btn-bg);
color: var(--btn-fg);
box-shadow:
inset 0 -10px 22px color-mix(in srgb, var(--independent-btn-accent) 10%, transparent),
0 0 10px color-mix(in srgb, var(--independent-btn-accent) 14%, transparent);
text-shadow: 0 0 7px color-mix(in srgb, currentColor 30%, transparent);
}
.k110-c-independent-button:not(:disabled):not(.is-disabled):hover,
.k110-c-independent-button.is-active {
background:
linear-gradient(0deg, color-mix(in srgb, var(--independent-btn-accent) 72%, transparent), color-mix(in srgb, var(--independent-btn-accent) 16%, transparent) 78%),
var(--btn-bg);
border-color: var(--independent-btn-accent);
color: #000;
box-shadow:
inset 0 -16px 30px color-mix(in srgb, #fff 14%, transparent),
0 0 15px color-mix(in srgb, var(--independent-btn-accent) 36%, transparent),
0 0 32px color-mix(in srgb, var(--independent-btn-accent) 20%, transparent);
text-shadow: none;
}
.k110-c-independent-button .k110-front-text {
position: relative;
z-index: 3;
}
.k110-c-red-action {
--red-action-color: var(--k110-color-red);
--red-action-size: var(--k110-bar-h, calc(52px * 2 / 3));
--red-action-overlap: var(--k110-line-1);
--red-action-icon-font-size: calc(var(--red-action-size) * 0.78);
--red-action-icon-scale: 1;
--red-action-icon-shift-x: 0px;
--red-action-icon-shift-y: 0px;
--btn-accent: var(--red-action-color);
--btn-bg: var(--k110-bg-black);
--btn-fg: var(--red-action-color);
--btn-border: color-mix(in srgb, var(--red-action-color) 88%, white);
--fx-color: var(--red-action-color);
--fx-burst-color: var(--red-action-color);
--k110-command-fill: var(--red-action-color);
--k110-command-glow-soft: color-mix(in srgb, var(--red-action-color) 24%, transparent);
--k110-command-glow-strong: color-mix(in srgb, var(--red-action-color) 54%, transparent);
position: absolute;
top: calc(-1 * var(--red-action-overlap));
right: calc(-1 * var(--red-action-overlap));
z-index: 8;
width: calc(var(--red-action-size) + var(--red-action-overlap));
height: calc(var(--red-action-size) + var(--red-action-overlap));
aspect-ratio: 1 / 1;
min-width: calc(var(--red-action-size) + var(--red-action-overlap));
min-height: calc(var(--red-action-size) + var(--red-action-overlap));
max-width: calc(var(--red-action-size) + var(--red-action-overlap));
max-height: calc(var(--red-action-size) + var(--red-action-overlap));
padding: 0;
margin: 0;
border: var(--k110-line-1) solid color-mix(in srgb, var(--red-action-color) 88%, white);
border-radius: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
place-items: center;
background: var(--k110-bg-black);
color: var(--red-action-color);
font-size: 0;
line-height: 1;
overflow: hidden;
isolation: isolate;
box-shadow:
inset 0 0 10px color-mix(in srgb, var(--red-action-color) 42%, transparent),
inset 0 0 22px color-mix(in srgb, var(--red-action-color) 18%, transparent);
text-shadow: none;
transform: none;
transition:
background var(--k110-motion-fast) ease,
border-color var(--k110-motion-fast) ease,
color var(--k110-motion-fast) ease,
box-shadow var(--k110-motion-mid) ease,
transform 80ms ease;
}
.k110-c-red-action::before {
content: "";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Sans", "Noto Sans CJK KR", sans-serif;
font-size: var(--red-action-icon-font-size);
font-weight: 900;
line-height: 1;
text-align: center;
font-variant-emoji: text;
transform: translate(var(--red-action-icon-shift-x), var(--red-action-icon-shift-y)) scale(var(--red-action-icon-scale));
transform-origin: 50% 50%;
text-shadow:
0 0 8px color-mix(in srgb, var(--red-action-color) 72%, transparent),
0 0 16px color-mix(in srgb, var(--red-action-color) 48%, transparent);
z-index: 2;
}
.k110-c-red-action.is-cancel {
--red-action-icon-font-size: calc(var(--red-action-size) * 0.58);
--red-action-icon-scale: 1.04;
--red-action-icon-shift-y: -0.015em;
}
.k110-c-red-action.is-cancel::before {
content: "\2715\FE0E";
}
.k110-c-red-action.is-report {
--red-action-icon-font-size: calc(var(--red-action-size) * 0.82);
--red-action-icon-scale: 1.02;
--red-action-icon-shift-y: 0.018em;
}
.k110-c-red-action.is-report::before {
content: "\26A0\FE0E";
}
.k110-c-red-action:hover {
background: var(--red-action-color);
border-color: var(--red-action-color);
color: var(--k110-bg-black);
box-shadow:
0 0 14px color-mix(in srgb, var(--red-action-color) 48%, transparent),
0 0 28px color-mix(in srgb, var(--red-action-color) 24%, transparent);
}
.k110-c-red-action:hover::before {
color: var(--k110-bg-black);
text-shadow: none;
}
.k110-c-red-action:active,
.k110-c-red-action.is-pressing {
transform: scale(0.94);
box-shadow:
0 0 18px color-mix(in srgb, var(--red-action-color) 72%, transparent),
0 0 36px color-mix(in srgb, var(--red-action-color) 36%, transparent),
inset 0 0 16px color-mix(in srgb, var(--red-action-color) 42%, transparent);
}
.k110-c-capsule {
--capsule-accent: var(--k110-color-green);
--capsule-bg: transparent;
--capsule-fg: var(--capsule-accent);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: var(--capsule-min-h, var(--k110-capsule-min-h));
padding: var(--capsule-pad-y, var(--k110-capsule-pad-y)) var(--capsule-pad-x, var(--k110-capsule-pad-x));
border: var(--capsule-line-w, var(--k110-capsule-line-w)) solid var(--capsule-accent);
border-radius: var(--k110-radius-pill);
background: var(--capsule-bg);
color: var(--capsule-fg);
font-size: var(--capsule-font-size, var(--k110-capsule-font-size));
line-height: 1;
white-space: nowrap;
box-sizing: border-box;
}
.k110-c-capsule-text {
font: inherit;
font-size: var(--capsule-font-size, var(--k110-capsule-font-size));
line-height: 1;
letter-spacing: 0;
text-decoration: none;
text-transform: none;
text-shadow: none;
}
.k110-c-capsule-tag {
--capsule-pad-x: var(--k110-capsule-pad-x);
--capsule-pad-y: var(--k110-capsule-pad-y);
--capsule-min-h: var(--k110-capsule-min-h);
cursor: default;
}
.k110-c-capsule-button {
--capsule-pad-x: var(--k110-capsule-button-pad-x);
--capsule-pad-y: 0px;
--capsule-min-h: var(--k110-capsule-button-min-h);
cursor: pointer;
}
.k110-c-capsule.is-active,
.k110-c-capsule.is-locked {
--capsule-bg: var(--capsule-accent);
--capsule-fg: var(--k110-bg-black);
}
/* K110 CAPSULE MODULE TYPES
lockin: persistent locked capsule
lock-switch: lockin capsule plus adjacent round switch control
cycle: mode capsule, momentary fill feedback, text/mode changes persist
copy: copy action capsule
info: static information capsule */
.k110-c-capsule-lockin.is-locked {
--capsule-bg: var(--capsule-accent);
--capsule-fg: var(--k110-bg-black);
}
.k110-c-capsule-info {
cursor: default;
}
.k110-c-capsule-copy {
cursor: pointer;
}
.k110-c-capsule-lock-switch {
cursor: pointer;
}
.k110-c-capsule-cycle {
--capsule-bg: transparent;
--capsule-fg: var(--capsule-accent);
position: relative;
display: inline-grid;
align-items: center;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16, 0.86, 0.32, 1), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.k110-c-capsule-cycle.is-cycling {
animation: none;
}
.k110-c-capsule.is-disabled {
opacity: 0.48;
pointer-events: none;
}
.k110-c-capsule-stack {
--capsule-stack-gap: var(--k110-button-cluster-gap);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--capsule-stack-gap);
min-width: 0;
max-width: 100%;
}
.k110-c-capsule-stack.is-horizontal {
flex-direction: row;
flex-wrap: nowrap;
}
.k110-c-capsule-stack.is-vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.k110-c-capsule-stack .k110-c-capsule {
--capsule-accent: currentColor;
flex: 0 1 auto;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.k110-c-capsule-cluster {
--capsule-height: var(--k110-capsule-button-min-h);
--capsule-switch-size: calc(var(--capsule-height) * 0.86);
--capsule-switch-gap: var(--k110-gap, 2px);
--capsule-switch-accent: var(--capsule-accent, currentColor);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--capsule-switch-gap);
min-width: 0;
max-width: 100%;
color: var(--capsule-accent, currentColor);
}
.k110-c-capsule-cluster.is-switch-left {
flex-direction: row-reverse;
}
.k110-c-capsule-cluster.is-switch-right {
flex-direction: row;
}
.k110-c-capsule-cluster .k110-c-capsule {
--capsule-min-h: var(--capsule-height);
flex: 0 1 auto;
}
.k110-c-capsule[data-k110-capsule-role="label"] {
transition:
width var(--capsule-width-duration, 360ms) cubic-bezier(0.16, 0.86, 0.32, 1),
background-color 160ms ease,
color 160ms ease,
border-color 160ms ease;
will-change: width;
overflow: hidden;
}
.k110-c-capsule-switch-text {
position: relative;
overflow: hidden;
isolation: isolate;
min-height: var(--capsule-height);
height: var(--capsule-height);
display: inline-grid;
align-items: center;
justify-items: center;
transition: width 260ms cubic-bezier(0.16, 0.86, 0.32, 1);
will-change: width;
}
.k110-c-capsule-roll-current,
.k110-c-capsule-roll-prev,
.k110-c-capsule-roll-next {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
overflow: visible;
text-overflow: ellipsis;
white-space: pre;
line-height: 1.18;
padding-block: 1px;
min-height: 100%;
}
.k110-c-capsule-roll-prev,
.k110-c-capsule-roll-next {
position: absolute;
inset: 0 var(--capsule-pad-x, var(--k110-capsule-pad-x));
transform: translateY(0);
pointer-events: none;
}
.k110-c-capsule-cluster.is-capsule-rolling .k110-c-capsule-roll-current,
.k110-c-capsule-cycle.is-capsule-rolling .k110-c-capsule-roll-current {
opacity: 0;
}
.k110-c-capsule-cluster.is-capsule-rolling .k110-c-capsule-roll-prev,
.k110-c-capsule-cycle.is-capsule-rolling .k110-c-capsule-roll-prev {
animation: k110CapsuleTextSlideOut var(--capsule-dial-out-duration, 300ms) cubic-bezier(0.42, 0, 0.2, 1) both;
}
.k110-c-capsule-cluster.is-capsule-rolling .k110-c-capsule-roll-next,
.k110-c-capsule-cycle.is-capsule-rolling .k110-c-capsule-roll-next {
animation: k110CapsuleTextSlideIn var(--capsule-dial-in-duration, 300ms) cubic-bezier(0.18, 0.86, 0.22, 1) both;
animation-delay: var(--capsule-dial-in-delay, 56ms);
}
.k110-c-capsule-roll-char {
display: inline-block;
white-space: pre;
opacity: 0;
transform: translateY(-120%);
}
.k110-c-capsule-cluster.is-capsule-rolling .k110-c-capsule-roll-char,
.k110-c-capsule-cycle.is-capsule-rolling .k110-c-capsule-roll-char {
animation: k110CapsuleCharDialIn 190ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
animation-delay: calc(var(--capsule-char-base-delay, 68ms) + (var(--capsule-char-i, 0) * var(--capsule-char-step, 18ms)));
}
@keyframes k110CapsuleTextSlideOut {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(70%); }
}
@keyframes k110CapsuleTextSlideIn {
0% { opacity: 1; transform: translateY(-118%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes k110CapsuleCharDialIn {
0% { opacity: 0; transform: translateY(-120%); }
100% { opacity: 1; transform: translateY(0); }
}
.k110-c-capsule-switch-control {
--capsule-switch-visual-size: calc(var(--capsule-switch-size) * 0.9);
--capsule-switch-accent: var(--capsule-accent, currentColor);
flex: 0 0 var(--capsule-switch-visual-size);
width: var(--capsule-switch-visual-size);
height: var(--capsule-switch-visual-size);
min-width: var(--capsule-switch-visual-size);
min-height: var(--capsule-switch-visual-size);
padding: 0;
border: var(--k110-capsule-line-w) solid currentColor;
border-radius: 50%;
background: transparent;
color: var(--capsule-accent, currentColor);
display: inline-flex;
align-items: center;
justify-content: center;
font: inherit;
font-size: calc(var(--capsule-switch-visual-size) * 0.74);
font-weight: 900;
line-height: 1;
cursor: pointer;
box-shadow: none;
text-shadow: none;
}
.k110-c-capsule-switch-control > span {
position: relative;
display: inline-block;
width: calc(var(--capsule-switch-visual-size) * 0.58);
height: calc(var(--capsule-switch-visual-size) * 0.58);
color: currentColor;
font-size: 0;
line-height: 0;
background: none;
border: 1px solid currentColor;
border-left-color: transparent;
border-radius: 50%;
box-sizing: border-box;
transform: rotate(-38deg);
}
.k110-c-capsule-switch-control > span::before {
content: "";
position: absolute;
left: -1px;
top: calc(var(--capsule-switch-visual-size) * 0.06);
width: calc(var(--capsule-switch-visual-size) * 0.16);
height: calc(var(--capsule-switch-visual-size) * 0.16);
border-left: 1px solid currentColor;
border-top: 1px solid currentColor;
box-sizing: border-box;
transform: rotate(-8deg);
}
.k110-c-capsule-lock-control {
--capsule-switch-visual-size: calc(var(--capsule-switch-size) * 0.9);
flex: 0 0 var(--capsule-switch-visual-size);
width: var(--capsule-switch-visual-size);
height: var(--capsule-switch-visual-size);
min-width: var(--capsule-switch-visual-size);
min-height: var(--capsule-switch-visual-size);
padding: 0;
border: var(--k110-capsule-line-w) solid var(--capsule-switch-accent);
border-radius: 50%;
background: transparent;
color: var(--capsule-switch-accent);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
cursor: pointer;
box-shadow: none;
text-shadow: none;
}
.k110-c-capsule-lock-control .k110-capsule-lock {
display: block;
width: calc(var(--capsule-switch-visual-size) * 0.52);
height: calc(var(--capsule-switch-visual-size) * 0.52);
color: currentColor;
filter: none;
}
.k110-c-capsule-lock-control.is-icon-only {
border: 0;
background: transparent;
}
.k110-c-capsule-lock-control.is-icon-only:hover,
.k110-c-capsule-lock-control.is-icon-only:active,
.k110-c-capsule-lock-control.is-icon-only.is-pressed {
background: transparent;
color: var(--capsule-switch-accent);
transform: none;
}
.k110-c-capsule-lock-control .k110-capsule-lock::before {
left: 23%;
width: 54%;
height: 54%;
border-width: 1.5px;
border-radius: 999px 999px 0 0;
}
.k110-c-capsule-lock-control .k110-capsule-lock::after {
left: 8%;
width: 84%;
height: 58%;
border-radius: 2px;
}
.k110-c-capsule-lock-control:hover,
.k110-c-capsule-switch-control:hover {
background: var(--capsule-switch-accent);
color: var(--k110-bg-black);
}
.k110-c-capsule-lock-control:hover .k110-capsule-lock {
color: var(--k110-bg-black);
}
.k110-c-capsule-lock-control:active,
.k110-c-capsule-lock-control.is-pressed,
.k110-c-capsule-switch-control:active,
.k110-c-capsule-switch-control.is-pressed {
transform: scale(0.92);
background: var(--capsule-switch-accent);
color: var(--k110-bg-black);
}
/* K110 TEXT FLOW MODULE
Inline text is not clipped by default. Overflow behavior is opt-in and
measured by JS, so short labels never receive fake marquee or masking. */
.k110-c-text-flow {
--text-flow-gap: 1.1em;
--text-flow-duration: 7.2s;
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
overflow: visible;
white-space: nowrap;
box-sizing: border-box;
}
.k110-c-text-flow__track {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
transform: translateX(0);
animation: none;
will-change: transform;
}
.k110-c-text-flow__primary,
.k110-c-text-flow__clone,
.k110-c-text-flow__gap {
flex: 0 0 auto;
}
.k110-c-text-flow:not(.is-overflow) .k110-c-text-flow__track {
max-width: 100%;
}
.k110-c-text-flow.is-overflow {
overflow: hidden;
}
.k110-c-text-flow.is-overflow .k110-c-text-flow__track {
min-width: max-content;
max-width: none;
animation: k110TextFlowMarquee var(--text-flow-duration) linear infinite;
}
@keyframes k110TextFlowMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(calc(var(--text-flow-distance, 100%) * -1)); }
}
.k110-c-terminal-status {
--status-accent: var(--k110-color-green);
--status-bg: var(--k110-bg-black);
--status-fg: var(--status-accent);
--status-pattern-accent: var(--status-accent);
--status-pattern-alpha: 16%;
--status-pattern-gap: 4px;
--status-pattern-flow-x: 8px;
--status-pattern-flow-y: 4px;
--status-pattern-image: none;
--status-pattern-size: auto;
--status-pattern-animation: none;
--status-effect-image: none;
--status-effect-opacity: 0;
--status-effect-animation: none;
--status-font-size: var(--k110-bar-font-size, var(--k110-type-caption));
--status-lines: 1;
--status-line-height: 1.28;
--status-pad-y: 0px;
position: relative;
background: var(--status-bg);
color: var(--status-fg);
border: var(--k110-line-1) solid var(--status-accent);
border-radius: var(--k110-radius-md);
overflow: hidden;
box-sizing: border-box;
font-size: var(--status-font-size);
font-weight: 900;
line-height: var(--status-line-height);
min-height: calc((var(--status-font-size) * var(--status-line-height) * var(--status-lines)) + (var(--status-pad-y) * 2));
}
.k110-c-terminal-status__track,
.k110-c-terminal-status__text,
.k110-c-terminal-status__cursor,
.k110-c-terminal-status__texture {
position: relative;
z-index: 1;
}
.k110-c-font-grid {
--font-grid-accent: rgba(255,255,255,0.42);
--font-grid-baseline: rgba(255,255,255,0.72);
position: relative;
box-sizing: border-box;
}
.k110-c-font-grid__line,
.k110-c-font-grid__baseline,
.k110-c-font-grid__xheight,
.k110-c-font-grid__glyph,
.k110-c-font-grid__meta {
position: absolute;
box-sizing: border-box;
}
.k110-c-font-grid__baseline {
background: var(--font-grid-baseline);
}
/* K110 SECTION CSS-31 MODULE VARIABLE BRIDGES
Existing feature CSS still owns visuals. These variables prepare phased reuse. */
#translatePanel,
.k110-translate-btn {
--btn-accent: var(--k110-color-green);
--capsule-accent: var(--k110-color-green);
--status-accent: var(--k110-color-green);
--fx-color: var(--k110-color-green);
}
#reviewPanel,
.k110-review-btn {
--btn-accent: var(--k110-color-purple);
--capsule-accent: var(--k110-color-purple);
--status-accent: var(--k110-color-purple);
--fx-color: var(--k110-color-purple);
}
#designPanel,
.k110-design-btn {
--btn-accent: var(--k110-color-cyan);
--capsule-accent: var(--k110-color-cyan);
--status-accent: var(--k110-color-cyan);
--font-grid-accent: rgba(0,229,255,0.42);
--font-grid-baseline: rgba(0,229,255,0.72);
--fx-color: var(--k110-color-cyan);
}
#discoverPanel,
.k110-discover-btn {
--btn-accent: var(--k110-color-yellow);
--capsule-accent: var(--k110-color-yellow);
--status-accent: var(--k110-color-yellow);
--font-grid-accent: rgba(255,230,0,0.42);
--font-grid-baseline: rgba(255,255,255,0.72);
--fx-color: var(--k110-color-yellow);
}
@keyframes k110StatusSlashFlow {
0% { background-position: 0 0; }
100% { background-position: var(--status-pattern-flow-x) var(--status-pattern-flow-y); }
}
@keyframes k110StatusPatternTravel {
0% {
background-position: 0 0;
}
100% {
background-position: var(--status-pattern-flow-x) var(--status-pattern-flow-y);
}
}
.k110-vote-up,
.k110-admin-action-green {
--btn-accent: var(--k110-color-green);
--fx-color: var(--k110-color-green);
}
.k110-vote-down,
.k110-report-btn,
.k110-admin-action-red {
--btn-accent: var(--k110-color-red);
--fx-color: var(--k110-color-red);
}
.k110-admin-finaldb-filter,
.k110-admin-action-blue {
--btn-accent: var(--k110-color-cyan);
--fx-color: var(--k110-color-cyan);
}
.k110-admin-action-hold,
.k110-admin-action-ghost {
--btn-accent: var(--k110-bg-white);
--fx-color: var(--k110-bg-white);
}
.k110-review-choices,
.k110-discover-bottom,
.k110-discover-existing-votes,
.k110-global-tab-footer {
gap: var(--k110-button-cluster-gap);
}
.k110-discover-meta-unicode-btn {
--capsule-accent: var(--k110-bg-white);
}
.k110-discover-meta-group-btn,
.k110-review-path-filter {
--capsule-accent: currentColor;
}
/* K110 SECTION CSS-40 COMMON EFFECT MODULES
Shared effect classes are inert until attached beside existing classes. */
.k110-fx-command-burst::after {
content: "";
position: absolute;
inset: calc(var(--fx-inset, 0px) * -1);
pointer-events: none;
border-radius: inherit;
background: radial-gradient(circle, var(--fx-color, currentColor) 0%, rgba(255,255,255,0.24) 28%, transparent 68%);
opacity: 0;
transform: scale(0.78);
z-index: 2;
}
.k110-fx-command-burst.is-command-burst::after {
animation: k110FxCommandBurst var(--fx-duration, 360ms) ease-out;
}
.k110-fx-glow-breathe {
animation: k110FxGlowBreathe var(--fx-duration, 2.8s) ease-in-out infinite;
}
.k110-fx-cursor-blink {
animation: k110FxCursorBlink var(--fx-duration, 0.74s) steps(1, end) infinite;
}
/* K110 EFFECT MODULE: BREATHE
Chosen policy: keep breathe separate from burst and rolling. */
.k110-fx-breathe-vars {
--fx-breathe-duration: var(--k110-breathe-speed, 3.1s);
--fx-breathe-color: var(--k110-command-color, var(--fx-color, currentColor));
--fx-breathe-glow-soft: var(--k110-command-glow-soft, color-mix(in srgb, var(--fx-breathe-color) 22%, transparent));
--fx-breathe-glow-strong: var(--k110-command-glow-strong, color-mix(in srgb, var(--fx-breathe-color) 46%, transparent));
}
.k110-fx-breathe-surface {
animation: k110-ui-glow-breathe var(--fx-breathe-duration, 3.1s) ease-in-out infinite;
}
.k110-fx-breathe-text {
animation: k110-ui-text-breathe var(--fx-breathe-duration, 3.1s) ease-in-out infinite;
}
/* K110 EFFECT MODULE: BURST
Existing command burst variants keep their own drawing rules and share these variables. */
.k110-fx-burst-vars {
--fx-burst-duration: 520ms;
--fx-burst-scale-from: 0.985;
--fx-burst-scale-to: 1.1;
--fx-burst-color: var(--k110-command-fill, var(--fx-color, currentColor));
--fx-burst-glow-soft: var(--k110-command-glow-soft, color-mix(in srgb, var(--fx-burst-color) 22%, transparent));
--fx-burst-glow-strong: var(--k110-command-glow-strong, color-mix(in srgb, var(--fx-burst-color) 54%, transparent));
}
.k110-fx-burst-vars::after {
content: "";
position: absolute;
inset: -1px;
z-index: 0;
pointer-events: none;
border: var(--k110-button-line-w) solid var(--fx-burst-color);
border-radius: inherit;
background: color-mix(in srgb, var(--fx-burst-color) 52%, transparent);
box-shadow:
0 0 18px var(--fx-burst-glow-strong),
0 0 52px var(--fx-burst-glow-soft);
opacity: 0;
}
.k110-fx-burst-vars.is-command-burst::after {
animation: k110FxBurstScale var(--fx-burst-duration) ease-out both;
}
.k110-c-red-action.k110-fx-burst-vars::after {
border-color: var(--red-action-color);
background: color-mix(in srgb, var(--red-action-color) 54%, transparent);
box-shadow:
0 0 18px color-mix(in srgb, var(--red-action-color) 54%, transparent),
0 0 52px color-mix(in srgb, var(--red-action-color) 24%, transparent);
}
/* K110 EVENT MODULE: FOCUS LAYER
Used for guided tutorial moments. It blocks input outside highlighted targets. */
.k110-event-focus-layer {
position: fixed;
inset: 0;
z-index: 12500;
pointer-events: none;
background: rgba(0, 0, 0, 0);
opacity: 0;
transition: opacity 220ms ease, background-color 220ms ease;
}
.k110-event-focus-layer.is-active {
pointer-events: auto;
background: rgba(0, 0, 0, var(--event-focus-opacity, 0.78));
opacity: 1;
}
.k110-event-highlight {
position: relative !important;
z-index: 12501 !important;
}
.k110-event-blocked {
touch-action: none;
}
@keyframes k110FxBurstScale {
0% { transform: scale(var(--fx-burst-scale-from, 0.985)); opacity: 0.72; }
100% { transform: scale(var(--fx-burst-scale-to, 1.1)); opacity: 0; }
}
/* K110 EFFECT MODULE: ROLLING
Rolling is for multi-color glyph/button surfaces, not press feedback. */
.k110-fx-neon-roll-vars,
.k110-fx-neon-roll-text,
.k110-fx-neon-roll-fill {
--k110-neon-roll-duration: var(--k110-neon-roll-speed-3);
}
.k110-fx-neon-speed-1,
[data-neon-speed="1"] { --k110-neon-roll-duration: var(--k110-neon-roll-speed-1); }
.k110-fx-neon-speed-2,
[data-neon-speed="2"] { --k110-neon-roll-duration: var(--k110-neon-roll-speed-2); }
.k110-fx-neon-speed-3,
[data-neon-speed="3"] { --k110-neon-roll-duration: var(--k110-neon-roll-speed-3); }
.k110-fx-neon-speed-4,
[data-neon-speed="4"] { --k110-neon-roll-duration: var(--k110-neon-roll-speed-4); }
.k110-fx-neon-speed-5,
[data-neon-speed="5"] { --k110-neon-roll-duration: var(--k110-neon-roll-speed-5); }
.k110-fx-neon-roll-text {
background-image: var(--k110-neon-roll-gradient);
background-size: 620% 100%;
background-position: 0% 50%;
color: var(--k110-neon-roll-c1);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
filter:
saturate(1.38)
brightness(1.08)
drop-shadow(0 0 7px color-mix(in srgb, var(--k110-neon-roll-c1) 72%, transparent))
drop-shadow(0 0 15px color-mix(in srgb, var(--k110-neon-roll-c2) 40%, transparent))
drop-shadow(0 0 24px color-mix(in srgb, var(--k110-neon-roll-c4) 24%, transparent));
animation: k110FxNeonRollText var(--k110-neon-roll-duration) linear infinite;
}
.k110-fx-neon-roll-fill {
background-image: var(--k110-neon-roll-gradient);
background-size: 620% 100%;
background-position: 0% 50%;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration) linear infinite;
}
@keyframes k110FxNeonRollText {
0% { background-position: 0% 50%; }
100% { background-position: 620% 50%; }
}
@keyframes k110FxNeonRollFill {
0% { background-position: 0% 50%; filter: saturate(1.24) brightness(1); }
50% { filter: saturate(1.42) brightness(1.18); }
100% { background-position: 620% 50%; filter: saturate(1.24) brightness(1); }
}
.k110-fx-rolling-vars {
--fx-roll-duration: 1.22s;
--fx-roll-delay: var(--glyph-roll-delay, 0s);
--fx-roll-size: 620% 100%;
--fx-roll-filter: saturate(1.42) brightness(1.08);
}
.k110-fx-rolling-surface {
background-size: var(--fx-roll-size, 620% 100%);
animation: k110FxRolling var(--fx-roll-duration, 1.22s) linear infinite;
animation-delay: var(--fx-roll-delay, 0s);
}
@keyframes k110FxRolling {
0% { background-position: 0% 50%; filter: var(--fx-roll-filter, saturate(1.42) brightness(1.08)); }
100% { background-position: 500% 50%; filter: var(--fx-roll-filter, saturate(1.42) brightness(1.08)); }
}
@keyframes k110FxCommandBurst {
0% { opacity: 0.86; transform: scale(0.72); filter: blur(0); }
68% { opacity: 0.34; transform: scale(1.18); filter: blur(2px); }
100% { opacity: 0; transform: scale(1.42); filter: blur(6px); }
}
@keyframes k110FxGlowBreathe {
0%, 100% {
box-shadow:
inset 0 -12px 26px color-mix(in srgb, var(--fx-color, currentColor) 30%, transparent),
0 0 8px color-mix(in srgb, var(--fx-color, currentColor) 30%, transparent);
}
50% {
box-shadow:
inset 0 -18px 38px color-mix(in srgb, var(--fx-color, currentColor) 58%, transparent),
0 0 18px color-mix(in srgb, var(--fx-color, currentColor) 52%, transparent);
}
}
@keyframes k110FxCursorBlink {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0; }
}
/* K110 SECTION CSS-50 TRANSLATE PANEL */
#translatePanel {
--k110-panel-primary: #7CFF00;
--k110-translate-action-h: 54px;
/*
* V0.2 요구사항 2-1: 번역 실행 버튼 행 높이.
*
* 값은 CSS-99 의 액션 버튼 1행 높이 권위(`--k110-translate-action-row-h: 52px`)와 같다.
* 실행 버튼도 같은 `.k110-c-button` 이라 새 치수를 추론하지 않으려면 그 값을 써야 한다.
* 이 블록에는 `--k110-translate-action-row-h` 선언이 없어 리터럴로 두고, CSS-99 블록에서
* 변수 참조로 덮어 단일 권위를 유지한다.
*
* 반전 모드에서는 `TranslatePanel.tsx` 가 인라인으로 `0px` 를 대입해 행을 접는다
* (요구사항 8-13). 인라인 커스텀 프로퍼티는 origin 으로 이기므로 이 선언과 아래
* `!important` 선언 전부를 덮는다.
*/
--k110-translate-exec-h: 52px;
--k110-translate-gap-h: calc(var(--k110-button-cluster-gap) * 2);
--k110-translate-status-h: var(--k110-bar-h, calc(52px * 2 / 3));
--k110-translate-main-h: max(180px, calc(var(--k110-panel-frame-h, var(--k110-panel-max-h)) - var(--k110-bar-h, calc(52px * 2 / 3))));
--k110-translate-field-h: clamp(64px, calc((var(--k110-translate-main-h) - var(--k110-translate-action-h) - var(--k110-translate-exec-h) - var(--k110-translate-status-h) - (var(--k110-translate-gap-h) * 2)) / 2), 52svh);
background: transparent;
border: 0;
box-shadow: none;
}
#translatePanel > .k110-panel-bar,
#translatePanel > .k110-panel-main,
#translatePanel > .k110-panel-frame > .k110-panel-bar,
#translatePanel > .k110-panel-frame > .k110-panel-main {
border-left: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.34);
border-right: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.34);
box-shadow:
0 0 18px rgba(124, 255, 0, 0.1),
0 0 42px rgba(124, 255, 0, 0.05);
}
#translatePanel > .k110-panel-bar-top,
#translatePanel > .k110-panel-frame > .k110-panel-bar-top {
border-top: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.42);
}
#translatePanel > .k110-panel-bar-bottom,
#translatePanel > .k110-panel-frame > .k110-panel-bar-bottom {
display: none;
border-bottom: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.34);
}
#translatePanel .k110-panel-main {
padding: 0;
background: rgba(0, 0, 0, 0.58);
position: relative;
display: grid;
grid-template-rows:
var(--k110-translate-gap-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-exec-h)
var(--k110-translate-status-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-gap-h)
var(--k110-translate-action-h);
grid-template-areas:
"translate-gap-top"
"translate-input"
"translate-exec"
"translate-status"
"translate-output"
"translate-gap-bottom"
"translate-actions";
align-content: stretch;
}
#translatePanel .k110-panel-main > .k110-translate-gap-line:first-child {
grid-area: translate-gap-top;
}
#translatePanel .k110-panel-main > .k110-translate-gap-line:not(:first-child) {
grid-area: translate-gap-bottom;
}
#translatePanel .k110-translate-cell-input {
grid-area: translate-input;
}
#translatePanel .k110-translate-cell-output {
grid-area: translate-output;
}
#translatePanel .k110-translate-status-line {
grid-area: translate-status;
}
#translatePanel .k110-action-row {
grid-area: translate-actions;
}
#translatePanel .k110-box {
position: relative;
z-index: 0;
background: rgba(0, 0, 0, 0.34) !important;
border: 0 !important;
border-top: 1px solid rgba(124, 255, 0, 0.42) !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--k110-panel-primary);
overflow: visible;
display: flex;
flex-direction: column;
min-height: 0;
}
#translatePanel.is-direction-switching .k110-translate-cell-input,
#translatePanel.is-direction-switching .k110-translate-cell-output {
visibility: hidden;
animation: none !important;
}
#translatePanel .k110-translate-switch-ghost {
position: absolute;
left: 0;
right: 0;
height: var(--k110-translate-field-h);
z-index: 24;
pointer-events: none;
overflow: hidden;
box-sizing: border-box;
transform: translateY(0);
will-change: transform;
}
#translatePanel .k110-translate-switch-ghost > .k110-box {
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
}
#translatePanel .k110-translate-switch-ghost.is-input {
top: var(--k110-translate-gap-h);
animation: k110TranslateGhostDown 0.66s cubic-bezier(0.42, 0, 0.18, 1) both;
}
/*
* V0.2: 실행 버튼 행(`--k110-translate-exec-h`)이 입력 필드와 상태바 사이에 생겼으므로
* 출력 고스트의 시작 위치와 이동량에 그 높이를 가산한다.
*
* ⚠ 런타임 검증 불가. `src` 전체에서 `.k110-translate-switch-ghost` 와
* `is-direction-switching` 사용처가 0건이라 현재 화면에 영향이 없는 죽은 CSS 다.
* 고스트 전환을 되살리는 후속 작업에서는 반전 모드 전환 순간 `--k110-translate-exec-h` 가
* `0px` 로 바뀌면서 이동 거리가 애니메이션 중에 변하는 문제를 함께 설계해야 한다.
*/
#translatePanel .k110-translate-switch-ghost.is-output {
top: calc(var(--k110-translate-gap-h) + var(--k110-translate-field-h) + var(--k110-translate-exec-h) + var(--k110-translate-status-h));
animation: k110TranslateGhostUp 0.66s cubic-bezier(0.42, 0, 0.18, 1) both;
}
#translatePanel.is-direction-switching .k110-translate-input-wrap:has(#normalInput:placeholder-shown)::before,
#translatePanel.is-direction-switching .k110-translate-placeholder {
opacity: 0.88;
animation: none;
}
@keyframes k110TranslateGhostDown {
0% { transform: translateY(0); }
100% { transform: translateY(calc(var(--k110-translate-field-h) + var(--k110-translate-exec-h) + var(--k110-translate-status-h))); }
}
@keyframes k110TranslateGhostUp {
0% { transform: translateY(0); }
100% { transform: translateY(calc((var(--k110-translate-field-h) + var(--k110-translate-exec-h) + var(--k110-translate-status-h)) * -1)); }
}
#translatePanel .k110-label {
display: none !important;
}
#translatePanel .k110-translate-gap-line {
min-height: var(--k110-translate-gap-h);
height: var(--k110-translate-gap-h);
background: transparent;
border: 0;
pointer-events: none;
position: relative;
z-index: var(--k110-cell-line-z);
box-sizing: border-box;
}
#translatePanel .k110-translate-gap-before-actions {
border-top: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.42);
border-bottom: 0;
box-sizing: border-box;
}
#translatePanel .k110-translate-cell-output + .k110-translate-gap-line {
border-top: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.42);
box-sizing: border-box;
}
#translatePanel .k110-translate-status-line {
--status-accent: var(--k110-panel-primary);
--status-bg: rgba(0,0,0,0.74);
--status-fg: var(--k110-panel-primary);
--pattern-accent: var(--k110-panel-primary);
--k110-bar-side-slot-w: 25%;
--k110-bar-side-slot-gap: var(--k110-button-cluster-gap);
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, calc(100% - var(--k110-bar-side-slot-w) - var(--k110-bar-side-slot-gap))) minmax(0, var(--k110-bar-side-slot-w));
gap: var(--k110-bar-side-slot-gap);
align-items: center;
min-height: var(--k110-translate-status-h);
height: var(--k110-translate-status-h);
padding: 0;
border: 0;
border-top: var(--k110-panel-line-w) solid rgba(124,255,0,0.42);
border-bottom: var(--k110-panel-line-w) solid rgba(124,255,0,0.42);
border-radius: 0;
background-color: rgba(0,0,0,0.74);
color: var(--k110-panel-primary);
box-shadow:
inset 0 -12px 26px rgba(124,255,0,0.08),
0 0 14px rgba(124,255,0,0.08);
box-sizing: border-box;
overflow: hidden;
}
#translatePanel .k110-translate-status-line.k110-c-pattern-diagonal {
background-image: none;
animation: none;
}
#translatePanel .k110-translate-status-text {
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--k110-panel-content-x);
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-caption);
font-weight: 900;
line-height: 1;
text-shadow: 0 0 9px rgba(124,255,0,0.42);
}
#translatePanel .k110-translate-status-text.is-typing::after {
content: "";
display: inline-block;
width: 0.58em;
height: 1.08em;
margin-left: 0.28em;
background: var(--k110-panel-primary);
box-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 58%, transparent),
0 0 18px color-mix(in srgb, var(--k110-panel-primary) 26%, transparent);
animation: k110FxCursorBlink 0.72s steps(1, end) infinite;
flex: 0 0 auto;
}
#translatePanel .k110-translate-switch-btn {
--btn-accent: var(--k110-panel-primary);
--btn-bg: #000;
--btn-fg: var(--k110-panel-primary);
--btn-border: rgba(124, 255, 0, 0.58);
--fx-color: var(--k110-panel-primary);
height: 100%;
min-height: 100%;
border: 0 !important;
border-left: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.42) !important;
background: #000 !important;
color: var(--k110-panel-primary) !important;
box-shadow: none !important;
text-shadow: 0 0 10px rgba(124, 255, 0, 0.34);
gap: 0.42em;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-micro);
font-weight: 900;
transform: none !important;
isolation: isolate;
z-index: 2;
overflow: hidden;
}
#translatePanel .k110-translate-switch-btn::before {
background: #000 !important;
opacity: 1 !important;
}
#translatePanel .k110-translate-switch-btn > * {
position: relative;
z-index: 2;
}
#translatePanel .k110-translate-switch-icon {
display: inline-block;
font-size: 1.12em;
line-height: 1;
}
#translatePanel.is-reverse .k110-translate-switch-icon {
transform: rotate(180deg);
}
#translatePanel .k110-translate-switch-btn:hover {
background:
linear-gradient(0deg, rgba(124, 255, 0, 0.12), rgba(124, 255, 0, 0.04)),
#000 !important;
box-shadow: inset 0 -18px 34px rgba(124, 255, 0, 0.1) !important;
}
.k110-translate-input-wrap {
--k110-breathe-speed: 3.1s;
--k110-command-color: var(--k110-panel-primary);
--k110-command-glow-soft: rgba(124,255,0,0.18);
--k110-command-glow-strong: rgba(124,255,0,0.34);
--k110-command-text-top: color-mix(in srgb, var(--k110-panel-primary) 42%, #000 58%);
--k110-command-text-mid: var(--k110-panel-primary);
--k110-command-text-bottom: color-mix(in srgb, var(--k110-panel-primary) 62%, #fff 38%);
--k110-glow-dim:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color) 64%, transparent),
inset 0 -16px 26px var(--k110-command-glow-soft),
inset 0 -42px 46px color-mix(in srgb, var(--k110-command-glow-soft) 48%, transparent);
--k110-glow-bright:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color) 92%, transparent),
inset 0 -24px 34px var(--k110-command-glow-strong),
inset 0 -58px 62px color-mix(in srgb, var(--k110-command-glow-strong) 48%, transparent);
--k110-glow-dim-filter: 0.92;
--k110-glow-bright-filter: 1.16;
--k110-text-glow-dim:
0 0 7px color-mix(in srgb, var(--k110-command-color) 28%, transparent),
0 0 15px color-mix(in srgb, var(--k110-command-color) 12%, transparent);
--k110-text-glow-bright:
0 0 10px color-mix(in srgb, var(--k110-command-color) 54%, transparent),
0 0 24px color-mix(in srgb, var(--k110-command-color) 24%, transparent);
position: relative;
min-height: var(--k110-translate-field-h);
height: 100%;
background: rgba(0, 0, 0, 0.24);
flex: 1 1 auto;
overflow: hidden;
}
.k110-translate-idle-noise-layer {
position: absolute;
inset: 0;
z-index: 3;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
color: var(--k110-panel-primary);
font-size: var(--k110-type-heading);
font-weight: 900;
line-height: 1.18;
text-align: center;
white-space: pre;
pointer-events: none;
text-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 56%, transparent),
0 0 22px color-mix(in srgb, var(--k110-panel-primary) 28%, transparent);
}
.k110-translate-idle-noise-layer.is-active {
display: flex;
}
#translatePanel #alienOutput > .k110-translate-idle-noise-layer {
color: inherit;
font-size: inherit;
line-height: inherit;
text-align: inherit;
}
#translatePanel.is-reverse .k110-translate-input-wrap.has-idle-noise .k110-translate-placeholder {
opacity: 0;
}
#translatePanel.is-reverse .k110-translate-input-wrap {
--output-accent: var(--k110-panel-primary);
--grid-accent: var(--output-accent);
--grid-size: 24px;
background:
linear-gradient(color-mix(in srgb, var(--grid-accent) 30%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--grid-accent) 26%, transparent) 1px, transparent 1px),
rgba(0, 0, 0, 0.66);
background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%;
background-position: var(--k110-grid-flow-offset, 0px) var(--k110-grid-flow-offset, 0px), var(--k110-grid-flow-offset, 0px) var(--k110-grid-flow-offset, 0px), 0 0;
animation: k110PatternGridFlow var(--k110-pattern-flow-speed) linear infinite;
box-shadow:
inset 0 -24px 48px color-mix(in srgb, var(--grid-accent) 15%, transparent),
0 0 22px color-mix(in srgb, var(--grid-accent) 22%, transparent);
}
#translatePanel.is-reverse .k110-translate-input-wrap:has(#normalInput:placeholder-shown)::before {
opacity: 0.72;
mix-blend-mode: screen;
}
.k110-translate-input-wrap:has(#normalInput:placeholder-shown)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-command-color) 34%, transparent) 0%, color-mix(in srgb, var(--k110-command-color) 18%, transparent) 22%, color-mix(in srgb, var(--k110-command-color) 6%, transparent) 50%, rgba(0, 0, 0, 0) 76%),
#020402;
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
.k110-translate-placeholder {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
/* PBGSPQA-1232: 지시문(첫 줄)과 안내문을 세로로 쌓는다. 넘치면 위부터 채워(safe) 첫 줄이 잘리지 않게 한다.
safe 를 모르는 브라우저는 바로 위 center 로 남는다. */
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
justify-content: safe center;
padding: 16px;
box-sizing: border-box;
color: var(--k110-command-text-mid);
background-image: linear-gradient(180deg, var(--k110-command-text-top) 0%, var(--k110-command-text-mid) 58%, var(--k110-command-text-bottom) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: clamp(32px, min(5vw, 5.4svh), 56px);
font-weight: 900;
line-height: 1.18;
text-align: center;
/* PBGSPQA-1232: 플레이스홀더 문구의 \n(안내문 줄바꿈)을 살린다. */
white-space: pre-line;
pointer-events: none;
transition: opacity 0.14s ease;
animation: k110-ui-text-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
#translatePanel #normalInput:not(:placeholder-shown) + .k110-translate-placeholder,
#translatePanel #normalInput:focus + .k110-translate-placeholder {
opacity: 0;
}
#translatePanel .k110-translate-input-wrap,
#translatePanel #normalInput,
#translatePanel .k110-translate-placeholder {
font-size: var(--k110-type-heading) !important;
line-height: 1.18 !important;
}
#translatePanel #normalInput,
#translatePanel #alienOutput {
border: 0 !important;
min-height: var(--k110-translate-field-h);
height: 100%;
color: inherit;
text-shadow: none;
}
#translatePanel #normalInput {
position: relative;
z-index: 2;
background: transparent !important;
caret-color: var(--k110-panel-primary);
color: var(--k110-panel-primary);
font-weight: 900 !important;
text-align: center !important;
text-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 56%, transparent),
0 0 22px color-mix(in srgb, var(--k110-panel-primary) 28%, transparent);
transition: box-shadow 0.22s ease, background 0.22s ease, font-size 0.24s ease;
}
#translatePanel.is-reverse #normalInput {
color: var(--k110-panel-primary);
text-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 56%, transparent),
0 0 22px color-mix(in srgb, var(--k110-panel-primary) 28%, transparent);
}
#translatePanel #normalInput:focus {
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-panel-primary) 14%, transparent) 0%, color-mix(in srgb, var(--k110-panel-primary) 7%, transparent) 22%, rgba(0, 0, 0, 0) 58%) !important;
box-shadow:
inset 0 -18px 34px color-mix(in srgb, var(--k110-panel-primary) 16%, transparent),
inset 0 -44px 64px color-mix(in srgb, var(--k110-panel-primary) 8%, transparent),
0 0 18px color-mix(in srgb, var(--k110-panel-primary) 14%, transparent);
}
#translatePanel #normalInput::placeholder {
color: transparent;
opacity: 0;
}
#translatePanel #alienOutput {
position: relative;
flex: 1 1 auto;
color: var(--k110-panel-primary);
font-size: var(--k110-translate-output-fit-size, var(--k110-type-heading)) !important;
line-height: 1.18 !important;
overflow: hidden;
white-space: pre-wrap;
word-break: keep-all;
overflow-wrap: anywhere;
text-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 56%, transparent),
0 0 22px color-mix(in srgb, var(--k110-panel-primary) 28%, transparent);
/* Output fit size changes are calculated in JS and must snap; animating font-size reads as lag. */
/* 원본 applyTranslateOutputText 복원: useK110TranslateOutputFit 이 --k110-translate-output-fit-size 를 넣고,
줄바꿈은 원본 인라인과 같은 pre-wrap · keep-all · anywhere 가 맡는다. 프로퍼티가 없으면 heading 24px. */
transition: box-shadow 0.12s ease, background 0.12s ease;
}
#translatePanel.is-reverse #alienOutput {
position: relative;
z-index: 1;
color: var(--k110-panel-primary);
text-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 56%, transparent),
0 0 22px color-mix(in srgb, var(--k110-panel-primary) 28%, transparent);
background: rgba(0, 0, 0, 0.26) !important;
}
#translatePanel.is-reverse .k110-translate-cell-output {
overflow: hidden;
}
#translatePanel.is-reverse .k110-translate-cell-output::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-panel-primary) 20%, transparent) 0%, color-mix(in srgb, var(--k110-panel-primary) 10%, transparent) 28%, rgba(0, 0, 0, 0) 72%);
opacity: 0.72;
animation: k110-ui-glow-breathe 3.1s ease-in-out infinite;
}
#translatePanel.is-reverse #alienOutput.k110-c-output-grid-bg {
background-image: none !important;
animation: none !important;
box-shadow: none !important;
}
#translatePanel.is-reverse #alienOutput.k110-c-output-grid-bg::before,
#translatePanel.is-reverse #alienOutput.k110-c-output-grid-bg::after {
content: none !important;
display: none !important;
animation: none !important;
}
#translatePanel .k110-translate-no-data-warning {
position: absolute;
left: 50%;
top: 50%;
z-index: calc(var(--k110-cell-content-z) + 3);
display: grid;
grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
align-items: center;
gap: var(--k110-button-cluster-gap);
min-width: min(72%, 420px);
padding: 0.36em 0.78em;
border: var(--k110-panel-line-w) solid var(--k110-color-red);
background: rgba(0, 0, 0, 0.82);
color: var(--k110-color-red);
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-caption);
font-weight: 900;
line-height: 1;
letter-spacing: 0;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.96);
box-shadow:
inset 0 -12px 24px rgba(255, 59, 48, 0.18),
0 0 18px rgba(255, 59, 48, 0.34);
transition: opacity var(--k110-motion-mid) ease, transform var(--k110-motion-mid) ease;
}
#translatePanel .k110-translate-no-data-warning:before,
#translatePanel .k110-translate-no-data-warning:after {
content: "";
display: block;
height: 1.1em;
min-width: 0;
background:
repeating-linear-gradient(115deg, transparent 0 7px, rgba(255, 59, 48, 0.86) 7px 10px, transparent 10px 15px);
background-size: 34px 100%;
animation: k110ReviewSlashFlow var(--k110-pattern-flow-speed) linear infinite;
}
#translatePanel .k110-translate-no-data-warning span {
display: block;
color: var(--k110-color-red);
text-shadow:
0 0 7px rgba(255, 59, 48, 0.54),
0 0 18px rgba(255, 59, 48, 0.28);
white-space: nowrap;
}
#translatePanel.is-reverse.is-no-data .k110-translate-no-data-warning {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
#translatePanel #alienOutput.is-translate-noise {
gap: 0;
align-content: center;
white-space: normal;
word-break: keep-all;
font-variant-ligatures: none;
}
.k110-translate-noise-linebox {
display: inline;
max-width: 100%;
white-space: pre-wrap;
word-break: keep-all;
overflow-wrap: anywhere;
text-align: inherit;
letter-spacing: var(--k110-noise-track, 0px);
}
.k110-translate-noise-slot {
position: relative;
display: inline-block;
line-height: 1;
vertical-align: baseline;
white-space: pre;
margin-inline: calc(var(--k110-noise-track, 0px) * 0.18);
}
.k110-translate-noise-measure {
opacity: 0;
pointer-events: none;
}
.k110-translate-noise-glyph {
position: absolute;
left: 50%;
top: 50%;
line-height: 1;
transform: translate(-50%, calc(-50% + var(--k110-noise-y, 0px)));
color: inherit;
text-shadow: inherit;
pointer-events: none;
}
.k110-hero-line.is-translate-noise {
white-space: nowrap;
overflow: visible;
}
.k110-hero-line.is-translate-noise .k110-translate-noise-linebox {
display: inline-block;
white-space: nowrap;
overflow: visible;
}
#translatePanel .k110-action-row {
--control-slot-line-color: rgba(124, 255, 0, 0.42);
flex: 0 0 auto;
grid-template-columns: repeat(var(--k110-translate-action-cols), minmax(0, 1fr));
margin: 0;
padding: var(--k110-gap, 2px);
gap: var(--k110-gap, 2px);
border: var(--k110-panel-line-w) solid var(--control-slot-line-color);
background: transparent;
box-sizing: border-box;
overflow: hidden;
}
/* V0.2 요구사항 2-14: 번역 실행 버튼(`#runTranslateBtn`)이 결과 액션바 버튼과 같은
시각 표현을 갖도록 선택자 목록에 추가한다. 실행 버튼은 결과 액션바 밖 단독 그리드
아이템이라 `.k110-action-row` 자손 선택자에 걸리지 않고, 액션바 버튼에는 빌려올
클래스 토큰이 없어 구조 선택자만 존재한다. 새 규칙 블록을 만들지 않고 이 규칙과
아래 hover·active·disabled 세 규칙에 선택자만 더한다(Constraints 1 예외 2). */
#translatePanel .k110-action-row button:not(.k110-c-capsule),
#translatePanel .k110-translate-run-btn {
min-height: 0;
height: 100%;
box-sizing: border-box;
white-space: nowrap;
border: var(--k110-button-line-w) solid color-mix(in srgb, var(--k110-panel-primary) 64%, transparent) !important;
background: rgba(0, 0, 0, 0.18) !important;
color: var(--k110-panel-primary) !important;
box-shadow: none !important;
text-shadow: 0 0 10px color-mix(in srgb, var(--k110-panel-primary) 34%, transparent);
transform: none !important;
}
#translatePanel #randomizeBtn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--k110-motion-fast) ease, color var(--k110-motion-fast) ease, box-shadow var(--k110-motion-mid) ease !important;
}
#translatePanel .k110-translate-shuffle-group {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--k110-button-cluster-gap);
min-width: 0;
max-width: 100%;
}
#translatePanel .k110-action-row button:not(.k110-c-capsule):hover,
#translatePanel .k110-translate-run-btn:hover {
background: color-mix(in srgb, var(--k110-panel-primary) 12%, transparent) !important;
box-shadow: inset 0 -18px 34px color-mix(in srgb, var(--k110-panel-primary) 10%, transparent) !important;
}
#translatePanel .k110-action-row button:not(.k110-c-capsule):active,
#translatePanel .k110-translate-run-btn:active {
background: color-mix(in srgb, var(--k110-panel-primary) 22%, transparent) !important;
box-shadow:
inset 0 0 0 2px color-mix(in srgb, var(--k110-panel-primary) 72%, transparent),
0 0 18px color-mix(in srgb, var(--k110-panel-primary) 26%, transparent) !important;
}
#translatePanel .k110-action-row button:not(.k110-c-capsule):disabled,
#translatePanel .k110-translate-run-btn:disabled {
color: color-mix(in srgb, var(--k110-panel-primary) 30%, #555 70%) !important;
background: rgba(0, 0, 0, 0.26) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
text-shadow: none;
}
#translatePanel .k110-action-row button.is-translate-action-ready:not(:disabled) {
--k110-breathe-speed: 3.1s;
--k110-command-color: var(--k110-panel-primary);
--k110-command-glow-soft: rgba(124,255,0,0.18);
--k110-command-glow-strong: rgba(124,255,0,0.34);
--k110-glow-dim:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color) 64%, transparent),
inset 0 -16px 26px var(--k110-command-glow-soft),
inset 0 -42px 46px color-mix(in srgb, var(--k110-command-glow-soft) 48%, transparent);
--k110-glow-bright:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color) 92%, transparent),
inset 0 -24px 34px var(--k110-command-glow-strong),
inset 0 -58px 62px color-mix(in srgb, var(--k110-command-glow-strong) 48%, transparent);
--k110-glow-dim-filter: 0.92;
--k110-glow-bright-filter: 1.16;
--k110-text-glow-dim:
0 0 7px color-mix(in srgb, var(--k110-command-color) 28%, transparent),
0 0 15px color-mix(in srgb, var(--k110-command-color) 12%, transparent);
--k110-text-glow-bright:
0 0 10px color-mix(in srgb, var(--k110-command-color) 54%, transparent),
0 0 24px color-mix(in srgb, var(--k110-command-color) 24%, transparent);
background: rgba(0, 0, 0, 0.2) !important;
color: var(--k110-panel-primary) !important;
animation: k110-ui-glow-breathe var(--k110-breathe-speed) ease-in-out infinite;
}
#translatePanel .k110-action-row button.is-translate-action-ready:not(:disabled) .k110-translate-shuffle-label {
text-shadow: var(--k110-text-glow-dim);
animation-name: k110-ui-text-breathe;
animation-duration: var(--k110-breathe-speed);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#translatePanel #copyTranslateBtn.is-translate-action-ready:not(:disabled) {
text-shadow: var(--k110-text-glow-bright);
}
#translatePanel .k110-panel-bar-bottom {
display: none;
}
#reviewPanel .k110-action-row {
grid-template-columns: 1fr 1fr minmax(88px, 0.72fr);
}
.k110-review-category {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 28px;
margin: -4px 0 12px 0;
padding: 4px 10px;
border: 2px solid #000;
border-radius: 8px;
background: #7CFF00;
color: #000;
font-size: clamp(11px, 1.1vw, 14px);
font-weight: 900;
line-height: 1.1;
}
.k110-review-category.is-updown { background: #7CFF00; }
.k110-review-category.is-vs { background: #00E5FF; }
.k110-review-category.is-multi { background: #FFEE00; }
.k110-review-choices {
display: none;
gap: 10px;
margin: 12px 0 0 0;
}
.k110-review-card.is-vs .k110-review-choices,
.k110-review-card.is-multi .k110-review-choices {
display: grid;
}
.k110-review-card.is-vs .k110-review-choices {
grid-template-columns: 1fr 1fr;
}
.k110-review-card.is-multi .k110-review-choices {
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.k110-review-card.is-vs .k110-action-row,
.k110-review-card.is-multi .k110-action-row {
display: grid;
max-height: 0;
min-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
padding-top: 0;
padding-bottom: 0;
border-top-color: rgba(180,92,255,0);
}
.k110-review-option {
min-height: clamp(76px, 8.5vw, 118px);
border: 3px solid #000;
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 6px 6px 0 #000;
font-size: clamp(28px, 4.8vw, 58px);
font-weight: 900;
line-height: 1.05;
padding: 10px;
cursor: pointer;
word-break: break-all;
transition: transform 0.08s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.k110-review-option:active,
.k110-review-option.is-picked {
transform: translate(4px, 4px);
background: #7CFF00;
box-shadow: 2px 2px 0 #000;
}
.k110-report-btn:not(.k110-c-red-action) {
background: #ff3b30 !important;
color: #fff !important;
}
.k110-review-report-pop {
position: absolute;
z-index: 45;
right: 20px;
bottom: 76px;
width: min(320px, calc(100% - 40px));
padding: 0;
border: 1px solid rgba(255,59,48,0.92);
border-radius: 0;
background: rgba(0,0,0,0.88);
box-shadow:
0 0 18px rgba(255,59,48,0.28),
0 0 42px rgba(255,59,48,0.12);
box-sizing: border-box;
overflow: hidden;
}
.k110-review-report-bar {
position: relative;
min-height: 34px;
display: flex;
align-items: center;
padding: 0 12px;
color: #FF3B30;
font-size: 14px;
font-weight: 900;
line-height: 1;
border-bottom: 1px solid rgba(255,59,48,0.72);
background:
radial-gradient(circle at 50% 50%, rgba(255,59,48,0.32) 0.75px, transparent 1.05px);
background-size: 5px 5px;
text-shadow: 0 0 10px rgba(255,59,48,0.7);
}
.k110-review-report-body {
padding: 12px;
}
.k110-review-report-pop select {
width: 100%;
min-height: 42px;
border: 1px solid rgba(255,59,48,0.76);
border-radius: 0;
padding: 0 34px 0 10px;
font-weight: 900;
font-size: 14px;
background:
linear-gradient(0deg, rgba(255,59,48,0.18), rgba(0,0,0,0) 68%),
#060000;
color: #FF3B30;
outline: none;
box-shadow:
inset 0 -12px 20px rgba(255,59,48,0.12),
0 0 12px rgba(255,59,48,0.16);
appearance: none;
-webkit-appearance: none;
}
.k110-review-report-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
margin-top: 10px;
}
.k110-review-report-actions button {
--btn-accent: #FF3B30;
--fx-color: #FF3B30;
--fx-burst-color: #FF3B30;
--k110-command-fill: #FF3B30;
min-height: 40px;
border: 1px solid rgba(255,59,48,0.82);
border-radius: 0;
font-weight: 900;
background: #000;
color: #FF3B30;
text-shadow: 0 0 8px rgba(255,59,48,0.36);
}
.k110-review-report-actions button:last-child {
background: #FF3B30;
color: #000;
text-shadow: none;
box-shadow: 0 0 18px rgba(255,59,48,0.34);
}
.k110-action-row button {
min-height: 52px;
font-size: 16px;
}
#k110GlobalTabFooter {
--k110-feature-cols: 3;
}
#k110FeatureButtons {
--k110-feature-cols: 2;
}
.k110-subnav {
--k110-feature-cols: 2;
}
.k110-feature-buttons,
.k110-subnav {
width: 100%;
margin-top: 22px;
display: grid;
grid-template-columns: repeat(var(--k110-feature-cols, 4), minmax(0, 1fr));
gap: 2px;
align-items: center;
position: relative;
overflow: visible;
}
.k110-feature-btn,
.k110-back-btn {
width: 100%;
min-width: 0;
min-height: 48px;
padding: 12px 10px;
font-size: 15px;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
line-height: 1.12;
}
.k110-feature-btn,
.k110-back-btn,
.k110-translate-btn {
--k110-feature-color: #7CFF00;
--k110-feature-fill: #7CFF00;
--k110-feature-glow-soft: rgba(124, 255, 0, 0.16);
--k110-feature-glow-strong: rgba(124, 255, 0, 0.34);
position: relative;
isolation: isolate;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--k110-feature-color) !important;
box-shadow: none !important;
text-shadow:
0 0 5px var(--k110-feature-glow-strong),
0 0 14px var(--k110-feature-glow-soft);
clip-path: polygon(var(--k110-tab-cut-size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--k110-tab-cut-size));
transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease !important;
}
.k110-feature-btn::before,
.k110-back-btn::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: calc(100% + 120svh);
z-index: -2;
background:
linear-gradient(var(--k110-feature-color), var(--k110-feature-color)) top 0 left var(--k110-tab-cut-size) / calc(100% - var(--k110-tab-cut-size)) var(--k110-tab-line-w) no-repeat,
linear-gradient(135deg,
transparent 0 calc(var(--k110-tab-diagonal-center) - (var(--k110-tab-diagonal-line-w) * 0.5)),
var(--k110-feature-color) calc(var(--k110-tab-diagonal-center) - (var(--k110-tab-diagonal-line-w) * 0.5)) calc(var(--k110-tab-diagonal-center) + (var(--k110-tab-diagonal-line-w) * 0.5)),
transparent calc(var(--k110-tab-diagonal-center) + (var(--k110-tab-diagonal-line-w) * 0.5))
) top 0 left 0 / var(--k110-tab-cut-size) var(--k110-tab-cut-size) no-repeat,
linear-gradient(var(--k110-feature-color), var(--k110-feature-color)) top var(--k110-tab-cut-size) left 0 / var(--k110-tab-line-w) calc(100% - var(--k110-tab-cut-size)) no-repeat,
linear-gradient(var(--k110-feature-color), var(--k110-feature-color)) top 0 right 0 / var(--k110-tab-line-w) 100% no-repeat;
filter: drop-shadow(0 0 5px var(--k110-feature-glow-strong));
clip-path: none;
pointer-events: none;
}
/* K110 SECTION CSS-40 TAB FOOTER AND TAB TRANSITION */
.k110-feature-btn::after,
.k110-back-btn::after {
content: "";
position: absolute;
left: 1px;
right: 1px;
top: 1px;
height: calc(100% + 120svh);
z-index: -1;
background:
linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)) top / 100% calc(100% - 120svh) no-repeat,
linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--k110-feature-glow-soft) 12%, var(--k110-feature-glow-strong) 28%, var(--k110-feature-glow-soft) 48%, rgba(0,0,0,0) 82%) 0 calc(100% - 120svh) / 100% 120svh no-repeat;
clip-path: polygon(calc(var(--k110-tab-cut-size) - var(--k110-tab-line-w)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--k110-tab-cut-size) - var(--k110-tab-line-w)));
pointer-events: none;
transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.k110-feature-btn:hover,
.k110-back-btn:hover,
.k110-feature-btn.is-tab-active,
.k110-back-btn.is-tab-active {
background: var(--k110-feature-fill) !important;
color: #000 !important;
text-shadow: none;
box-shadow:
inset 0 0 22px rgba(255, 255, 255, 0.18),
0 0 16px var(--k110-feature-glow-strong),
0 0 34px var(--k110-feature-glow-soft) !important;
}
.k110-feature-btn:hover::after,
.k110-back-btn:hover::after,
.k110-feature-btn.is-tab-active::after,
.k110-back-btn.is-tab-active::after {
background:
linear-gradient(var(--k110-feature-fill), var(--k110-feature-fill)) top / 100% calc(100% - 120svh) no-repeat,
linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--k110-feature-glow-soft) 10%, var(--k110-feature-glow-strong) 28%, var(--k110-feature-glow-soft) 48%, rgba(0,0,0,0) 82%) 0 calc(100% - 120svh) / 100% 120svh no-repeat;
box-shadow:
inset 0 0 18px rgba(255, 255, 255, 0.18),
inset 0 0 28px var(--k110-feature-glow-soft);
}
.k110-feature-btn:active,
.k110-back-btn:active {
background: var(--k110-feature-fill) !important;
color: #000 !important;
transform: scale(0.985) !important;
text-shadow: none;
box-shadow:
inset 0 0 0 1px var(--k110-feature-color),
inset 0 0 24px rgba(255, 255, 255, 0.16),
0 0 22px var(--k110-feature-glow-strong),
0 0 46px var(--k110-feature-glow-soft) !important;
}
.k110-review-btn {
--k110-feature-color: #b45cff;
--k110-feature-fill: #b45cff;
--k110-feature-glow-soft: rgba(180, 92, 255, 0.16);
--k110-feature-glow-strong: rgba(180, 92, 255, 0.34);
}
.k110-design-btn {
--k110-feature-color: #00e5ff;
--k110-feature-fill: #00e5ff;
--k110-feature-glow-soft: rgba(0, 229, 255, 0.16);
--k110-feature-glow-strong: rgba(0, 229, 255, 0.34);
}
.k110-discover-btn {
--k110-feature-color: #FFEE00;
--k110-feature-fill: #FFEE00;
--k110-feature-glow-soft: rgba(255, 238, 0, 0.16);
--k110-feature-glow-strong: rgba(255, 238, 0, 0.34);
}
.k110-back-btn {
--k110-feature-color: #7CFF00;
--k110-feature-fill: #7CFF00;
--k110-feature-glow-soft: rgba(124, 255, 0, 0.16);
--k110-feature-glow-strong: rgba(124, 255, 0, 0.34);
}
@keyframes k110TabPanelExitLeft {
0% { transform: translate3d(0, 0, 0); opacity: 1; }
100% { transform: translate3d(-42vw, 0, 0); opacity: 0; }
}
@keyframes k110TabPanelArrive {
0% { opacity: 0; transform: translate3d(0, 14px, 0); }
58% { opacity: 0.82; transform: translate3d(0, 4px, 0); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1); }
}
@keyframes k110TabPanelContentFill {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes k110TabGhostLineDraw {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes k110TabButtonDrop {
0% { transform: translateY(0) scale(1); opacity: 1; }
24% { transform: translateY(-10px) scale(1.035); opacity: 1; }
100% { transform: translateY(80px) scale(0.92); opacity: 0; }
}
/* Core tab rule: tab buttons stay fixed in the same slots. On button-triggered tab switches, slide only panel content, never the footer tab button container. */
.k110-panel.is-tab-exiting {
animation: none !important;
pointer-events: none;
}
.k110-panel.is-tab-exiting > :not(.k110-feature-buttons):not(.k110-subnav) {
animation: k110TabPanelExitLeft 0.28s cubic-bezier(0.62, 0, 1, 0.36) forwards !important;
}
.k110-panel.is-tab-arriving {
transform-origin: 50% 0;
animation: none !important;
}
.k110-panel.is-tab-arriving > .k110-panel-main,
.k110-panel.is-tab-arriving > .k110-feature-buttons,
.k110-panel.is-tab-arriving > .k110-subnav {
animation: none !important;
}
.k110-feature-btn.is-tab-falling,
.k110-back-btn.is-tab-falling {
animation: k110TabButtonDrop 0.36s cubic-bezier(0.16, 0.84, 0.2, 1) forwards !important;
pointer-events: none;
position: relative;
z-index: 17002;
}
.k110-tab-transition-ghost {
position: fixed;
z-index: 17000;
pointer-events: none;
background: var(--k110-tab-ghost-color, #7CFF00);
color: var(--k110-tab-ghost-color, #7CFF00);
border: var(--k110-transition-line-w, 0.5px) solid transparent !important;
box-sizing: border-box;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
opacity: 1;
overflow: hidden;
transition:
left 0.36s cubic-bezier(0.16, 0.86, 0.32, 1),
top 0.36s cubic-bezier(0.16, 0.86, 0.32, 1),
right 0.42s cubic-bezier(0.16, 0.86, 0.32, 1),
bottom 0.42s cubic-bezier(0.16, 0.86, 0.32, 1),
background-color 0.18s ease,
border-color 0.16s ease,
opacity 0.24s ease;
}
.k110-tab-transition-ghost::before {
content: "";
position: absolute;
inset: 0;
display: none;
opacity: 0;
background-image:
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--k110-tab-ghost-color, #7CFF00) 40%, transparent) 0.72px, transparent 1.06px);
background-size: 5px 5px;
pointer-events: none;
transition: opacity 0.22s ease;
}
.k110-tab-transition-ghost.is-rising {
background-color: var(--k110-tab-ghost-color, #7CFF00);
}
.k110-tab-transition-ghost.is-outlined,
.k110-tab-transition-ghost.is-expanding,
.k110-tab-transition-ghost.is-drawing {
background-color: rgba(0, 0, 0, 0.02);
border-color: currentColor !important;
box-shadow: none !important;
filter: none !important;
}
.k110-tab-transition-ghost.is-pattern-ready::before {
opacity: 0;
}
.k110-tab-transition-ghost.is-finishing {
opacity: 1;
}
.k110-tab-transition-ghost.is-revealing-panel {
opacity: 0;
transition:
left 0.36s cubic-bezier(0.16, 0.86, 0.32, 1),
top 0.36s cubic-bezier(0.16, 0.86, 0.32, 1),
right 0.42s cubic-bezier(0.16, 0.86, 0.32, 1),
bottom 0.42s cubic-bezier(0.16, 0.86, 0.32, 1),
opacity 0.16s ease;
}
.k110-tab-transition-full-wipe {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
clip-path: inset(0 0 100% 0);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--k110-tab-ghost-color, #7CFF00) 13%, rgba(0, 0, 0, 0.94)) 0%,
rgba(0, 0, 0, 0.9) 44%,
color-mix(in srgb, var(--k110-tab-ghost-color, #7CFF00) 9%, rgba(0, 0, 0, 0.94)) 100%
);
}
.k110-tab-transition-ghost.is-panel-wipe .k110-tab-transition-full-wipe {
animation: k110TabGhostFullPanelWipe 0.34s cubic-bezier(0.16, 0.86, 0.32, 1) both;
}
@keyframes k110TabGhostFullPanelWipe {
0% {
opacity: 0.84;
clip-path: inset(0 0 100% 0);
}
100% {
opacity: 0.86;
clip-path: inset(0 0 0 0);
}
}
.k110-tab-transition-pattern {
position: absolute;
left: var(--pattern-left, 0);
top: var(--pattern-top, 0);
width: var(--pattern-width, 0);
height: var(--pattern-height, 0);
opacity: 0;
pointer-events: none;
z-index: 1;
background-image:
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--k110-tab-ghost-color, #7CFF00) 44%, transparent) 0.7px, transparent 1.08px);
background-size: 5px 5px;
transition: opacity 0.28s ease;
animation: k110PatternDotFlow var(--k110-pattern-flow-speed, 9s) linear infinite;
}
.k110-tab-transition-ghost.is-pattern-ready .k110-tab-transition-pattern {
opacity: 0.52;
transition-delay: var(--pattern-delay, 0.08s);
}
.k110-tab-transition-ghost-line {
position: absolute;
left: var(--line-left, 0%);
top: var(--line-top, 0%);
width: var(--line-width, 100%);
height: var(--k110-transition-line-w, 0.5px) !important;
background: currentColor;
min-height: 0 !important;
opacity: 0;
transform: scaleX(0);
transform-origin: 0 50%;
z-index: 2;
box-shadow: none !important;
filter: none !important;
}
.k110-tab-transition-ghost-line.is-vertical {
width: var(--k110-transition-line-w, 0.5px) !important;
min-width: 0 !important;
height: var(--line-height, 100%);
transform: scaleY(0);
transform-origin: 50% 0;
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-line {
animation: k110TabGhostLineDraw var(--line-duration, 0.14s) linear both;
animation-delay: var(--line-delay, 0.08s);
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-line.is-vertical {
animation-name: k110TabGhostLineDrawY;
}
@keyframes k110TabGhostLineDrawY {
0% {
opacity: 0;
transform: scaleY(0);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
.k110-tab-transition-ghost-text,
.k110-tab-transition-ghost-label {
position: absolute;
left: var(--text-left, 12px);
top: var(--text-top, 8px);
width: var(--text-width, calc(100% - 24px));
height: var(--text-height, auto);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
overflow: hidden;
white-space: nowrap;
color: var(--k110-tab-ghost-color, #7CFF00);
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--text-size, clamp(11px, 1vw, 14px));
font-weight: 900;
line-height: var(--text-line-height, 1.08);
text-shadow: none;
filter: none;
opacity: 0;
clip-path: inset(0 100% 0 0);
z-index: 3;
}
.k110-tab-transition-ghost-text {
animation-delay: var(--text-delay, 0.08s);
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-text {
animation: k110TabGhostTextType 0.24s steps(16, end) both;
animation-delay: var(--text-delay, 0.08s);
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-label {
animation: k110TabGhostTextType 0.24s steps(16, end) 0.06s both;
}
.k110-tab-transition-ghost-capsule {
position: absolute;
left: var(--capsule-left, 0);
top: var(--capsule-top, 0);
width: var(--capsule-width, auto);
height: var(--capsule-height, auto);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--capsule-pad-x, 8px);
border: var(--k110-transition-line-w, 0.5px) solid currentColor;
border-radius: var(--capsule-radius, 999px);
color: currentColor;
background: transparent;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--capsule-size, var(--k110-type-micro));
font-weight: var(--capsule-weight, 300);
line-height: var(--capsule-line-height, 1);
white-space: nowrap;
text-shadow: none;
filter: none;
opacity: 0;
overflow: hidden;
clip-path: inset(0 100% 0 0);
z-index: 4;
}
.k110-tab-transition-ghost-capsule > span {
display: inline-block;
opacity: 0;
clip-path: inset(0 100% 0 0);
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-capsule {
animation: k110TabGhostCapsuleWipe 0.2s ease-out both;
animation-delay: var(--capsule-delay, 0.68s);
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-capsule > span {
animation: k110TabGhostTextType 0.2s steps(12, end) both;
animation-delay: calc(var(--capsule-delay, 0.68s) + 0.1s);
}
@keyframes k110TabGhostCapsuleWipe {
0% { opacity: 1; clip-path: inset(0 100% 0 0); }
100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes k110TabGhostTextType {
0% { opacity: 1; clip-path: inset(0 100% 0 0); }
100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* K110 TRANSITION: render one full-panel wipe only. Real panel content owns text/capsule reveal. */
.k110-tab-transition-ghost .k110-tab-transition-ghost-text,
.k110-tab-transition-ghost .k110-tab-transition-ghost-label,
.k110-tab-transition-ghost .k110-tab-transition-ghost-capsule {
display: none !important;
animation: none !important;
}
.k110-tab-transition-ghost .k110-tab-transition-pattern,
.k110-tab-transition-ghost .k110-tab-transition-ghost-line {
opacity: 0;
transform: none !important;
clip-path: inset(0 0 100% 0);
transition: none !important;
animation: none !important;
will-change: clip-path, opacity;
}
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-line,
.k110-tab-transition-ghost.is-drawing .k110-tab-transition-ghost-line.is-vertical {
opacity: 0;
transform: none !important;
animation: none !important;
}
.k110-tab-transition-ghost.is-pattern-ready .k110-tab-transition-pattern {
opacity: 0;
transition-delay: 0s;
}
.k110-tab-transition-ghost.is-panel-wipe .k110-tab-transition-pattern,
.k110-tab-transition-ghost.is-panel-wipe .k110-tab-transition-ghost-line,
.k110-tab-transition-ghost.is-panel-wipe .k110-tab-transition-ghost-line.is-vertical {
opacity: 1 !important;
transform: none !important;
clip-path: inset(0 0 0 0);
animation: k110TabGhostFullChildWipe var(--wipe-duration, 0.3s) cubic-bezier(0.16, 0.86, 0.32, 1) both !important;
animation-delay: var(--wipe-delay, 0s) !important;
}
@keyframes k110TabGhostFullChildWipe {
0% {
opacity: 0.95;
clip-path: inset(0 0 100% 0);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
}
.k110-vote-btn {
min-height: 64px !important;
border-radius: 16px !important;
font-size: 22px !important;
}
.k110-vote-up { background: #7CFF00 !important; }
.k110-vote-down { background: #FF3B30 !important; color: #fff !important; }
.k110-emoji { display: inline-block; }
.k110-review-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.k110-review-label {
font-size: 12px;
font-weight: 900;
margin-bottom: 8px;
}
.k110-review-word {
position: relative;
overflow-x: hidden;
overflow-y: auto;
height: clamp(140px, 17vh, 190px);
min-height: 140px;
max-height: 190px;
border: 3px solid #000;
background: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: clamp(24px, 3vw, 38px);
font-weight: 900;
padding: 18px;
box-sizing: border-box;
word-break: break-all;
white-space: pre-wrap;
}
.k110-review-word.is-loading {
overflow: hidden;
}
.k110-review-word.is-loading .k110-inner-text {
min-height: 1.25em;
}
#reviewAlien {
padding-bottom: 42px;
}
.k110-inner-text { display: inline-block; width: 100%; }
.k110-review-contributor {
position: absolute;
left: var(--k110-panel-content-x);
right: var(--k110-panel-content-x);
bottom: 12px;
color: #0b7f00;
font-size: clamp(11px, 1.3vw, 14px);
line-height: 1.25;
font-weight: 900;
letter-spacing: 0;
opacity: 0.82;
pointer-events: none;
}
#reviewCard .k110-review-word.k110-review-boom-up,
#reviewCard .k110-review-word.k110-review-boom-down {
isolation: isolate;
overflow: hidden;
contain: paint;
}
#reviewCard .k110-review-word.k110-review-boom-up::after,
#reviewCard .k110-review-word.k110-review-boom-down::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
#reviewCard .k110-review-word.k110-review-boom-up::after {
top: -12%;
bottom: -28%;
background:
linear-gradient(0deg,
rgba(255,255,255,0.98) 0%,
rgba(250,242,255,0.94) 14%,
rgba(235,210,255,0.86) 28%,
rgba(212,152,255,0.72) 46%,
rgba(180,92,255,0.54) 68%,
rgba(180,92,255,0.24) 88%,
rgba(180,92,255,0) 100%);
transform-origin: 50% 100%;
animation: k110ReviewBoomUpGlow 1.28s cubic-bezier(0.16, 0.86, 0.14, 1) forwards;
}
#reviewCard .k110-review-word.k110-review-boom-down::after {
top: -28%;
bottom: -12%;
background:
linear-gradient(180deg,
rgba(255,59,48,0.94) 0%,
rgba(255,59,48,0.82) 18%,
rgba(190,12,26,0.68) 42%,
rgba(116,0,18,0.56) 70%,
rgba(38,0,8,0.34) 100%);
transform-origin: 50% 0%;
animation: k110ReviewBoomDownGlow 0.9s cubic-bezier(0.18, 0.7, 0.25, 1) forwards;
}
#reviewCard .k110-review-word.k110-review-boom-up .k110-inner-text,
#reviewCard .k110-review-word.k110-review-boom-down .k110-inner-text {
position: relative;
z-index: 1;
will-change: transform, opacity, filter;
}
#reviewCard .k110-review-text-up {
color: #F4E6FF !important;
text-shadow:
0 0 8px rgba(244,230,255,0.74),
0 0 18px rgba(180,92,255,0.72),
0 0 38px rgba(180,92,255,0.42) !important;
animation: k110ReviewTextLaunch 1.28s cubic-bezier(0.18, 0.86, 0.18, 1) forwards !important;
}
#reviewCard .k110-review-text-down {
color: #2A0006 !important;
text-shadow: 0 0 7px rgba(255,59,48,0.32) !important;
animation: k110ReviewTextMelt 0.9s cubic-bezier(0.36, 0.02, 0.95, 0.42) forwards !important;
}
@keyframes k110ReviewBoomUpGlow {
0% { opacity: 0; transform: translateY(18%); filter: blur(8px) brightness(1); }
16% { opacity: 1; transform: translateY(0); filter: blur(0) brightness(1.72); }
58% { opacity: 0.96; transform: translateY(-2%); filter: blur(0) brightness(1.36); }
100% { opacity: 0; transform: translateY(-8%); filter: blur(12px) brightness(0.82); }
}
@keyframes k110ReviewBoomDownGlow {
0% { opacity: 0; transform: translateY(-10%); filter: blur(8px) brightness(0.82); }
20% { opacity: 0.92; transform: translateY(0); filter: blur(1px) brightness(0.76); }
66% { opacity: 0.82; transform: translateY(2%); filter: blur(2px) brightness(0.62); }
100% { opacity: 0; transform: translateY(9%); filter: blur(12px) brightness(0.5); }
}
@keyframes k110ReviewTextLaunch {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; color: #fff; filter: blur(0) brightness(1); }
8% { transform: translate3d(-2px, 1px, 0) scale(1.01); opacity: 1; color: #F4E6FF; filter: blur(0) brightness(1.18); }
16% { transform: translate3d(2px, -1px, 0) scale(1.02); opacity: 1; color: #E7C4FF; filter: blur(0) brightness(1.28); }
24% { transform: translate3d(-1px, 2px, 0) scale(1.025); opacity: 1; color: #DDA8FF; filter: blur(0) brightness(1.34); }
32% { transform: translate3d(2px, -2px, 0) scale(1.03); opacity: 1; color: #D898FF; filter: blur(0) brightness(1.42); }
42% { transform: translate3d(-1px, -8px, 0) scale(1.035); opacity: 1; color: #DCA6FF; filter: blur(0) brightness(1.36); }
62% { transform: translate3d(0, -66%, 0) scale(0.99); opacity: 0.94; color: #E6C6FF; filter: blur(1px) brightness(1.18); }
100% { transform: translate3d(0, -205%, 0) scale(0.9); opacity: 0; color: #B45CFF; filter: blur(8px) brightness(0.8); }
}
@keyframes k110ReviewTextMelt {
0% { transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg) scale(1, 1); opacity: 1; filter: blur(0); }
18% { transform: translate3d(0, 5%, 0) rotate(-1deg) skewX(-4deg) scale(1.02, 0.96); opacity: 1; filter: blur(0); }
36% { transform: translate3d(-2%, 24%, 0) rotate(2.2deg) skewX(7deg) scale(0.96, 1.12); opacity: 0.9; filter: blur(1px); }
62% { transform: translate3d(4%, 82%, 0) rotate(-4deg) skewX(-10deg) scale(0.88, 1.18); opacity: 0.58; filter: blur(3px); }
100% { transform: translate3d(12%, 178%, 0) rotate(8deg) skewX(16deg) scale(0.72, 1.36); opacity: 0; filter: blur(9px); }
}
#reviewCard .k110-review-word.k110-review-report-hit {
overflow: hidden !important;
color: #000 !important;
background:
radial-gradient(circle at 50% 52%, rgba(255,180,170,0.88) 0%, rgba(255,59,48,0.92) 28%, rgba(255,59,48,0.58) 58%, rgba(92,0,8,0.34) 100%),
linear-gradient(135deg, rgba(255,59,48,0.96), rgba(255,16,32,0.6)) !important;
box-shadow:
inset 0 0 34px rgba(255,255,255,0.22),
inset 0 0 74px rgba(255,59,48,0.74),
0 0 24px rgba(255,59,48,0.36) !important;
text-shadow: none !important;
animation: k110ReviewReportCellFlood 1.18s ease-out both;
}
#reviewCard .k110-review-word.k110-review-report-hit .k110-inner-text {
position: relative;
z-index: 2;
color: #000 !important;
text-shadow: none !important;
animation: k110ReviewReportTextScatter 1.05s cubic-bezier(0.22, 0.74, 0.26, 1) both;
}
.k110-review-report-laser {
position: fixed;
left: var(--k110-laser-x);
top: var(--k110-laser-y);
width: var(--k110-laser-l);
height: 8px;
z-index: 26000;
pointer-events: none;
transform-origin: 0 50%;
transform: rotate(var(--k110-laser-a)) scaleX(0);
background:
linear-gradient(90deg, rgba(255,59,48,0) 0%, rgba(255,255,255,0.95) 18%, rgba(255,59,48,1) 46%, rgba(255,18,30,0.9) 72%, rgba(255,59,48,0) 100%);
box-shadow:
0 0 8px rgba(255,255,255,0.86),
0 0 20px rgba(255,59,48,0.82),
0 0 48px rgba(255,59,48,0.46);
animation: k110ReviewReportLaser 0.62s cubic-bezier(0.16, 0.9, 0.16, 1) forwards;
}
.k110-review-report-noise {
position: fixed;
z-index: 26001;
width: 5px;
height: 5px;
pointer-events: none;
background: #000;
box-shadow: 0 0 10px rgba(255,59,48,0.42);
animation: k110ReviewReportNoise 0.82s ease-out forwards;
}
@keyframes k110ReviewReportLaser {
0% { opacity: 0; transform: rotate(var(--k110-laser-a)) scaleX(0); filter: brightness(0.8); }
14% { opacity: 1; }
72% { opacity: 1; transform: rotate(var(--k110-laser-a)) scaleX(1); filter: brightness(1.45); }
100% { opacity: 0; transform: rotate(var(--k110-laser-a)) scaleX(1); filter: brightness(0.9); }
}
@keyframes k110ReviewReportCellFlood {
0% { filter: brightness(1); }
22% { filter: brightness(1.55) saturate(1.45); }
100% { filter: brightness(1.08) saturate(1.18); }
}
@keyframes k110ReviewReportTextScatter {
0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); clip-path: inset(0 0 0 0); }
22% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.02); filter: blur(0); clip-path: inset(0 0 0 0); }
54% { opacity: 0.76; transform: translate3d(2px, -1px, 0) scale(0.98); filter: blur(1px); clip-path: polygon(0 0, 100% 5%, 92% 32%, 100% 62%, 86% 100%, 0 92%, 12% 55%, 0 22%); }
100% { opacity: 0; transform: translate3d(-12px, -8px, 0) scale(0.88); filter: blur(8px); clip-path: polygon(0 8%, 88% 0, 70% 24%, 100% 50%, 62% 72%, 92% 100%, 8% 88%, 22% 54%); }
}
@keyframes k110ReviewReportNoise {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
18% { opacity: 1; }
100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.15); }
}
@keyframes popIn {
0% { transform: scale(0.3); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.anim-pop-in { animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; }
/* K110 SECTION CSS-60 REVIEW PANEL */
#reviewPanel {
--k110-review-color: #B45CFF;
--k110-review-glow-soft: rgba(180,92,255,0.18);
--k110-review-glow-strong: rgba(180,92,255,0.48);
--k110-review-layout-ease: cubic-bezier(0.22, 1, 0.36, 1);
--k110-review-layout-duration: 0.64s;
--k110-review-expression-max: clamp(44px, min(5vw, 7.6svh), 72px);
}
#reviewPanel > .k110-panel-frame {
height: auto;
max-height: var(--k110-panel-frame-h);
flex: 0 0 auto;
overflow: visible;
}
#reviewPanel > .k110-panel-frame > .k110-panel-main {
flex: 0 0 auto;
max-height: var(--k110-panel-frame-h);
overflow-y: auto;
overflow-x: hidden;
}
#reviewCard.k110-review-card {
--k110-panel-primary: var(--k110-review-color, #B45CFF);
position: relative;
padding: 0 !important;
border: var(--k110-panel-line-w) solid rgba(180,92,255,0.48) !important;
height: auto !important;
min-height: 0 !important;
background: rgba(0,0,0,0.54) !important;
color: #fff !important;
box-shadow:
inset 0 0 28px rgba(180,92,255,0.08),
0 0 24px rgba(180,92,255,0.12) !important;
overflow: hidden;
transition:
border-color var(--k110-review-layout-duration) var(--k110-review-layout-ease),
box-shadow var(--k110-review-layout-duration) var(--k110-review-layout-ease);
}
#reviewCard > .k110-label {
display: none !important;
}
#reviewCard .k110-review-category {
--pattern-accent: var(--k110-panel-primary);
position: relative;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
width: 100%;
min-height: calc(52px * 2 / 3);
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid rgba(180,92,255,0.52);
border-radius: 0;
background-color: rgba(0,0,0,0.56);
background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pattern-accent) 32%, transparent) 0.75px, transparent 1.12px);
background-size: var(--k110-bar-dot-size, 5px 5px);
background-repeat: repeat;
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
color: var(--k110-review-color);
box-shadow:
inset 0 0 18px rgba(180,92,255,0.1),
0 0 18px rgba(180,92,255,0.1);
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: clamp(12px, 1.1vw, 15px);
font-weight: 900;
letter-spacing: 0.01em;
text-shadow: 0 0 9px rgba(180,92,255,0.62);
box-sizing: border-box;
transition:
color 0.48s var(--k110-review-layout-ease),
text-shadow 0.48s var(--k110-review-layout-ease),
border-color 0.48s var(--k110-review-layout-ease),
background-color 0.48s var(--k110-review-layout-ease);
}
#reviewCard .k110-review-category::after {
display: none;
}
#reviewCard .k110-review-compare {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
transition: grid-template-columns var(--k110-review-layout-duration) var(--k110-review-layout-ease);
}
#reviewCard .k110-review-compare::before,
#reviewCard .k110-review-compare::after {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
background: rgba(180,92,255,0.42);
box-shadow: 0 0 10px rgba(180,92,255,0.28);
transition:
transform var(--k110-review-layout-duration) var(--k110-review-layout-ease),
opacity 0.5s var(--k110-review-layout-ease),
box-shadow 0.5s var(--k110-review-layout-ease);
}
#reviewCard .k110-review-compare::before {
top: 0;
bottom: 0;
left: 50%;
width: 1px;
transform: translateX(-0.5px);
}
#reviewCard .k110-review-compare::after {
left: 0;
right: 0;
top: 50%;
height: 1px;
opacity: 0;
transform: scaleX(0);
}
#reviewCard.is-vs .k110-review-compare,
#reviewCard.is-multi .k110-review-compare {
grid-template-columns: 1fr;
row-gap: var(--k110-gap, 2px);
}
#reviewCard.is-vs .k110-review-compare::before,
#reviewCard.is-multi .k110-review-compare::before {
opacity: 0;
transform: translateX(-0.5px) scaleY(0.02);
}
#reviewCard.is-vs .k110-review-compare::after,
#reviewCard.is-multi .k110-review-compare::after {
opacity: 1;
transform: scaleX(1);
transition-delay: 0.08s;
}
#reviewCard .k110-review-compare > div {
position: relative;
min-width: 0;
padding: 0;
transition:
transform var(--k110-review-layout-duration) var(--k110-review-layout-ease),
opacity 0.5s var(--k110-review-layout-ease);
}
#reviewCard .k110-review-label {
min-height: 28px;
margin: 0;
padding: 7px 12px 5px 12px;
border-bottom: 1px solid rgba(180,92,255,0.32);
color: rgba(180,92,255,0.86);
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-shadow: 0 0 7px rgba(180,92,255,0.36);
box-sizing: border-box;
transition:
min-height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
padding var(--k110-review-layout-duration) var(--k110-review-layout-ease),
opacity 0.5s var(--k110-review-layout-ease),
border-color 0.5s var(--k110-review-layout-ease),
background-color 0.5s var(--k110-review-layout-ease);
}
#reviewCard .k110-review-word {
height: clamp(150px, 20vh, 220px);
min-height: 150px;
max-height: 220px;
border: 0;
background:
linear-gradient(0deg, rgba(180,92,255,0.08), rgba(0,0,0,0) 42%),
rgba(0,0,0,0.28);
color: #fff;
box-shadow: inset 0 -18px 34px rgba(180,92,255,0.08);
text-shadow: 0 0 14px rgba(255,255,255,0.28), 0 0 26px rgba(180,92,255,0.18);
transition:
min-height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
max-height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
padding var(--k110-review-layout-duration) var(--k110-review-layout-ease),
font-size var(--k110-review-layout-duration) var(--k110-review-layout-ease),
background 0.56s var(--k110-review-layout-ease),
box-shadow 0.56s var(--k110-review-layout-ease),
opacity 0.48s var(--k110-review-layout-ease);
}
#reviewCard.is-vs .k110-review-word {
position: relative;
height: clamp(172px, 26vh, 300px);
min-height: 172px;
max-height: 300px;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(46px, 5.6vh, 64px);
font-size: clamp(58px, min(10vw, 12svh), 148px);
line-height: 0.96;
white-space: nowrap;
overflow: visible;
text-align: center;
}
#reviewCard.is-multi .k110-review-word {
height: clamp(96px, 13vh, 136px);
min-height: 96px;
max-height: 136px;
}
#reviewCard .k110-review-choices {
margin: 0;
padding: 2px;
gap: 2px;
border-top: 1px solid rgba(180,92,255,0.42);
background: rgba(0,0,0,0.18);
}
#reviewCard.is-vs .k110-review-choices {
grid-template-columns: 1fr 1fr;
}
#reviewCard.is-multi .k110-review-choices {
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}
#reviewCard.is-multi .k110-review-compare {
grid-template-columns: 1fr;
}
#reviewCard.is-multi .k110-review-compare::before,
#reviewCard.is-multi .k110-review-label-alien,
#reviewCard.is-multi #reviewReportBtn {
display: none !important;
}
#reviewCard.is-vs #reviewReportBtn,
#reviewCard.is-vs #reviewAlien {
display: none !important;
}
#reviewCard.is-vs #reviewKorean {
font-size: var(--k110-type-heading);
}
#reviewCard.is-vs .k110-review-compare > div:nth-child(2) {
display: none !important;
}
#reviewCard.is-vs .k110-review-label-alien {
display: none !important;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: calc(52px * 2 / 3);
padding: 0 var(--k110-panel-content-x);
border-top: 1px solid rgba(180,92,255,0.42);
border-bottom: 1px solid rgba(180,92,255,0.42);
background: rgba(0,0,0,0.44);
box-shadow:
inset 0 0 16px rgba(180,92,255,0.08),
0 0 12px rgba(180,92,255,0.08);
}
#reviewCard.is-vs .k110-review-compare::after {
display: none;
}
#reviewCard.is-vs #reviewKorean .k110-inner-text {
display: block;
width: auto;
max-width: 100%;
color: #fff;
font-size: var(--k110-type-heading);
white-space: nowrap;
overflow: visible;
overflow-wrap: normal;
text-overflow: clip;
}
#reviewCard.is-vs .k110-review-source-info {
position: absolute;
left: 50%;
right: auto;
bottom: clamp(10px, 1.5vh, 16px);
transform: translateX(-50%);
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--k110-gap, 2px);
width: max-content;
max-width: calc(100% - 28px);
font-size: var(--k110-type-micro);
pointer-events: none;
}
#reviewCard.is-vs .k110-review-source-chip {
min-height: 24px;
max-width: 100%;
padding: 0 10px;
border: 1px solid rgba(180,92,255,0.82);
border-radius: 999px;
background: transparent;
color: rgba(180,92,255,0.96);
box-shadow: none;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: none;
}
#reviewCard.is-multi .k110-review-compare::after {
display: none;
}
#reviewCard.is-multi .k110-review-compare > div:nth-child(2) {
display: block !important;
max-height: none;
opacity: 1;
overflow: visible;
pointer-events: none;
transform: none;
}
#reviewCard.is-multi #reviewKorean {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: clamp(178px, 28svh, 320px);
min-height: clamp(178px, 28svh, 320px);
max-height: clamp(178px, 28svh, 320px);
padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(42px, 5vh, 58px);
color: #fff;
font-size: var(--k110-type-heading);
line-height: 1;
white-space: nowrap;
overflow: visible;
}
#reviewCard.is-multi #reviewKorean .k110-review-source-text {
display: block;
max-width: 100%;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
font-size: var(--k110-type-heading);
line-height: 1;
}
#reviewCard.is-multi .k110-review-source-info {
position: absolute;
left: 50%;
right: auto;
top: auto;
bottom: clamp(9px, 1.4vh, 15px);
transform: translateX(-50%);
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--k110-gap, 2px);
width: max-content;
max-width: calc(100% - 28px);
font-size: var(--k110-type-micro);
pointer-events: none;
}
#reviewCard.is-multi .k110-review-source-chip {
min-height: 24px;
max-width: 100%;
padding: 0 10px;
border: 1px solid rgba(180,92,255,0.82);
border-radius: 999px;
background: transparent;
color: rgba(180,92,255,0.96);
box-shadow: none;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: none;
}
#reviewCard.is-vs .k110-review-alien-info {
display: none !important;
}
#reviewCard.is-vs .k110-review-alien-chip {
min-height: 24px;
max-width: 100%;
padding: 0 10px;
border: 1px solid rgba(180,92,255,0.82);
border-radius: var(--k110-radius-pill);
background: transparent;
color: rgba(180,92,255,0.96);
box-shadow: none;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: none;
}
#reviewCard .k110-review-source-info.k110-c-capsule-stack,
#reviewCard .k110-review-alien-info.k110-c-capsule-stack,
#reviewCard .k110-review-option-meta.k110-c-capsule-stack {
--capsule-stack-gap: var(--k110-gap, 2px);
--capsule-accent: var(--k110-review-color, #B45CFF);
gap: var(--capsule-stack-gap);
}
#reviewCard .k110-review-source-info .k110-c-capsule,
#reviewCard .k110-review-alien-info .k110-c-capsule,
#reviewCard .k110-review-option-meta .k110-c-capsule,
#reviewCard.is-vs .k110-review-source-chip,
#reviewCard.is-multi .k110-review-source-chip,
#reviewCard.is-vs .k110-review-alien-chip {
--capsule-accent: var(--k110-review-color, #B45CFF);
--capsule-pad-x: var(--k110-capsule-pad-x);
--capsule-pad-y: var(--k110-capsule-pad-y);
--capsule-min-h: var(--k110-capsule-min-h);
min-height: var(--k110-capsule-min-h);
padding: var(--k110-capsule-pad-y) var(--k110-capsule-pad-x);
border: var(--k110-capsule-line-w) solid color-mix(in srgb, var(--capsule-accent) 82%, transparent);
border-radius: var(--k110-radius-pill);
background: transparent;
color: color-mix(in srgb, var(--capsule-accent) 96%, white);
box-shadow: none;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: none;
}
#reviewCard.is-vs .k110-review-choices {
min-height: clamp(132px, 24vh, 240px);
}
#reviewCard.is-vs .k110-review-option {
min-height: clamp(132px, 24vh, 240px);
font-size: clamp(32px, min(7vw, 9svh), 92px);
line-height: 1;
padding-bottom: clamp(34px, 4.7vh, 56px);
}
#reviewCard.is-vs .k110-review-option-text {
position: relative;
z-index: 2;
display: block;
max-width: 100%;
overflow: visible;
text-overflow: clip;
line-height: 1;
}
#reviewCard.is-vs .k110-review-option-meta {
position: absolute;
z-index: 3;
left: 50%;
bottom: clamp(7px, 1.1vh, 12px);
transform: translateX(-50%);
color: var(--k110-review-color, #B45CFF);
pointer-events: none;
max-width: calc(100% - 16px);
}
#reviewCard.is-vs .k110-review-option-meta .k110-c-capsule {
min-width: 0;
max-width: 100%;
font-weight: 300;
text-shadow: none;
box-shadow: none;
transition:
background-color 0.22s ease,
border-color 0.22s ease,
color 0.22s ease;
}
#reviewCard.is-vs .k110-review-choices.is-vs-vote-resolving .k110-review-option {
pointer-events: none;
animation: none;
}
#reviewCard.is-vs .k110-review-option.is-vs-winner {
transform: scale(1.06);
background: #B45CFF;
color: #000;
text-shadow: none;
opacity: 1;
z-index: 2;
box-shadow:
0 0 20px rgba(180,92,255,0.68),
0 0 46px rgba(180,92,255,0.36),
inset 0 0 22px rgba(255,255,255,0.2);
}
#reviewCard.is-vs .k110-review-option.is-vs-loser {
transform: scale(0.92);
background: rgba(0,0,0,0.42);
color: rgba(180,92,255,0.38);
border-color: rgba(140,140,140,0.42);
text-shadow: none;
opacity: 0.44;
filter: grayscale(0.78) brightness(0.72);
box-shadow: none;
}
/* K110 MODULE: REVIEW SOURCE TRANSITION
Source text and attached capsules exit together. No blur is used here. */
#reviewCard.is-vs #reviewKorean.is-vs-source-exit .k110-inner-text {
animation: k110ReviewVsSourceExit 0.42s cubic-bezier(0.48, 0, 0.72, 0.38) forwards !important;
}
#reviewCard.is-vs #reviewKorean.is-vs-source-exit .k110-review-source-info {
animation: k110ReviewSourceInfoExit 0.42s cubic-bezier(0.48, 0, 0.72, 0.38) forwards !important;
}
#reviewCard.is-vs #reviewKorean.is-vs-source-reveal .k110-inner-text {
color: transparent;
background:
linear-gradient(0deg, #fff 0%, #fff 30%, #B45CFF 50%, #151019 68%, #000 100%);
background-size: 100% 260%;
background-position: 0 100%;
-webkit-background-clip: text;
background-clip: text;
transform-origin: 50% 58%;
animation: k110ReviewVsSourceReveal 0.86s cubic-bezier(0.16, 0.86, 0.32, 1) forwards !important;
}
@keyframes k110ReviewVsSourceExit {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: none;
}
100% {
opacity: 0;
transform: translate3d(-56vw, 0, 0);
filter: none;
}
}
@keyframes k110ReviewSourceInfoExit {
0% {
opacity: 1;
transform: translateX(-50%);
filter: none;
}
100% {
opacity: 0;
transform: translateX(-50%) translateX(-56vw);
filter: none;
}
}
@keyframes k110ReviewVsSourceReveal {
0% {
opacity: 0;
transform: scale(0.82);
filter: none;
background-position: 0 100%;
text-shadow: none;
}
62% {
opacity: 1;
transform: scale(1.045);
filter: none;
background-position: 0 20%;
text-shadow: 0 0 16px rgba(180,92,255,0.48);
}
100% {
opacity: 1;
transform: scale(1);
filter: none;
background-position: 0 0;
text-shadow: 0 0 14px rgba(255,255,255,0.3), 0 0 26px rgba(180,92,255,0.2);
}
}
#reviewCard.is-multi #reviewAlien {
height: auto;
min-height: calc(var(--k110-bar-h, calc(52px * 2 / 3)) + (var(--k110-gap, 2px) * 2));
max-height: none;
padding: 0 var(--k110-panel-content-x);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--k110-type-body);
line-height: 1.12;
text-align: center;
white-space: nowrap;
border-top: 1px solid rgba(180,92,255,0.42);
border-bottom: 1px solid rgba(180,92,255,0.42);
background:
linear-gradient(0deg, rgba(180,92,255,0.12), rgba(0,0,0,0) 72%),
rgba(0,0,0,0.28);
box-shadow: inset 0 -12px 24px rgba(180,92,255,0.08);
}
#reviewCard.is-multi #reviewAlien .k110-inner-text {
width: auto;
max-width: 100%;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
#reviewCard.is-multi .k110-rank-instruction-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
color: #B45CFF;
font-size: var(--k110-type-body);
font-weight: 900;
line-height: 1;
text-shadow: 0 0 9px rgba(180,92,255,0.42);
}
#reviewCard.is-multi .k110-rank-instruction-line .k110-review-status-typed {
display: inline-block;
overflow: hidden;
white-space: nowrap;
clip-path: inset(0 100% 0 0);
animation: k110ReviewStatusType var(--k110-review-status-duration, 540ms) steps(var(--k110-review-status-chars, 16), end) forwards;
}
#reviewCard.is-multi .k110-rank-instruction-line .k110-review-status-cursor {
display: inline-block;
width: 0.54em;
height: 1em;
background: #B45CFF;
box-shadow: 0 0 8px rgba(180,92,255,0.72);
animation:
k110ReviewStatusCursorBlink 0.42s step-end infinite,
k110ReviewStatusCursorHide 1ms linear var(--k110-review-status-duration, 540ms) forwards;
}
#reviewCard.is-review-skip-exit .k110-review-word .k110-inner-text,
#reviewCard.is-review-skip-exit .k110-review-source-text,
#reviewCard.is-review-skip-exit .k110-review-contributor,
#reviewCard.is-review-skip-exit .k110-review-option {
animation: k110ReviewVsSourceExit 0.36s cubic-bezier(0.48, 0, 0.72, 0.38) forwards !important;
}
#reviewCard.is-review-skip-exit .k110-review-source-info {
animation: k110ReviewSourceInfoExit 0.36s cubic-bezier(0.48, 0, 0.72, 0.38) forwards !important;
}
#reviewCard.is-multi.is-review-skip-exit #reviewAlien .k110-inner-text,
#reviewCard.is-multi.is-review-skip-exit .k110-rank-instruction-line {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
#reviewCard.is-multi .k110-review-choices {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-rows: minmax(96px, 1fr);
gap: 2px;
min-height: clamp(190px, 30vh, 360px);
margin-top: var(--k110-gap, 2px);
transition:
grid-template-columns var(--k110-review-layout-duration) var(--k110-review-layout-ease),
grid-auto-rows var(--k110-review-layout-duration) var(--k110-review-layout-ease),
min-height var(--k110-review-layout-duration) var(--k110-review-layout-ease);
}
#reviewCard.is-multi .k110-review-choices[data-count="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#reviewCard.is-multi .k110-review-choices[data-count="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#reviewCard.is-multi .k110-review-choices[data-count="4"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#reviewCard.is-multi .k110-review-choices[data-count="5"] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#reviewCard.is-multi .k110-review-choices[data-count="6"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#reviewCard.is-multi .k110-review-choices[data-count="7"],
#reviewCard.is-multi .k110-review-choices[data-count="8"],
#reviewCard.is-multi .k110-review-choices[data-count="9"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#reviewCard.is-multi .k110-review-option {
position: relative;
min-height: 96px;
padding: calc(var(--k110-gap, 2px) * 4);
font-size: var(--k110-type-heading);
line-height: 1;
overflow: hidden;
transition:
transform 0.46s var(--k110-review-layout-ease),
background 0.4s var(--k110-review-layout-ease),
color 0.4s var(--k110-review-layout-ease),
box-shadow 0.4s var(--k110-review-layout-ease);
}
#reviewCard.is-multi .k110-review-option .k110-review-option-text {
display: inline-block;
width: auto;
max-width: 100%;
white-space: nowrap;
overflow: visible;
overflow-wrap: normal;
text-overflow: clip;
line-height: 1;
font-size: var(--k110-type-display);
}
@keyframes k110ReviewButtonBreathe {
0%, 100% {
box-shadow:
inset 0 0 18px color-mix(in srgb, var(--review-vote-accent, #B45CFF) 28%, transparent),
inset 0 -18px 34px color-mix(in srgb, var(--review-vote-accent, #B45CFF) 20%, transparent);
}
50% {
box-shadow:
inset 0 0 34px color-mix(in srgb, var(--review-vote-accent, #B45CFF) 66%, transparent),
inset 0 -30px 52px color-mix(in srgb, var(--review-vote-accent, #B45CFF) 42%, transparent);
}
}
#reviewCard.is-multi .k110-review-option.is-ranked {
background: #B45CFF;
color: #000;
text-shadow: none;
animation: none !important;
box-shadow:
inset 0 0 20px rgba(255,255,255,0.12),
0 0 22px rgba(180,92,255,0.42);
}
#reviewCard.is-multi .k110-review-option.is-ranked::before {
content: attr(data-rank);
position: absolute;
left: 8px;
top: 8px;
width: 24px;
height: 24px;
border-radius: 999px;
display: grid;
place-items: center;
background: #000;
color: #B45CFF;
font-size: 13px;
font-weight: 900;
line-height: 1;
box-shadow: 0 0 10px rgba(180,92,255,0.5);
}
#reviewCard.is-multi .k110-review-choices.is-rank-reordering .k110-review-option:not(.is-rank-moving):hover,
#reviewCard.is-multi .k110-review-choices.is-rank-reordering .k110-review-option:not(.is-rank-moving):active {
transform: none !important;
background:
linear-gradient(0deg, rgba(180,92,255,0.16), rgba(0,0,0,0) 62%),
rgba(0,0,0,0.64) !important;
color: #B45CFF !important;
text-shadow: 0 0 8px rgba(180,92,255,0.42) !important;
box-shadow: none !important;
}
#reviewCard.is-multi .k110-review-choices.is-rank-reordering .k110-review-option.is-ranked:not(.is-rank-moving):hover,
#reviewCard.is-multi .k110-review-choices.is-rank-reordering .k110-review-option.is-ranked:not(.is-rank-moving):active {
background: #B45CFF !important;
color: #000 !important;
text-shadow: none !important;
box-shadow:
inset 0 0 20px rgba(255,255,255,0.12),
0 0 22px rgba(180,92,255,0.42) !important;
}
#reviewCard.is-multi .k110-review-option.is-rank-moving {
z-index: 3;
}
#reviewCard.is-multi .k110-review-option.is-rank-snap,
#reviewCard.is-multi .k110-review-option.is-rank-auto {
z-index: 4;
animation: k110ReviewRankSnap 0.58s cubic-bezier(0.18, 0.92, 0.25, 1.16) both !important;
}
#reviewCard.is-multi .k110-review-option.is-rank-auto {
animation-delay: 0.04s !important;
}
#reviewCard.is-multi .k110-review-choices.is-rank-finalizing {
pointer-events: none;
}
#reviewCard.is-multi .k110-review-option.is-rank-final-moving {
z-index: 5;
animation: none !important;
}
#reviewCard.is-multi .k110-review-choices.is-rank-final-flash .k110-review-option.is-ranked {
animation: k110ReviewRankFinalFlash 0.48s ease-out both !important;
}
#reviewCard.is-multi .k110-review-choices.is-rank-final-vanish .k110-review-option.is-ranked {
animation: k110ReviewRankFinalVanish 0.76s cubic-bezier(0.24, 0, 0.2, 1) both !important;
}
#reviewCard.is-multi .k110-review-choices.is-rank-submitting .k110-review-option {
opacity: 0 !important;
pointer-events: none !important;
}
#reviewCard.is-multi #reviewKorean.is-rank-source-exit .k110-review-source-text {
animation: k110ReviewVsSourceExit 0.42s cubic-bezier(0.48, 0, 0.72, 0.38) forwards !important;
}
#reviewCard.is-multi #reviewKorean.is-rank-source-exit .k110-review-source-info {
animation: k110ReviewSourceInfoExit 0.42s cubic-bezier(0.48, 0, 0.72, 0.38) forwards !important;
}
@keyframes k110ReviewRankSnap {
0% {
transform: scale(1);
box-shadow:
inset 0 0 18px rgba(180,92,255,0.28),
0 0 15px rgba(180,92,255,0.24);
}
34% {
transform: scale(0.88);
box-shadow:
inset 0 0 30px rgba(255,255,255,0.22),
0 0 20px rgba(180,92,255,0.42);
}
68% {
transform: scale(1.08);
box-shadow:
inset 0 0 24px rgba(255,255,255,0.18),
0 0 34px rgba(180,92,255,0.58);
}
100% {
transform: scale(1);
box-shadow:
inset 0 0 20px rgba(255,255,255,0.12),
0 0 22px rgba(180,92,255,0.42);
}
}
@keyframes k110ReviewRankFinalFlash {
0% {
filter: brightness(1);
box-shadow:
inset 0 0 20px rgba(255,255,255,0.12),
0 0 22px rgba(180,92,255,0.42);
}
48% {
filter: brightness(1.72);
box-shadow:
inset 0 0 30px rgba(255,255,255,0.34),
0 0 34px rgba(180,92,255,0.86),
0 0 78px rgba(180,92,255,0.34);
}
100% {
filter: brightness(1);
box-shadow:
inset 0 0 20px rgba(255,255,255,0.12),
0 0 22px rgba(180,92,255,0.42);
}
}
@keyframes k110ReviewRankFinalVanish {
0% {
transform: scale(1);
opacity: 1;
color: #000;
background: #B45CFF;
filter: brightness(1.15);
}
42% {
transform: scale(0.96);
opacity: 1;
color: rgba(0,0,0,0.86);
background: linear-gradient(180deg, #000 0%, #1b0d25 34%, #B45CFF 100%);
filter: brightness(0.92);
}
100% {
transform: scale(0.76);
opacity: 0;
color: rgba(0,0,0,0);
background: #000;
filter: brightness(0.35);
}
}
#reviewCard .k110-review-option {
min-height: clamp(62px, 7vw, 96px);
border: 1px solid rgba(180,92,255,0.62);
border-radius: 0;
background: rgba(0,0,0,0.64);
color: #B45CFF;
box-shadow: none;
text-shadow: 0 0 8px rgba(180,92,255,0.42);
transition:
min-height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
font-size var(--k110-review-layout-duration) var(--k110-review-layout-ease),
transform 0.46s var(--k110-review-layout-ease),
background 0.4s var(--k110-review-layout-ease),
color 0.4s var(--k110-review-layout-ease),
box-shadow 0.4s var(--k110-review-layout-ease);
position: relative;
overflow: visible;
isolation: isolate;
--k110-command-fill: #B45CFF;
--k110-command-glow-soft: rgba(180,92,255,0.22);
--k110-command-glow-strong: rgba(180,92,255,0.52);
}
#reviewCard.is-vs .k110-review-option::before,
#reviewCard.is-multi .k110-review-option:not(.is-ranked)::before {
content: "";
position: absolute;
inset: var(--k110-panel-line-w, 1px);
z-index: 0;
pointer-events: none;
background:
linear-gradient(0deg, rgba(180,92,255,0.16), rgba(0,0,0,0) 62%),
rgba(0,0,0,0);
box-shadow:
inset 0 0 18px rgba(180,92,255,0.18),
inset 0 -18px 34px rgba(180,92,255,0.16);
opacity: 1;
}
#reviewCard .k110-review-option-text,
#reviewCard .k110-review-option-meta {
position: relative;
z-index: 2;
}
#reviewCard .k110-review-option:hover,
#reviewCard .k110-review-option.is-picked {
transform: scale(0.985);
background: #B45CFF;
color: #000;
text-shadow: none;
box-shadow: 0 0 22px rgba(180,92,255,0.42);
}
#reviewCard .k110-review-choices.is-review-fresh .k110-review-option:hover,
#reviewCard .k110-review-choices.is-review-fresh .k110-review-option.is-picked {
transform: none;
background: rgba(0,0,0,0.64);
color: #B45CFF;
text-shadow: 0 0 8px rgba(180,92,255,0.42);
box-shadow: none;
}
#reviewCard .k110-review-choices.is-review-hover-suppressed .k110-review-option:hover,
#reviewCard .k110-review-choices.is-review-hover-suppressed .k110-review-option.is-picked,
#reviewCard.is-vs .k110-review-choices.is-review-hover-suppressed .k110-review-option:hover,
#reviewCard.is-multi .k110-review-choices.is-review-hover-suppressed .k110-review-option:not(.is-ranked):hover {
transform: none !important;
background:
linear-gradient(0deg, rgba(180,92,255,0.16), rgba(0,0,0,0) 62%),
rgba(0,0,0,0) !important;
color: #B45CFF !important;
text-shadow: 0 0 8px rgba(180,92,255,0.42) !important;
box-shadow:
inset 0 0 18px rgba(180,92,255,0.18),
inset 0 -18px 34px rgba(180,92,255,0.16) !important;
filter: none !important;
opacity: 1 !important;
}
#reviewCard .k110-review-choices.is-review-hover-suppressed .k110-review-option:hover .k110-review-option-meta .k110-c-capsule,
#reviewCard.is-vs .k110-review-choices.is-review-hover-suppressed .k110-review-option:hover .k110-review-option-meta .k110-c-capsule {
background: transparent !important;
border-color: #B45CFF !important;
color: #B45CFF !important;
text-shadow: none !important;
box-shadow: none !important;
}
#reviewCard.is-vs .k110-review-option,
#reviewCard.is-multi .k110-review-option:not(.is-ranked) {
animation: none !important;
}
#reviewCard.is-vs .k110-review-option::before,
#reviewCard.is-multi .k110-review-option:not(.is-ranked)::before {
animation: k110ReviewOptionGlowBreathe 3.1s ease-in-out infinite;
}
#reviewCard.is-vs .k110-review-option:hover,
#reviewCard.is-multi .k110-review-option:not(.is-ranked):hover {
background: #B45CFF;
color: #000;
text-shadow: none;
}
#reviewCard.is-vs .k110-review-option:hover .k110-review-option-meta .k110-c-capsule {
background: transparent;
border-color: rgba(0,0,0,0.6);
color: rgba(0,0,0,0.6);
text-shadow: none;
box-shadow: none;
}
#reviewCard.is-multi .k110-review-option:active {
transform: none;
}
@keyframes k110ReviewOptionGlowBreathe {
0%, 100% {
opacity: 0.72;
filter: brightness(0.92);
box-shadow:
inset 0 0 18px rgba(180,92,255,0.22),
inset 0 -18px 34px rgba(180,92,255,0.18);
}
50% {
opacity: 1;
filter: brightness(1.16);
box-shadow:
inset 0 0 34px rgba(180,92,255,0.62),
inset 0 -30px 52px rgba(180,92,255,0.38);
}
}
#reviewPanel .k110-action-row {
margin: 0;
padding: 2px;
gap: 2px;
border-top: 1px solid rgba(180,92,255,0.42);
background: rgba(0,0,0,0.18);
grid-template-columns: 1fr 1fr minmax(88px, 0.72fr);
transition:
max-height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
min-height var(--k110-review-layout-duration) var(--k110-review-layout-ease),
opacity 0.5s var(--k110-review-layout-ease),
padding var(--k110-review-layout-duration) var(--k110-review-layout-ease),
border-color 0.5s var(--k110-review-layout-ease),
background-color 0.5s var(--k110-review-layout-ease);
}
#reviewPanel .k110-vote-btn:not(.k110-c-red-action) {
min-height: 58px !important;
border: 1px solid rgba(180,92,255,0.58) !important;
border-radius: 0 !important;
background:
linear-gradient(0deg, rgba(180,92,255,0.14), rgba(0,0,0,0) 62%),
rgba(0,0,0,0.72) !important;
color: #B45CFF !important;
box-shadow: none !important;
text-shadow: 0 0 8px rgba(180,92,255,0.4);
transition: transform 0.12s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
position: relative;
overflow: visible;
isolation: isolate;
--k110-command-fill: #B45CFF;
--k110-command-glow-soft: rgba(180,92,255,0.22);
--k110-command-glow-strong: rgba(180,92,255,0.52);
}
#reviewPanel .k110-vote-btn:not(.k110-c-red-action):hover {
background: #B45CFF !important;
color: #000 !important;
text-shadow: none;
box-shadow: 0 0 22px rgba(180,92,255,0.42) !important;
}
#reviewPanel .k110-vote-btn:not(.k110-c-red-action):active {
transform: scale(0.985) !important;
}
#reviewPanel .k110-report-btn {
--red-action-overlap: 0px;
--red-action-size: calc(28px - (2 * var(--k110-gap, 2px)));
--red-action-icon-shift-y: 0.06em;
top: var(--k110-gap, 2px);
right: var(--k110-gap, 2px);
width: var(--red-action-size) !important;
height: var(--red-action-size) !important;
min-width: var(--red-action-size) !important;
min-height: var(--red-action-size) !important;
max-width: var(--red-action-size) !important;
max-height: var(--red-action-size) !important;
border-color: rgba(255,59,48,0.7) !important;
color: #FF3B30 !important;
text-shadow: 0 0 8px rgba(255,59,48,0.32);
--k110-command-fill: #FF3B30;
--k110-command-glow-soft: rgba(255,59,48,0.22);
--k110-command-glow-strong: rgba(255,59,48,0.54);
}
#reviewPanel .k110-report-btn:hover {
background: #FF3B30 !important;
color: #000 !important;
box-shadow: 0 0 22px rgba(255,59,48,0.42) !important;
}
#reviewCard .k110-review-label-alien {
position: relative;
padding-right: calc(28px + (2 * var(--k110-gap, 2px)));
}
#reviewCard .k110-review-status-wrap {
--k110-review-status-line-count: 3;
--k110-review-status-line-h: calc(var(--k110-type-body) * 1.32);
--k110-review-status-pad-y: calc(var(--k110-gap, 2px) * 4);
--k110-review-status-h: calc((var(--k110-review-status-line-h) * var(--k110-review-status-line-count)) + (var(--k110-review-status-pad-y) * 2));
--k110-review-score-w: clamp(112px, 8.8vw, 152px);
display: grid;
grid-template-columns: var(--k110-review-score-w) minmax(0, 1fr);
align-items: stretch;
gap: 0;
width: 100%;
min-height: var(--k110-review-status-h);
height: var(--k110-review-status-h);
border-top: 1px solid rgba(180,92,255,0.32);
border-bottom: 1px solid rgba(180,92,255,0.18);
background: rgba(0,0,0,0.28);
box-sizing: border-box;
}
#reviewCard .k110-review-score-panel {
width: var(--k110-review-score-w);
min-width: var(--k110-review-score-w);
height: 100%;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
align-self: stretch;
border-right: 1px solid rgba(180,92,255,0.42);
color: rgba(180,92,255,0.88);
background:
linear-gradient(0deg, rgba(180,92,255,0.14), rgba(0,0,0,0) 66%),
rgba(0,0,0,0.36);
box-shadow:
inset 0 0 18px rgba(180,92,255,0.12),
inset 0 -16px 24px rgba(180,92,255,0.12);
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
text-shadow: 0 0 7px rgba(180,92,255,0.36);
box-sizing: border-box;
}
#reviewCard .k110-review-score-label {
align-self: center;
justify-self: end;
font-size: var(--k110-type-micro);
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
#reviewCard .k110-review-score-value {
align-self: center;
justify-self: start;
font-size: clamp(18px, 2.6vw, 34px);
font-weight: 900;
line-height: 1.05;
color: #B45CFF;
}
#reviewCard .k110-review-score-panel.is-score-bump .k110-review-score-value {
animation: k110ReviewScoreBump 0.52s cubic-bezier(0.18, 0.92, 0.25, 1.16) both;
}
@keyframes k110ReviewScoreBump {
0% {
transform: scale(1);
filter: brightness(1);
}
42% {
transform: scale(1.22);
filter: brightness(1.8);
text-shadow:
0 0 12px rgba(180,92,255,0.78),
0 0 28px rgba(180,92,255,0.42);
}
100% {
transform: scale(1);
filter: brightness(1);
}
}
#reviewCard #reviewStatus {
margin: 0;
min-height: 0;
height: 100%;
max-height: 100%;
padding: var(--k110-review-status-pad-y) 12px;
line-height: 1.28;
border-top: 0;
color: rgba(180,92,255,0.8);
background: transparent;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
text-shadow: 0 0 7px rgba(180,92,255,0.28);
}
@keyframes emojiUp {
0% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-10px) rotate(-12deg) scale(1.35); }
100% { transform: translateY(0) rotate(0); }
}
@keyframes emojiDown {
0% { transform: translateY(0) rotate(0); }
50% { transform: translateY(10px) rotate(12deg) scale(1.2); }
100% { transform: translateY(0) rotate(0); }
}
.anim-emoji-up { animation: emojiUp 0.45s ease-out forwards !important; }
.anim-emoji-down { animation: emojiDown 0.45s ease-out forwards !important; }
.k110-particle {
position: fixed;
z-index: 99999;
width: 9px;
height: 9px;
border: 2px solid #000;
border-radius: 50%;
pointer-events: none;
animation: k110ParticleBurst 0.8s ease-out forwards;
}
@keyframes k110ParticleBurst {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.1); opacity: 0; }
}
/* K110 SECTION CSS-70 DISCOVERY PANEL */
.k110-discover-box {
--k110-discover-display-size: var(--k110-type-display);
--k110-discover-slot-size: var(--k110-type-display);
--k110-discover-glyph-y: 0px;
--k110-discover-glyph-baseline-y: 50%;
--k110-discover-glyph-baseline: 0px;
--k110-discover-glyph-final-y: 0px;
--k110-discover-glow-blur-a: 5px;
--k110-discover-glow-blur-b: 12px;
--k110-discover-glow-blur-c: 24px;
--k110-discover-glow-blur-d: 38px;
--k110-discover-glow-alpha-a: 0.5;
--k110-discover-glow-alpha-b: 0.34;
--k110-discover-glow-alpha-c: 0.2;
--k110-discover-glow-alpha-d: 0.1;
--k110-discover-glow-saturate: 1.12;
--k110-discover-glow-brightness: 1.03;
--k110-discover-grid-bottom-gap: 0px;
--k110-discover-random-min-h: clamp(150px, 22svh, 260px);
--k110-discover-random-h: clamp(176px, 34svh, 320px);
--k110-discover-list-h: calc(var(--k110-discover-row-h) * 2);
--k110-discover-after-list-gap: calc(var(--k110-button-cluster-gap) * 2);
--k110-discover-bar-w: calc((100% - (var(--k110-button-cluster-gap) * 2)) / 3);
--k110-discover-control-h: var(--k110-discover-menu-h, clamp(86px, 13svh, 116px));
--k110-discover-vote-size: 34px;
--k110-discover-row-pad-y: 7px;
--k110-discover-row-h: calc(var(--k110-discover-vote-size) + (var(--k110-discover-row-pad-y) * 2) + var(--k110-panel-line-w));
--k110-discover-list-min-h: calc(var(--k110-discover-row-h) * 2);
width: 100%;
height: 100%;
min-height: 0;
min-width: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) var(--k110-discover-control-h);
grid-template-columns: minmax(0, 1fr);
gap: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
overflow: hidden !important;
color: #fff;
}
#discoverPanel > .k110-panel-frame {
height: var(--k110-panel-frame-h);
max-height: var(--k110-panel-frame-h);
flex: 0 0 var(--k110-panel-frame-h);
overflow: hidden;
}
#discoverPanel > .k110-panel-frame > .k110-panel-main {
height: 100%;
flex: 1 1 auto;
max-height: var(--k110-panel-frame-h);
overflow-y: hidden;
overflow-x: hidden;
}
#discoverPanel > .k110-panel-frame > .k110-panel-main > .k110-discover-box {
height: 100% !important;
min-height: 0;
width: 100% !important;
min-width: 0;
max-height: 100%;
}
#discoverPanel > .k110-panel-frame .k110-discover-stage,
#discoverPanel > .k110-panel-frame .k110-discover-card {
height: 100% !important;
min-height: 0;
width: 100% !important;
min-width: 0;
}
.k110-discover-box > .k110-label {
display: none !important;
}
.k110-discover-stage {
position: relative;
width: 100%;
min-height: 0;
min-width: 0;
color: #fff;
overflow: visible;
display: block;
padding: 0;
box-sizing: border-box;
touch-action: pan-y;
}
.k110-discover-card {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
max-height: 100%;
min-width: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows:
minmax(var(--k110-discover-random-min-h), var(--k110-discover-random-h))
var(--k110-bar-h)
calc(var(--k110-button-cluster-gap) * 2)
var(--k110-panel-line-w)
var(--k110-discover-list-h)
var(--k110-discover-after-list-gap);
gap: 0;
align-items: stretch;
justify-items: stretch;
justify-content: stretch;
align-content: stretch;
padding: 0;
box-sizing: border-box;
overflow: visible;
}
.k110-discover-card > * {
width: 100%;
min-width: 0;
max-width: 100%;
justify-self: stretch;
box-sizing: border-box;
}
.k110-discover-random-module {
--k110-discover-grid-label-reserve: clamp(20px, 2.2svh, 30px);
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
place-items: center;
box-sizing: border-box;
overflow: visible !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
isolation: isolate;
contain: none;
}
.k110-discover-glyph-grid {
position: absolute;
z-index: 1;
left: 50%;
top: var(--k110-glyph-grid-top, 0px);
width: var(--k110-glyph-grid-w, 180px);
height: var(--k110-glyph-grid-h, 160px);
transform: translateX(-50%);
pointer-events: none;
overflow: visible !important;
opacity: 0.72;
border-left: 1px solid rgba(210,210,210,0.42);
border-right: 1px solid rgba(210,210,210,0.42);
background-image:
repeating-linear-gradient(to right, rgba(180,180,180,0.22) 0 0.5px, transparent 0.5px 12px),
repeating-linear-gradient(to bottom, rgba(180,180,180,0.18) 0 0.5px, transparent 0.5px 12px);
box-shadow: none;
transition:
width 0.52s cubic-bezier(0.16, 0.86, 0.32, 1),
height 0.52s cubic-bezier(0.16, 0.86, 0.32, 1),
top 0.52s cubic-bezier(0.16, 0.86, 0.32, 1),
opacity 0.18s ease;
}
.k110-grid-line {
position: absolute;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
transition: opacity 0.18s ease;
}
.k110-grid-baseline {
top: var(--k110-glyph-grid-baseline, 128px);
background: rgba(245,245,245,0.92);
box-shadow: 0 0 8px rgba(245,245,245,0.34);
}
.k110-grid-label {
position: absolute;
z-index: 3;
color: rgba(210,210,210,0.62);
font-size: 5pt;
font-weight: 300;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 0 3px rgba(210,210,210,0.2);
transition: opacity 0.18s ease;
}
.k110-grid-label-width {
left: 50%;
top: calc((var(--k110-button-cluster-gap, 2px) * -2) - 1px);
font-size: 7pt;
transform: translate(-50%, -100%);
display: block;
opacity: 1;
}
.k110-grid-label-baseline {
left: -58px;
font-size: 7pt;
}
.k110-grid-label-baseline {
top: var(--k110-glyph-grid-baseline, 128px);
transform: translateY(-50%);
}
.k110-discover-stage.is-grid-intro-hidden .k110-grid-label-baseline {
opacity: 0;
transform: translate(-8px, -50%);
}
.k110-discover-head {
display: grid;
grid-template-columns: minmax(0, var(--k110-discover-bar-w)) calc(var(--k110-button-cluster-gap) * 2) minmax(0, 1fr);
align-items: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
height: var(--k110-bar-h, calc(52px * 2 / 3));
min-height: var(--k110-bar-h, calc(52px * 2 / 3));
box-sizing: border-box;
overflow: visible;
}
.k110-discover-bar {
--k110-panel-primary: #FFEE00;
width: 100%;
min-width: 0;
max-width: 100%;
border: var(--k110-panel-line-w) solid rgba(255,238,0,0.58);
color: #FFEE00;
overflow: hidden;
}
.k110-discover-head-gap {
display: block;
}
.k110-discover-section-gap {
height: calc(var(--k110-button-cluster-gap) * 2);
min-height: calc(var(--k110-button-cluster-gap) * 2);
}
.k110-discover-section-line {
height: 0;
border-top: var(--k110-panel-line-w) solid color-mix(in srgb, var(--k110-panel-primary, #FFEE00) 50%, transparent);
}
.k110-discover-section-line-bottom {
display: none;
}
.k110-discover-glyph {
position: absolute;
z-index: 8;
left: 50%;
top: var(--k110-discover-glyph-baseline-y, 50%);
width: max-content;
white-space: nowrap;
min-height: 1.16em;
max-width: calc(100% - (var(--k110-panel-content-x, 14px) * 2));
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
contain: none;
transform-origin: center center;
font-family: "Noto Sans KR", "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Sans", sans-serif !important;
font-variant-emoji: text;
color: #7CFF00;
font-size: var(--k110-discover-display-size);
font-weight: 900;
line-height: 1.16;
text-align: center;
justify-self: center;
align-self: center;
transform: translate3d(-50%, var(--k110-discover-glyph-final-y, 0px), 0);
text-shadow:
0 0 var(--k110-discover-glow-blur-a) color-mix(in srgb, currentColor calc(var(--k110-discover-glow-alpha-a) * 100%), transparent),
0 0 var(--k110-discover-glow-blur-b) color-mix(in srgb, currentColor calc(var(--k110-discover-glow-alpha-b) * 100%), transparent),
0 0 var(--k110-discover-glow-blur-c) color-mix(in srgb, currentColor calc(var(--k110-discover-glow-alpha-c) * 100%), transparent),
0 0 var(--k110-discover-glow-blur-d) color-mix(in srgb, currentColor calc(var(--k110-discover-glow-alpha-d) * 100%), transparent);
filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness));
animation: discoverGlyphArrive 0.72s cubic-bezier(0.15, 0.95, 0.26, 1.15) both, k110FxNeonRollText var(--k110-neon-roll-duration) linear infinite;
cursor: pointer;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.k110-discover-stage.is-glow-mid .k110-discover-glyph {
--k110-discover-glow-blur-a: 5px;
--k110-discover-glow-blur-b: 12px;
--k110-discover-glow-blur-c: 24px;
--k110-discover-glow-blur-d: 38px;
--k110-discover-glow-alpha-a: 0.5;
--k110-discover-glow-alpha-b: 0.34;
--k110-discover-glow-alpha-c: 0.2;
--k110-discover-glow-alpha-d: 0.1;
--k110-discover-glow-saturate: 1.12;
--k110-discover-glow-brightness: 1.03;
}
.k110-discover-stage.is-glow-none .k110-discover-glyph {
text-shadow: none !important;
filter: none !important;
}
.k110-discover-stage.is-glow-white .k110-discover-glyph {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background-image: none !important;
text-shadow: none !important;
filter: none !important;
animation: discoverGlyphArrive 0.72s cubic-bezier(0.15, 0.95, 0.26, 1.15) both !important;
}
.k110-discover-glyph-meta {
position: absolute;
z-index: 9;
right: 0;
top: 50%;
height: auto;
max-height: calc(100% - var(--k110-button-cluster-gap) * 2);
max-width: min(390px, 46%);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: center;
column-gap: var(--k110-button-cluster-gap);
row-gap: var(--k110-button-cluster-gap);
color: rgba(255,255,255,0.78);
font-size: var(--k110-type-micro);
line-height: 1.05;
font-weight: 300;
letter-spacing: 0;
text-align: right;
text-shadow: 0 0 7px rgba(255,255,255,0.24);
pointer-events: auto;
overflow-x: visible;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,238,0,0.64) transparent;
transform: translateY(-50%);
}
.k110-discover-glyph-meta::-webkit-scrollbar {
width: 4px;
}
.k110-discover-glyph-meta::-webkit-scrollbar-track {
background: transparent;
}
.k110-discover-glyph-meta::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255,238,0,0.62);
box-shadow: 0 0 8px rgba(255,238,0,0.28);
}
.k110-discover-meta-row {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
gap: 4px;
width: auto;
max-width: 100%;
}
.k110-discover-meta-row .k110-c-capsule-cluster {
--capsule-accent: var(--k110-color-yellow);
--capsule-switch-accent: var(--k110-color-yellow);
width: auto;
max-width: 100%;
justify-content: flex-end;
}
.k110-discover-meta-row .k110-c-capsule-cluster.is-switch-left {
justify-content: flex-end;
}
.k110-discover-meta-pill {
--capsule-accent: currentColor;
--capsule-bg: transparent;
--capsule-fg: currentColor;
--capsule-line-w: var(--k110-capsule-line-w);
--capsule-font-size: var(--k110-capsule-font-size);
--capsule-pad-x: var(--k110-capsule-pad-x);
--capsule-pad-y: var(--k110-capsule-pad-y);
--capsule-min-h: var(--k110-capsule-min-h);
max-width: min(220px, 36vw);
border-color: rgba(255,255,255,0.42);
font-weight: 300;
}
.k110-discover-meta-group-line {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
width: 100%;
overflow: visible;
}
.k110-capsule-lock,
.k110-discover-meta-lock {
display: none;
width: 13px;
height: 13px;
position: relative;
color: var(--k110-capsule-lock-color, #FFEE00);
filter: drop-shadow(0 0 6px currentColor);
}
.k110-capsule-lock::before,
.k110-discover-meta-lock::before {
content: "";
position: absolute;
left: 3px;
top: 0;
width: 7px;
height: 7px;
border: 2px solid currentColor;
border-bottom: 0;
border-radius: 7px 7px 0 0;
box-sizing: border-box;
}
.k110-capsule-lock::after,
.k110-discover-meta-lock::after {
content: "";
position: absolute;
left: 1px;
bottom: 0;
width: 11px;
height: 8px;
background: currentColor;
border-radius: 2px;
}
.k110-discover-meta-row.is-locked .k110-capsule-lock,
.k110-discover-meta-row.is-locked .k110-discover-meta-lock {
display: block;
}
.k110-discover-meta-row.is-locked .k110-c-capsule-switch-control,
.k110-discover-meta-row:not(.is-locked) .k110-c-capsule-lock-control {
display: none;
}
.k110-discover-meta-row.is-locked .k110-c-capsule-lock-control {
display: inline-flex;
}
.k110-discover-meta-group-btn {
--capsule-pad-x: var(--k110-capsule-button-pad-x);
--capsule-pad-y: 0px;
--capsule-min-h: var(--k110-capsule-button-min-h);
cursor: pointer;
color: rgba(255,255,255,0.78);
font-family: inherit;
text-shadow: none;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.k110-discover-meta-group-btn:active {
transform: translateY(1px);
}
.k110-discover-meta-row.is-locked .k110-discover-meta-group-btn {
background: #FFEE00;
border-color: #FFEE00;
color: #000;
box-shadow: 0 0 12px rgba(255,238,0,0.62);
font-weight: 900;
}
.k110-discover-meta-subgroup-line {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: nowrap;
gap: var(--k110-button-cluster-gap);
width: 100%;
max-width: min(260px, 42vw);
padding-top: 1px;
}
.k110-discover-meta-subgroup-item {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0;
width: auto;
min-width: 0;
}
.k110-discover-meta-subbranch {
display: none;
align-items: center;
justify-content: center;
min-width: 1.4em;
color: rgba(255,238,0,0.74);
font-size: var(--k110-type-micro);
font-weight: 900;
line-height: 1;
text-shadow: 0 0 8px rgba(255,238,0,0.34);
}
.k110-discover-meta-subgroup-btn {
--capsule-pad-x: calc(var(--k110-capsule-button-pad-x) * 0.82);
--capsule-pad-y: 0px;
--capsule-min-h: calc(var(--k110-capsule-button-min-h) * 0.9);
width: auto;
max-width: min(220px, 42vw);
cursor: pointer;
color: rgba(255,255,255,0.62);
border-color: rgba(255,255,255,0.34);
font-family: inherit;
text-shadow: none;
opacity: 0.5;
transition: opacity 0.18s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.k110-discover-meta-subgroup-btn:active {
transform: translateY(1px);
}
.k110-discover-meta-subgroup-btn.is-current {
opacity: 1;
border-color: rgba(255,255,255,0.48);
color: rgba(255,255,255,0.82);
box-shadow: none;
font-weight: 300;
}
.k110-discover-meta-subgroup-btn.is-locked {
opacity: 1;
background: #FFEE00;
border-color: #FFEE00;
color: #000;
box-shadow: 0 0 12px rgba(255,238,0,0.62);
font-weight: 900;
}
.k110-discover-meta-unicode-line {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
width: 100%;
}
.k110-discover-meta-copy {
display: none;
width: 14px;
height: 14px;
position: relative;
color: #fff;
filter: drop-shadow(0 0 6px currentColor);
transform: rotate(1deg);
}
.k110-discover-meta-copy::before,
.k110-discover-meta-copy::after {
content: "";
position: absolute;
width: 9px;
height: 10px;
border: 2px solid currentColor;
background: transparent;
box-sizing: border-box;
border-radius: 1px;
}
.k110-discover-meta-copy::before {
left: 1px;
top: 3px;
opacity: 0.72;
}
.k110-discover-meta-copy::after {
left: 4px;
top: 0;
}
.k110-discover-meta-unicode-line.is-copied .k110-discover-meta-copy {
display: block;
}
.k110-discover-meta-unicode-btn {
--capsule-pad-x: var(--k110-capsule-button-pad-x);
--capsule-pad-y: 0px;
--capsule-min-h: var(--k110-capsule-button-min-h);
cursor: pointer;
color: rgba(255,255,255,0.86);
font-family: inherit;
text-shadow: 0 0 6px rgba(255,255,255,0.26);
transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
.k110-discover-meta-unicode-btn:active {
transform: translateY(1px);
}
.k110-discover-meta-unicode-btn.is-copied {
background: #fff;
border-color: #000;
color: #000;
box-shadow: 0 0 14px rgba(255,255,255,0.72);
font-weight: 900;
}
.k110-discover-meta-row.is-switch-out,
.k110-discover-meta-row.is-switch-focus .k110-discover-meta-unicode-line,
.k110-discover-meta-row.is-switch-focus .k110-discover-meta-subgroup-line {
animation: k110DiscoverMetaSwitchOut 0.32s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
pointer-events: none;
}
.k110-discover-meta-row.is-switch-focus .k110-discover-meta-group-line {
animation: none;
transform: none;
opacity: 1;
filter: none;
pointer-events: auto;
}
@keyframes k110DiscoverMetaSwitchOut {
0% { opacity: 1; transform: translate3d(0, 0, 0); }
100% { opacity: 0; transform: translate3d(-28px, 0, 0); }
}
.k110-discover-korean {
display: none;
}
.k110-discover-existing-list {
--k110-panel-primary: #FFEE00;
--k110-list-row-h: var(--k110-discover-row-h);
--list-line-color: color-mix(in srgb, var(--k110-panel-primary) 50%, transparent);
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
height: 100%;
flex: 1 1 auto;
max-height: 0;
overflow-y: auto;
overflow-x: hidden;
margin-top: 0;
padding: 0;
box-sizing: border-box;
display: grid;
grid-auto-rows: var(--k110-discover-row-h);
align-content: start;
gap: 0;
border-left: 0;
border-right: 0;
border-top: 0;
border-bottom: 0;
background-color: rgba(0,0,0,0.22);
scrollbar-width: thin;
scrollbar-color: #7CFF00 rgba(0,0,0,0.35);
scrollbar-gutter: stable;
overscroll-behavior: contain;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition: max-height 0.46s cubic-bezier(0.16, 0.86, 0.32, 1), margin-top 0.46s cubic-bezier(0.16, 0.86, 0.32, 1), padding 0.46s cubic-bezier(0.16, 0.86, 0.32, 1), opacity 0.28s ease, transform 0.46s cubic-bezier(0.16, 0.86, 0.32, 1);
}
.k110-discover-existing-list,
#designPanel .glyph-scroll {
scrollbar-width: thin;
scrollbar-color: var(--k110-panel-primary, currentColor) transparent;
scrollbar-gutter: stable;
}
.k110-discover-existing-list::-webkit-scrollbar,
#designPanel .glyph-scroll::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.k110-discover-existing-list::-webkit-scrollbar-thumb,
#designPanel .glyph-scroll::-webkit-scrollbar-thumb {
min-height: 28px;
border-radius: var(--k110-radius-pill);
background: color-mix(in srgb, var(--k110-panel-primary, currentColor) 72%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--k110-panel-primary, currentColor) 42%, transparent);
}
.k110-discover-existing-list.is-ready {
max-height: none;
height: var(--k110-discover-list-h, 100%);
min-height: calc(var(--k110-discover-row-h) * 2);
margin-top: 0;
padding: 0 10px 0 0;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.k110-discover-existing-list::-webkit-scrollbar {
width: 6px;
}
.k110-discover-existing-list::-webkit-scrollbar-track {
background: transparent;
}
.k110-discover-existing-list::-webkit-scrollbar-thumb {
min-height: 28px;
border-radius: 999px;
background: rgba(255,238,0,0.76);
box-shadow: 0 0 8px rgba(255,238,0,0.46);
}
.k110-discover-existing-list::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
.k110-discover-existing-row {
display: grid;
--discover-status-w: 3.8em;
--discover-votes-w: calc((var(--k110-discover-vote-size) * 2) + var(--k110-button-cluster-gap));
grid-template-columns:
minmax(0, 1.3fr)
minmax(var(--discover-status-w), max-content)
minmax(0, 0.9fr)
var(--discover-votes-w);
column-gap: var(--k110-button-cluster-gap);
row-gap: 0;
align-items: center;
color: rgba(255,255,255,0.9);
font-size: var(--k110-type-body);
line-height: 1.2;
font-weight: 900;
height: var(--k110-discover-row-h);
min-height: var(--k110-discover-row-h);
border: 0;
border-top: 0;
background: transparent;
padding: var(--k110-discover-row-pad-y) 0 var(--k110-discover-row-pad-y) var(--k110-panel-content-x);
box-sizing: border-box;
border-radius: 0;
animation: discoverRowAppear 0.42s cubic-bezier(0.16, 0.86, 0.32, 1) both;
transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.k110-discover-existing-row:first-child {
border-top: 0;
}
.k110-discover-existing-row.is-highlighted {
background: rgba(124,255,0,0.2);
box-shadow: 0 0 0 2px rgba(124,255,0,0.88), 0 0 24px rgba(124,255,0,0.34);
animation: discoverRowHighlight 1.15s ease-out 2;
}
.k110-discover-existing-row.is-toasted {
background: rgba(255,238,0,0.18);
box-shadow: 0 0 0 2px rgba(255,238,0,0.82), 0 0 24px rgba(255,238,0,0.32);
animation: discoverRowYellowWash 2.4s ease-out both;
}
.k110-discover-existing-row.is-returning {
background: rgba(255,238,0,0.18);
box-shadow: none;
animation: discoverRowYellowWash 2.4s ease-out both;
}
.k110-discover-existing-row.is-toasted .k110-discover-existing-korean-track,
.k110-discover-existing-row.is-returning .k110-discover-existing-korean-track,
.k110-discover-existing-row.is-toasted .k110-discover-status-word,
.k110-discover-existing-row.is-returning .k110-discover-status-word,
.k110-discover-existing-row.is-toasted .k110-discover-existing-user-track,
.k110-discover-existing-row.is-returning .k110-discover-existing-user-track,
.k110-discover-existing-row.is-toasted .k110-discover-existing-votes,
.k110-discover-existing-row.is-returning .k110-discover-existing-votes {
opacity: 0;
clip-path: inset(0 100% 0 0);
}
.k110-discover-existing-row.is-toasted .k110-discover-existing-korean-track,
.k110-discover-existing-row.is-returning .k110-discover-existing-korean-track {
animation: discoverRowTypeReveal 0.26s steps(8, end) 0.2s forwards;
}
.k110-discover-existing-row.is-toasted .k110-discover-status-word,
.k110-discover-existing-row.is-returning .k110-discover-status-word {
animation: discoverRowTypeReveal 0.18s steps(4, end) 0.48s forwards;
}
.k110-discover-existing-row.is-toasted .k110-discover-existing-user-track,
.k110-discover-existing-row.is-returning .k110-discover-existing-user-track {
animation: discoverRowTypeReveal 0.28s steps(10, end) 0.66s forwards;
}
.k110-discover-existing-row.is-toasted .k110-discover-existing-votes,
.k110-discover-existing-row.is-returning .k110-discover-existing-votes {
animation: discoverRowVoteReveal 0.24s ease-out 0.98s forwards;
}
.k110-discover-existing-korean {
min-height: 38px;
display: flex;
align-items: center;
color: #fff;
font-size: var(--k110-type-heading);
line-height: 1;
font-weight: 900;
text-shadow: 0 0 12px rgba(255,255,255,0.42);
overflow: visible;
white-space: nowrap;
max-width: 100%;
min-width: 0;
justify-content: flex-start;
box-sizing: border-box;
}
.k110-discover-existing-korean-track {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
animation: none;
transform: translateX(0);
will-change: transform;
}
.k110-discover-existing-korean-primary,
.k110-discover-existing-korean-clone,
.k110-discover-existing-korean-gap {
flex: 0 0 auto;
}
.k110-discover-existing-korean.is-marquee {
--text-flow-duration: 7.8s;
overflow: hidden;
}
.k110-discover-existing-korean.is-marquee .k110-discover-existing-korean-track {
min-width: max-content;
max-width: none;
animation: k110TextFlowMarquee var(--text-flow-duration) linear infinite;
}
.k110-discover-existing-user {
display: inline-flex;
align-items: center;
overflow: visible;
white-space: nowrap;
min-width: 0;
max-width: 100%;
flex: 1 1 auto;
}
.k110-discover-existing-user-track {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
transform: translateX(0);
animation: none;
will-change: transform;
}
.k110-discover-existing-user-primary,
.k110-discover-existing-user-clone,
.k110-discover-existing-user-gap {
flex: 0 0 auto;
}
.k110-discover-existing-user.is-marquee {
--text-flow-duration: 6.6s;
overflow: hidden;
}
.k110-discover-existing-user.is-marquee .k110-discover-existing-user-track {
min-width: max-content;
max-width: none;
animation: k110TextFlowMarquee var(--text-flow-duration) linear infinite;
}
.k110-discover-status-word {
flex: 0 0 auto;
font-weight: 900;
margin: 0 0.34em 0 0;
text-shadow: 0 0 11px currentColor;
}
.k110-discover-status-word.is-pending {
color: #FFEE00;
}
.k110-discover-status-word.is-listed {
color: #7CFF00;
}
@keyframes discoverKoreanMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(calc(var(--k110-korean-roll-distance, 100%) * -1)); }
}
@keyframes discoverUserMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(calc(var(--k110-user-roll-distance, 100%) * -1)); }
}
@keyframes discoverRowAppear {
0% { transform: translate3d(0, 12px, 0); opacity: 0; filter: blur(5px); }
100% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
}
@keyframes discoverRowHighlight {
0% { transform: translateX(0); filter: brightness(1); }
22% { transform: translateX(5px); filter: brightness(1.48); }
46% { transform: translateX(-3px); filter: brightness(1.2); }
100% { transform: translateX(0); filter: brightness(1); }
}
@keyframes discoverRowYellowWash {
0% { opacity: 1; background-color: rgba(255,238,0,0); box-shadow: none; }
18% { background-color: rgba(255,238,0,0.42); box-shadow: 0 0 0 1px rgba(255,238,0,0.92), 0 0 22px rgba(255,238,0,0.34); }
100% { opacity: 1; background-color: rgba(255,238,0,0.18); box-shadow: 0 0 0 1px rgba(255,238,0,0.5), 0 0 14px rgba(255,238,0,0.16); }
}
@keyframes discoverRowTypeReveal {
0% { opacity: 0; clip-path: inset(0 100% 0 0); }
100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes discoverRowVoteReveal {
0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: grayscale(1); }
100% { opacity: 0.34; clip-path: inset(0 0 0 0); filter: grayscale(1); }
}
@keyframes discoverRowToast {
0% { transform: translate3d(0, 26px, 0) scale(0.96); opacity: 0; filter: blur(6px); }
70% { transform: translate3d(0, -4px, 0) scale(1.01); opacity: 1; filter: blur(0); }
100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes discoverRowReturnInsert {
0% { transform: translate3d(0, 30px, 0) scale(0.94); opacity: 0; filter: blur(7px); background-color: rgba(255,238,0,0); box-shadow: none; }
28% { transform: translate3d(0, 12px, 0) scale(0.985); opacity: 0.62; filter: blur(3px); }
58% { transform: translate3d(0, -4px, 0) scale(1.012); opacity: 1; filter: blur(0); background-color: rgba(255,238,0,0.24); box-shadow: none; }
100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); background-color: rgba(255,238,0,0.18); box-shadow: none; }
}
.k110-discover-existing-row strong {
color: #7CFF00;
font-size: 1em;
}
.k110-discover-existing-votes {
display: flex;
gap: 2px;
align-items: center;
justify-content: flex-end;
margin-left: clamp(10px, 1vw, 18px);
}
.k110-discover-vote {
width: var(--k110-discover-vote-size);
height: var(--k110-discover-vote-size);
border: 1px solid rgba(255,238,0,0.5);
border-radius: 0;
background:
linear-gradient(0deg, rgba(255,238,0,0.14), rgba(0,0,0,0) 68%),
rgba(0,0,0,0.72);
color: #FFEE00;
box-shadow: none;
font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Sans", sans-serif !important;
font-variant-emoji: text;
font-size: 18px;
font-weight: 900;
line-height: 1;
display: inline-grid;
place-items: center;
cursor: pointer;
text-shadow: 0 0 7px rgba(255,238,0,0.32);
transition: transform 0.08s ease, opacity 0.18s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.k110-discover-vote:hover {
background: #FFEE00;
color: #000;
border-color: #FFEE00;
text-shadow: none;
box-shadow: 0 0 16px rgba(255,238,0,0.38);
}
.k110-discover-vote.k110-vote-down {
border-color: rgba(255,59,48,0.62);
color: #FF3B30;
background:
linear-gradient(0deg, rgba(255,59,48,0.14), rgba(0,0,0,0) 68%),
rgba(0,0,0,0.72);
text-shadow: 0 0 7px rgba(255,59,48,0.28);
}
.k110-discover-vote.k110-vote-down:hover {
background: #FF3B30;
color: #000;
border-color: #FF3B30;
text-shadow: none;
box-shadow: 0 0 16px rgba(255,59,48,0.34);
}
.k110-discover-vote.is-disabled {
opacity: 0.26;
filter: grayscale(1);
}
.k110-discover-existing-row.is-local-pending .k110-discover-vote {
opacity: 0.34;
filter: grayscale(1);
cursor: default;
pointer-events: none;
}
.k110-discover-vote.is-selected {
transform: translateY(1px) scale(0.96);
box-shadow: 0 0 18px currentColor;
}
.k110-discover-vote.is-saving {
opacity: 0.72;
cursor: wait;
}
.k110-discover-existing-row.is-loading {
grid-template-columns: 1fr;
min-height: var(--k110-discover-row-h);
color: #7CFF00;
font-size: clamp(12px, 1.28vw, 15px);
letter-spacing: 0;
}
.k110-discover-existing-row.is-loading .k110-discover-existing-loading {
display: block;
overflow: hidden;
white-space: nowrap;
}
@keyframes discoverGlyphArrive {
0% { transform: translate3d(-50%, calc(var(--k110-discover-glyph-final-y, 0px) + 86px), -1px) scale(0.16); opacity: 0; filter: blur(14px); }
48% { transform: translate3d(-50%, calc(var(--k110-discover-glyph-final-y, 0px) + 18px), 0) scale(1.08); opacity: 1; filter: blur(1px); }
68% { transform: translate3d(-50%, calc(var(--k110-discover-glyph-final-y, 0px) - 9px), 0) scale(1.02); opacity: 1; filter: blur(0); }
82% { transform: translate3d(-50%, calc(var(--k110-discover-glyph-final-y, 0px) + 5px), 0) scale(0.995); opacity: 1; filter: blur(0); }
92% { transform: translate3d(-50%, calc(var(--k110-discover-glyph-final-y, 0px) - 2px), 0) scale(1.002); opacity: 1; filter: blur(0); }
100% { transform: translate3d(-50%, var(--k110-discover-glyph-final-y, 0px), 0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes discoverGlyphExitLeft {
0% { transform: translate3d(-50%, var(--k110-discover-glyph-final-y, 0px), 0) scale(1); opacity: 1; filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness)); }
34% { opacity: 0.42; filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness)); }
100% { transform: translate3d(calc(-50% - 42vw), var(--k110-discover-glyph-final-y, 0px), 0) scale(0.96); opacity: 0; filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness)); }
}
@keyframes discoverGlyphExitRight {
0% { transform: translate3d(-50%, var(--k110-discover-glyph-final-y, 0px), 0) scale(1); opacity: 1; filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness)); }
34% { opacity: 0.42; filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness)); }
100% { transform: translate3d(calc(-50% + 42vw), var(--k110-discover-glyph-final-y, 0px), 0) scale(0.96); opacity: 0; filter: saturate(var(--k110-discover-glow-saturate)) brightness(var(--k110-discover-glow-brightness)); }
}
@keyframes discoverRowExitLeft {
0% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
64% { opacity: 0.82; filter: blur(1px); }
100% { transform: translate3d(calc(-50% - 42vw), 0, 0); opacity: 0; filter: blur(8px); }
}
@keyframes discoverRowExitRight {
0% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
64% { opacity: 0.82; filter: blur(1px); }
100% { transform: translate3d(calc(50% + 42vw), 0, 0); opacity: 0; filter: blur(8px); }
}
.k110-discover-stage.is-exiting .k110-discover-glyph {
animation: discoverGlyphExitLeft 0.34s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
}
.k110-discover-stage.is-exiting .k110-discover-glyph-meta {
animation: none;
}
.k110-discover-stage.is-exiting .k110-discover-meta-unicode-line {
animation: discoverRowExitLeft 0.42s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
}
.k110-discover-stage.is-meta-lock-pinned.is-exiting .k110-discover-glyph-meta {
animation: none;
}
.k110-discover-stage.is-meta-lock-pinned.is-exiting .k110-discover-meta-unicode-line {
animation: discoverRowExitLeft 0.42s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
}
.k110-discover-stage.is-exiting .k110-discover-existing-row {
animation: discoverRowExitLeft 0.46s cubic-bezier(0.68, 0.02, 1, 0.48) forwards;
animation-delay: var(--discover-row-delay, 0ms);
}
.k110-discover-stage.is-exiting-reverse .k110-discover-glyph {
animation: discoverGlyphExitRight 0.34s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
}
.k110-discover-stage.is-exiting-reverse .k110-discover-glyph-meta {
animation: none;
}
.k110-discover-stage.is-exiting-reverse .k110-discover-meta-unicode-line {
animation: discoverRowExitRight 0.42s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
}
.k110-discover-stage.is-meta-lock-pinned.is-exiting-reverse .k110-discover-glyph-meta {
animation: none;
}
.k110-discover-stage.is-meta-lock-pinned.is-exiting-reverse .k110-discover-meta-unicode-line {
animation: discoverRowExitRight 0.42s cubic-bezier(0.72, 0.02, 1, 0.48) forwards;
}
.k110-discover-stage .k110-discover-meta-group-line,
.k110-discover-stage .k110-discover-meta-subgroup-line,
.k110-discover-stage.is-meta-lock-pinned .k110-discover-meta-group-line,
.k110-discover-stage.is-meta-lock-pinned .k110-discover-meta-subgroup-line {
animation: none;
transform: none;
opacity: 1;
filter: none;
}
.k110-discover-stage.is-exiting-reverse .k110-discover-existing-row {
animation: discoverRowExitRight 0.46s cubic-bezier(0.68, 0.02, 1, 0.48) forwards;
animation-delay: var(--discover-row-delay, 0ms);
}
.k110-discover-stage.is-exhausted .k110-discover-glyph-grid,
.k110-discover-stage.is-exhausted .k110-discover-glyph-meta,
.k110-discover-stage.is-exhausted #discoverKorean,
.k110-discover-stage.is-exhausted .k110-grid-label {
opacity: 0;
pointer-events: none;
transition: opacity 0.52s ease;
}
.k110-discover-stage.is-exhausted .k110-discover-glyph,
.k110-discover-glyph.is-dom-message {
color: #7CFF00;
font-size: min(var(--k110-type-heading), clamp(18px, 2.1vw, 24px));
line-height: 1.24;
white-space: normal;
word-break: keep-all;
overflow-wrap: normal;
text-wrap: balance;
max-width: min(420px, 72%);
margin: 0 auto;
text-align: center;
text-shadow: 0 0 10px rgba(124,255,0,0.42);
animation: discoverGlyphArrive 0.52s cubic-bezier(0.15, 0.95, 0.26, 1.15) both;
}
.k110-discover-bottom {
display: grid;
--k110-panel-primary: #FFEE00;
--control-slot-line-color: rgba(255,238,0,0.58);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--k110-button-cluster-gap);
align-items: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
grid-template-areas:
"input buttons buttons";
background: rgba(0,0,0,0.3);
padding: var(--k110-button-inset);
box-sizing: border-box;
}
.k110-discover-status {
--k110-panel-primary: #FFEE00;
grid-area: auto;
width: 100%;
min-width: 0;
max-width: 100%;
justify-self: stretch;
align-self: stretch;
margin-top: 0;
min-height: var(--k110-bar-h, calc(52px * 2 / 3));
height: var(--k110-bar-h, calc(52px * 2 / 3));
position: relative;
border: var(--k110-panel-line-w) solid rgba(255,238,0,0.58);
border-radius: 0;
background-color: rgba(0,0,0,0.72);
background-image: none;
color: #FFEE00;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
justify-content: stretch;
padding: 0;
box-sizing: border-box;
font-size: var(--k110-bar-font-size, clamp(12px, 1.1vw, 15px));
font-weight: 900;
white-space: nowrap;
overflow: hidden;
contain: layout paint;
box-shadow:
inset 0 0 18px rgba(255,238,0,0.08),
0 0 14px rgba(255,238,0,0.1);
animation: none;
}
.k110-discover-status::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--pattern-accent, #FFEE00) 18%, transparent) 0 var(--k110-panel-line-w), transparent var(--k110-panel-line-w) 9px);
background-size: 24px 24px;
background-position: 0 0;
background-repeat: repeat;
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
}
.k110-discover-status::after {
display: none;
}
.k110-discover-status.k110-c-pattern-diagonal {
--pattern-accent: #FFEE00;
background-image: none;
animation: none;
}
.k110-discover-status-label {
display: none;
}
.k110-discover-status .k110-discover-status-track {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
gap: var(--k110-button-cluster-gap);
padding: 0 var(--k110-panel-content-x);
min-width: 0;
flex: 1 1 auto;
color: #FFEE00;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
letter-spacing: 0.02em;
text-shadow: 0 0 9px rgba(255,238,0,0.58);
overflow: hidden;
isolation: isolate;
background: transparent;
}
.k110-discover-tip-pill {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: var(--k110-capsule-min-h);
padding: var(--k110-capsule-pad-y) var(--k110-capsule-pad-x);
border: var(--k110-capsule-line-w) solid #FFEE00;
border-radius: var(--k110-radius-pill);
background: #FFEE00;
color: #000;
font-size: var(--k110-type-micro);
font-weight: 900;
line-height: 1;
text-shadow: none;
}
.k110-discover-status-track::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 130%;
pointer-events: none;
opacity: 0;
background:
linear-gradient(0deg,
rgba(255,238,0,0.34) 0%,
rgba(255,238,0,0.18) 24%,
rgba(255,238,0,0.07) 58%,
rgba(255,238,0,0) 100%);
transform: translateY(14%);
}
.k110-discover-status.is-status-active .k110-discover-status-track::before {
animation: discoverStatusBottomGlow 1.15s ease-out both;
}
.k110-discover-status.is-marquee {
justify-content: stretch;
}
.k110-discover-status.is-marquee .k110-discover-status-track {
animation: discoverStatusMarquee 8.4s linear infinite;
}
.k110-discover-status-text {
position: relative;
z-index: 1;
display: inline-block;
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes discoverStatusBottomGlow {
0% {
opacity: 0;
transform: translateY(18%);
filter: blur(10px);
}
22% {
opacity: 0.92;
transform: translateY(4%);
filter: blur(7px);
}
58% {
opacity: 0.54;
transform: translateY(0);
filter: blur(9px);
}
100% {
opacity: 0;
transform: translateY(-4%);
filter: blur(13px);
}
}
.k110-discover-input-box {
--k110-breathe-speed: 3.1s;
--k110-command-color: #FFEE00;
--k110-command-glow-soft: rgba(255,238,0,0.18);
--k110-command-glow-strong: rgba(255,238,0,0.34);
--discover-input-text-size: clamp(32px, 5vw, 62px);
--discover-input-text-size-long: clamp(22px, 3.8vw, 42px);
--discover-input-text-size-very-long: clamp(18px, 3vw, 34px);
--discover-input-line-height: 1.18;
--discover-input-text-y: 0px;
--discover-input-text-safe-y: 0.14em;
grid-area: input;
position: relative;
min-height: 118px;
height: 100%;
aspect-ratio: auto;
max-height: none;
border: var(--k110-panel-line-w) solid rgba(255,238,0,0.5);
background: rgba(0,0,0,0.42);
color: #FFEE00;
box-shadow: inset 0 -18px 34px rgba(255,238,0,0.08);
box-sizing: border-box;
display: grid;
place-items: center;
overflow: hidden;
cursor: text;
--k110-glow-dim:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color) 46%, transparent),
inset 0 -16px 26px var(--k110-command-glow-soft),
inset 0 -42px 46px color-mix(in srgb, var(--k110-command-glow-soft) 48%, transparent),
0 0 10px color-mix(in srgb, var(--k110-command-color) 8%, transparent);
--k110-glow-bright:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color) 86%, transparent),
inset 0 -24px 34px var(--k110-command-glow-strong),
inset 0 -58px 62px color-mix(in srgb, var(--k110-command-glow-strong) 48%, transparent),
0 0 18px color-mix(in srgb, var(--k110-command-color) 18%, transparent);
--k110-glow-dim-filter: 0.94;
--k110-glow-bright-filter: 1.12;
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
.k110-discover-input-box::before {
content: "▣";
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
color: rgba(255,238,0,0.18);
font-size: clamp(36px, 5.4vw, 68px);
line-height: 1;
font-weight: 300;
pointer-events: none;
}
.k110-discover-input-box.has-value::before,
.k110-discover-input-box.is-focused::before {
opacity: 0.16;
}
.k110-discover-input-box.is-focused {
border-top-color: rgba(255,238,0,0.92);
background:
linear-gradient(0deg, rgba(255,238,0,0.16) 0%, rgba(255,238,0,0.06) 42%, rgba(0,0,0,0) 76%),
rgba(0,0,0,0.46);
box-shadow:
inset 0 -20px 38px rgba(255,238,0,0.22),
inset 0 -52px 78px rgba(255,238,0,0.1),
0 0 18px rgba(255,238,0,0.18);
}
.k110-discover-bottom.has-register .k110-discover-input-box {
animation: none;
filter: none;
box-shadow:
inset 0 -12px 24px rgba(255,238,0,0.08),
inset 0 0 0 1px rgba(255,238,0,0.22);
}
.k110-discover-input-visual {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: #FFEE00;
font-size: var(--discover-input-text-size);
line-height: var(--discover-input-line-height);
font-weight: 900;
text-align: center;
text-shadow: 0 0 10px rgba(255,238,0,0.42);
width: calc(100% - (var(--discover-input-text-safe-x, 12px) * 2));
max-width: calc(100% - (var(--discover-input-text-safe-x, 12px) * 2));
min-height: calc(1em * var(--discover-input-line-height));
max-height: none;
padding-block: var(--discover-input-text-safe-y);
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
overflow: visible;
transform: translateY(var(--discover-input-text-y));
-webkit-mask-image: none;
mask-image: none;
clip-path: none;
}
.k110-discover-input-visual.is-long {
font-size: var(--discover-input-text-size-long);
line-height: var(--discover-input-line-height);
max-width: calc(100% - (var(--discover-input-text-safe-x, 14px) * 2));
}
.k110-discover-input-visual.is-very-long {
font-size: var(--discover-input-text-size-very-long);
line-height: var(--discover-input-line-height);
max-width: calc(100% - (var(--discover-input-text-safe-x, 14px) * 2));
}
.k110-discover-caption {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 1;
color: rgba(255,238,0,0.58);
font-size: clamp(10px, 1.45vw, 13px);
line-height: 1.2;
font-weight: 900;
text-shadow: 0 0 8px rgba(255,238,0,0.2);
text-align: center;
pointer-events: none;
}
.k110-discover-input-box.has-value .k110-discover-caption {
display: none;
}
#discoverInput {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
padding: 0;
background: transparent;
color: transparent;
caret-color: transparent;
}
.k110-discover-button-stack {
grid-area: buttons;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-column: span 2;
gap: var(--k110-button-cluster-gap);
min-width: 0;
min-height: 0;
}
.k110-discover-register,
.k110-discover-next {
--k110-command-color: #7CFF00;
--k110-command-fill: #7CFF00;
--k110-command-glow-soft: rgba(124,255,0,0.16);
--k110-command-glow-strong: rgba(124,255,0,0.36);
position: relative;
isolation: isolate;
min-height: 0;
border: 0;
background: transparent;
color: var(--k110-command-color);
box-shadow: none;
font-size: 16px;
font-weight: 900;
cursor: pointer;
clip-path: none;
text-shadow: 0 0 8px var(--k110-command-glow-strong);
transition: transform 0.12s ease, color 0.16s ease, filter 0.16s ease !important;
overflow: visible;
}
.k110-discover-register::before,
.k110-discover-next::before,
.k110-discover-register::after,
.k110-discover-next::after {
content: "";
position: absolute;
pointer-events: none;
clip-path: none;
}
.k110-discover-register::before,
.k110-discover-next::before {
inset: 0;
z-index: -2;
border: 1px solid var(--k110-command-color);
background: transparent;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.7),
0 0 12px var(--k110-command-glow-soft);
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
.k110-discover-register::after,
.k110-discover-next::after {
inset: 1px;
z-index: -1;
background:
linear-gradient(0deg, var(--k110-command-glow-soft) 0%, rgba(0,0,0,0) 64%),
rgba(0,0,0,0.86);
transition: background 0.16s ease, box-shadow 0.16s ease;
}
.k110-discover-register {
--k110-command-color: #777;
--k110-command-fill: #777;
--k110-command-glow-soft: rgba(160,160,160,0.08);
--k110-command-glow-strong: rgba(160,160,160,0.16);
color: #777;
text-shadow: none;
cursor: not-allowed;
}
.k110-discover-bottom.has-register .k110-discover-register {
--k110-command-color: #FFEE00;
--k110-command-fill: #FFEE00;
--k110-command-glow-soft: rgba(255,238,0,0.16);
--k110-command-glow-strong: rgba(255,238,0,0.38);
color: #FFEE00;
text-shadow: none;
cursor: pointer;
animation: k110-discover-register-breathe 2.3s ease-in-out infinite;
}
.k110-discover-next {
--k110-command-color: #FFEE00;
--k110-command-fill: #FFEE00;
--k110-command-glow-soft: rgba(255,238,0,0.16);
--k110-command-glow-strong: rgba(255,238,0,0.38);
color: rgba(255,238,0,0.74);
text-shadow: 0 0 6px rgba(255,238,0,0.22);
}
.k110-discover-bottom.has-register .k110-discover-register:hover,
.k110-discover-next:hover {
color: #000;
text-shadow: none;
filter: drop-shadow(0 0 14px var(--k110-command-glow-strong));
}
.k110-discover-bottom.has-register .k110-discover-register:hover::after,
.k110-discover-next:hover::after {
background: var(--k110-command-fill);
box-shadow:
inset 0 0 18px rgba(255,255,255,0.16),
0 0 22px var(--k110-command-glow-strong);
}
.k110-discover-bottom.has-register .k110-discover-next {
color: rgba(255,238,0,0.48);
filter: saturate(0.75);
}
.k110-discover-bottom.has-register .k110-discover-next::before {
opacity: 0.54;
}
.k110-discover-bottom.has-register .k110-discover-register::before {
border-color: rgba(255,238,0,0.98);
box-shadow:
inset 0 0 0 1px rgba(255,238,0,0.38),
0 0 18px rgba(255,238,0,0.5),
0 0 42px rgba(255,238,0,0.18);
}
.k110-discover-bottom.has-register .k110-discover-register::after {
background:
linear-gradient(0deg, rgba(255,238,0,0.98) 0%, rgba(255,238,0,0.92) 58%, rgba(255,238,0,0.76) 100%);
box-shadow:
inset 0 0 32px rgba(255,255,255,0.22),
inset 0 -20px 28px rgba(255,255,255,0.18);
}
.k110-discover-bottom.has-register .k110-discover-register {
color: #000;
text-shadow: none;
}
.k110-discover-register.is-command-burst::before,
.k110-discover-next.is-command-burst::before {
animation: k110-discover-command-burst 0.46s ease-out both;
}
#reviewPanel .k110-vote-btn.is-command-burst,
#reviewCard .k110-review-option.is-command-burst,
#reviewPanel .k110-report-btn.is-command-burst {
background: var(--k110-command-fill, #B45CFF) !important;
color: #000 !important;
text-shadow: none !important;
transform: scale(0.985) !important;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-fill, #B45CFF) 62%, #fff),
inset 0 -18px 30px rgba(255,255,255,0.2),
0 0 18px var(--k110-command-glow-strong, rgba(180,92,255,0.52)),
0 0 46px var(--k110-command-glow-soft, rgba(180,92,255,0.22)) !important;
}
#reviewPanel .k110-vote-btn.is-command-burst::before,
#reviewPanel .k110-report-btn.is-command-burst::before {
color: #000;
text-shadow: none;
filter: none;
}
#reviewPanel .k110-vote-btn::after,
#reviewCard .k110-review-option::after,
#reviewPanel .k110-report-btn::after {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
pointer-events: none;
opacity: 0;
border: 1px solid var(--k110-command-fill, #B45CFF);
background: var(--k110-command-fill, #B45CFF);
box-shadow:
0 0 18px var(--k110-command-glow-strong, rgba(180,92,255,0.52)),
0 0 52px var(--k110-command-glow-soft, rgba(180,92,255,0.22));
}
#reviewPanel .k110-vote-btn.is-command-burst::after,
#reviewCard .k110-review-option.is-command-burst::after,
#reviewPanel .k110-report-btn.is-command-burst::after {
animation: k110-command-button-burst 0.52s ease-out both;
}
@keyframes k110-command-button-burst {
0% {
transform: scale(0.985);
opacity: 0.72;
}
100% {
transform: scale(1.1);
opacity: 0;
}
}
@keyframes k110-discover-register-breathe {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.18) drop-shadow(0 0 18px rgba(255,238,0,0.42)); }
}
@keyframes k110-discover-command-burst {
0% {
transform: scale(1);
opacity: 1;
box-shadow:
inset 0 0 0 1px rgba(255,238,0,0.44),
0 0 12px var(--k110-command-glow-soft);
}
100% {
transform: scale(1.08);
opacity: 0;
box-shadow:
inset 0 0 0 1px rgba(255,238,0,0),
0 0 24px var(--k110-command-glow-strong),
0 0 58px var(--k110-command-glow-soft);
}
}
.k110-discover-bottom.has-register .k110-discover-register:active,
.k110-discover-next:active {
transform: scale(0.985);
}
@keyframes discoverStatusMarquee {
0% { transform: translateX(0); }
18% { transform: translateX(0); }
100% { transform: translateX(calc(var(--k110-status-roll-distance, 100%) * -1)); }
}
.k110-retro-loader {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 30000;
display: none;
align-items: center;
gap: 12px;
background: #000;
color: #7CFF00;
border: 4px solid #fff;
box-shadow: 8px 8px 0 #7CFF00;
padding: 18px 24px;
font-size: 20px;
font-weight: 900;
letter-spacing: 0;
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel .k110-box {
height: auto;
max-height: none;
display: block;
}
}
.k110-retro-loader.is-active {
display: flex;
}
body.is-contribution-warping .k110-ui,
body.is-contribution-warping .k110-hero,
body.is-contribution-warping #authModal,
body.is-contribution-warping #starwarsView,
body.is-contribution-warping #k110RetroLoader {
display: none !important;
}
body.is-contribution-warping .k110-header {
animation: k110HeaderExitTop 0.7s ease-in forwards;
pointer-events: none;
}
@keyframes k110HeaderExitTop {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-130%); opacity: 0; }
}
#k110LoaderGlyph {
width: 24px;
display: inline-block;
text-align: center;
}
/* 토스트 완료 변형 (요구사항 13-1, 13-11, 13-12 — Figma node 13:332 / 13:333).
기존 로더 규칙(.k110-retro-loader / .is-active / #k110LoaderGlyph)은 수정하지 않고
data-variant 속성 선택자 분기만 더한다. 진행 변형 렌더는 그대로 유지된다(13-5).
태스크 12.1 Figma 실측 완료: copy done(13:332) 본문은 13px, image done(13:333)
본문은 12px로 1px 차이가 있다. 현재 loader API는 액션별 style을 전달하지 않으므로
완료 변형 본문을 공통 12px/900으로 정규화한다. */
.k110-retro-loader[data-variant="done"] {
box-sizing: border-box;
width: 293px;
max-width: calc(100vw - 24px);
height: 86px;
flex-direction: column;
justify-content: center;
gap: 0;
padding: 10px 18px;
border: 1px solid #fff;
background: #000;
box-shadow: 6px 6px 0 #9eeb47;
color: #fff;
text-align: center;
font-size: 12px;
font-weight: 900;
letter-spacing: -0.72px;
line-height: normal;
}
/* 13-11: 완료 변형은 글리프 순환을 중지하고 글리프를 화면에 노출하지 않는다.
노드는 13-6 의 식별자 유지 요건 때문에 DOM 에 남기고 표시만 끊는다.
특이도 (1,1,0) 이라 위 #k110LoaderGlyph (1,0,0) 를 !important 없이 덮는다. */
.k110-retro-loader[data-variant="done"] #k110LoaderGlyph {
display: none;
}
/* 13-1: 문구 행을 개별 행 노드로 세로 배치한다. 진행 변형의 #k110LoaderText 는
선택자에 포함되지 않으므로 종전처럼 1행 가로 배치를 유지한다. */
.k110-retro-loader[data-variant="done"] #k110LoaderText {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 5px;
}
/* Figma 공통 헤드라인은 13px/900/#9eeb47, 공통 본문은 위 결정대로 12px/900/white다. */
.k110-retro-loader[data-variant="done"] .k110-loader-line:first-child {
color: #9eeb47;
font-size: 13px;
font-weight: 900;
}
.k110-retro-loader[data-variant="done"] .k110-loader-line:not(:first-child) {
color: #fff;
font-size: 12px;
font-weight: 900;
}
.k110-status-text {
margin-top: 14px;
color: #0b7f00;
font-size: 13px;
font-weight: 900;
}
.k110-design-output-wrap {
position: sticky;
top: var(--k110-edge-y);
z-index: 45;
height: clamp(164px, 21vh, 220px);
min-height: 164px;
flex: 0 0 clamp(164px, 21vh, 220px);
padding: clamp(14px, 1.8vh, 20px) clamp(16px, 2vw, 24px);
box-sizing: border-box;
cursor: text;
overflow: hidden;
}
#designOutput {
color: var(--k110-alien-output-color, #7CFF00);
font-size: clamp(112px, 12vw, 150px);
font-weight: 900;
word-break: normal;
overflow-wrap: normal;
white-space: pre-wrap;
min-height: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
outline: none;
line-height: 1;
caret-color: transparent;
cursor: text;
text-shadow: var(--k110-alien-output-glow, 0 0 10px rgba(124,255,0,0.72));
transition: font-size 0.22s cubic-bezier(0.16, 0.86, 0.32, 1), line-height 0.22s cubic-bezier(0.16, 0.86, 0.32, 1) !important;
}
#designOutput.is-compact {
font-size: clamp(52px, 6vw, 84px);
line-height: 1.08;
}
#designOutput.is-dense {
font-size: clamp(34px, 4.2vw, 58px);
line-height: 1.12;
}
#designOutput.is-wrapped {
word-break: break-all;
overflow-wrap: anywhere;
}
#designOutput:empty:before {
content: "";
}
#designIdleMarquee {
position: absolute;
left: 18px;
right: 18px;
top: clamp(14px, 1.8vh, 20px);
bottom: clamp(14px, 1.8vh, 20px);
z-index: 3;
overflow: hidden;
pointer-events: none;
display: none;
color: #7CFF00;
font-weight: 900;
}
#designIdleMarquee.is-visible {
display: none;
grid-template-rows: repeat(3, 1fr);
align-content: stretch;
gap: 0;
}
#designIdleMarquee .marquee-line {
display: flex;
width: max-content;
white-space: nowrap;
align-items: center;
min-height: 100%;
font-size: clamp(22px, 2.8vw, 40px);
line-height: 1;
animation: k110DesignMarquee 10s linear infinite;
}
#designIdleMarquee .marquee-line:nth-child(2) {
animation-delay: -3.33s;
}
#designIdleMarquee .marquee-line:nth-child(3) {
animation-delay: -6.66s;
}
#designIdleMarquee .marquee-line span {
display: inline-block;
margin-right: 66%;
}
@keyframes k110DesignMarquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-50%); }
}
#designGhostCaret {
position: absolute;
width: 10px;
height: 1.05em;
min-height: 0;
background: #7CFF00;
box-shadow: 0 0 10px rgba(124,255,0,0.85);
pointer-events: none;
z-index: 4;
opacity: 0;
animation: k110OutputCaretBlink 0.9s steps(1, end) infinite;
}
#designPanel.is-active #designGhostCaret {
opacity: 1;
}
#designPanel.is-active #designGhostCaret.is-hidden {
opacity: 0 !important;
animation: none !important;
}
#designOutput::selection,
#designOutput *::selection {
background: var(--k110-panel-primary, #00E5FF);
color: #001014;
-webkit-text-fill-color: #001014;
text-shadow: none;
}
@keyframes k110OutputCaretBlink {
0%, 45% { opacity: 1; }
46%, 100% { opacity: 0; }
}
#designCopyBtn,
#designBackspaceBtn {
position: absolute;
right: 14px;
width: 70px;
height: calc((100% - 42px) / 2);
min-height: 0;
padding: 0 8px;
box-sizing: border-box;
border: 0;
border-radius: 10px;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
transform: none !important;
}
#designCopyBtn {
bottom: 14px;
background: #fff;
color: #000;
font-size: 13px;
font-weight: 900;
display: none;
}
#designBackspaceBtn {
top: 14px;
background: #FF3B30;
color: #fff;
font-size: 22px;
font-weight: 900;
}
#designCopyBtn:active,
#designBackspaceBtn:active {
transform: scale(0.96) !important;
box-shadow: none !important;
}
.k110-copy-icon {
position: relative;
width: 15px;
height: 17px;
display: inline-block;
flex: 0 0 auto;
}
.k110-copy-icon::before,
.k110-copy-icon::after {
content: "";
position: absolute;
width: 10px;
height: 12px;
border: 2px solid currentColor;
border-radius: 1px;
box-sizing: border-box;
}
.k110-copy-icon::before {
left: 1px;
top: 4px;
opacity: 0.62;
}
.k110-copy-icon::after {
left: 4px;
top: 1px;
}
.k110-design-body {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(78px, 11vw, 118px);
grid-template-rows: minmax(0, 1fr) clamp(78px, 11vw, 118px);
gap: 14px;
margin-top: 18px;
color: #000;
flex: 1 1 auto;
min-height: clamp(352px, calc(var(--k110-panel-max-h) - 282px), 560px);
min-width: 0;
max-width: 100%;
overflow: visible;
padding: 0;
box-sizing: border-box;
}
.k110-design-body > div {
min-width: 0;
max-width: 100%;
}
.k110-input-col {
position: relative;
grid-column: 2;
grid-row: 2;
align-self: stretch;
justify-self: stretch;
z-index: 22;
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
#charInput {
--k110-char-input-fit-size: clamp(28px, 4vw, 48px);
width: 100%;
height: 100%;
min-height: 0;
border: 2px solid #7CFF00;
border-radius: 10px;
background: #000;
font-size: var(--k110-char-input-fit-size);
font-weight: 900;
text-align: center;
outline: none;
box-shadow: inset 0 0 0 1px rgba(124,255,0,0.32), 0 0 12px rgba(124,255,0,0.22);
box-sizing: border-box;
line-height: 1.1;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
caret-color: transparent;
overflow: hidden;
cursor: text;
transform-origin: 100% 100%;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
animation: k110SourceSlotArrive 1.05s cubic-bezier(0.18, 0.86, 0.22, 1) both, k110SourceSlotBorder 2.4s linear 1.05s infinite;
}
#charInput:focus,
#charInput.is-focused {
border-color: #00E5FF;
box-shadow: inset 0 0 0 1px rgba(0,229,255,0.5), 0 0 15px rgba(0,229,255,0.28);
}
#charInput.is-special-mode {
color: #fff;
border-color: #fff;
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1);
background-image: var(--k110-neon-roll-gradient);
background-size: 620% 100%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.72),
0 0 22px rgba(124,255,0,0.7),
0 0 34px rgba(0,229,255,0.46),
0 0 44px rgba(255,92,200,0.38);
animation: k110FxNeonRollFill var(--k110-neon-roll-duration) linear infinite, k110SourceSpecialPulse 1.1s ease-in-out infinite;
}
#charInput.is-special-mode {
gap: 1px;
padding: 0 6px;
white-space: nowrap;
}
#charInput.is-special-mode .char-token {
background-image: none !important;
color: #000 !important;
-webkit-text-fill-color: #000 !important;
-webkit-background-clip: border-box;
background-clip: border-box;
filter: none !important;
text-shadow: none;
animation: none !important;
}
.char-token.is-color-rolling {
background-image: var(--k110-neon-roll-gradient);
background-size: 620% 100%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
filter:
saturate(1.3)
brightness(1.08)
drop-shadow(0 0 6px color-mix(in srgb, var(--k110-neon-roll-c1) 58%, transparent));
animation: k110FxNeonRollText var(--k110-neon-roll-speed-3) linear infinite;
}
.char-token.is-gradient {
color: transparent !important;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
filter: saturate(1.36) brightness(1.08) drop-shadow(0 0 5px rgba(255,255,255,0.36));
text-shadow: none;
}
.k110-input-particle {
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--particle-color);
pointer-events: none;
box-shadow: 0 0 9px var(--particle-color);
animation: k110SourceParticleBurst 0.72s ease-out both;
}
@keyframes k110SourceSpecialPulse {
0%, 100% { filter: brightness(1); }
45% { filter: brightness(1.35); }
}
@keyframes k110SourceParticleBurst {
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(1.2); }
}
#charInputNative {
position: absolute;
left: 12px;
top: 12px;
width: 1px;
height: 1px;
opacity: 0;
border: 0;
padding: 0;
background: transparent;
color: transparent;
caret-color: transparent;
pointer-events: none;
}
@keyframes k110SourceSlotArrive {
0% {
background: #fff;
border-width: 5px;
border-color: #000;
border-radius: 0;
box-shadow: 6px 6px 0 #333;
transform: translate(-8px, -8px) scale(2);
}
64% {
background: #fff;
border-color: #000;
box-shadow: 6px 6px 0 #333;
}
100% {
background: #000;
border-width: 2px;
border-color: #7CFF00;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(124,255,0,0.32), 0 0 12px rgba(124,255,0,0.22);
transform: translate(0, 0) scale(1);
}
}
@keyframes k110SourceSlotBorder {
0%, 100% {
border-color: #7CFF00;
box-shadow: inset 0 0 0 1px rgba(124,255,0,0.34), 0 0 12px rgba(124,255,0,0.22);
}
25% {
border-color: #00E5FF;
box-shadow: inset 0 0 0 1px rgba(0,229,255,0.34), 0 0 12px rgba(0,229,255,0.2);
}
50% {
border-color: #FFEE00;
box-shadow: inset 0 0 0 1px rgba(255,238,0,0.32), 0 0 12px rgba(255,238,0,0.18);
}
75% {
border-color: #FF5CC8;
box-shadow: inset 0 0 0 1px rgba(255,92,200,0.32), 0 0 12px rgba(255,92,200,0.18);
}
}
.char-token {
display: inline-block;
min-width: 0.7em;
}
#resetBtn {
position: absolute;
right: 6px;
top: 6px;
width: 24px;
height: 24px;
min-height: 0;
padding: 0;
border: 0;
border-radius: 6px;
background: #FF3B30;
color: #fff;
font-size: 0;
line-height: 1;
box-shadow: none !important;
z-index: 3;
}
#resetBtn:before {
content: "×";
font-size: 17px;
font-weight: 900;
}
.k110-glyph-grid {
--k110-glyph-grid-scroll-offset: clamp(18px, 1.8vw, 28px);
--k110-glyph-grid-row: 73px;
grid-column: 1 / -1;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
max-width: 100%;
flex: 1 1 auto;
height: 100%;
min-height: 0;
max-height: 100%;
overflow-x: visible;
overflow-y: auto;
padding: 8px var(--k110-glyph-grid-scroll-offset) 34px 0;
margin-right: calc(var(--k110-glyph-grid-scroll-offset) * -1);
box-sizing: border-box;
transition: max-height 0.2s ease !important;
overscroll-behavior: contain;
scroll-padding-top: 10px;
scroll-padding-bottom: 34px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(124,255,0,0.82) transparent;
}
.k110-glyph-grid::-webkit-scrollbar {
width: 6px;
}
.k110-glyph-grid::-webkit-scrollbar-track {
background: rgba(255,255,255,0.08);
border-radius: 999px;
}
.k110-glyph-grid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #7CFF00, #12D8FF, #FF5CC8);
border-radius: 999px;
}
.k110-glyph-grid.is-special-mode {
align-content: start;
}
.k110-design-body > div:last-child {
display: contents;
}
#designStatus {
grid-column: 1;
grid-row: 2;
align-self: stretch;
margin-top: 0;
min-width: 0;
min-height: 0;
padding: 10px 14px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
color: #7CFF00;
background:
repeating-linear-gradient(0deg, rgba(124,255,0,0.14) 0, rgba(124,255,0,0.14) 2px, transparent 2px, transparent 5px),
linear-gradient(90deg, rgba(124,255,0,0.18), transparent 20%, transparent 80%, rgba(124,255,0,0.18)),
#000;
border: 1px solid #7CFF00;
border-radius: 10px;
box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px rgba(124,255,0,0.72);
font-size: clamp(13px, 1.4vw, 17px);
line-height: 1.25;
white-space: normal;
}
.glyph-group {
position: relative;
--glyph-color: #7CFF00;
--glyph-color-2: var(--glyph-color);
--k110-glyph-group-head-w: 64px;
--k110-glyph-group-head-gap: calc(var(--k110-gap, 2px) * 3);
width: 100%;
min-width: 0;
max-width: 100%;
display: grid;
grid-template-columns: var(--k110-glyph-group-head-w) minmax(0, 1fr);
align-items: start;
gap: var(--k110-glyph-group-head-gap);
border: 0;
background: transparent;
padding: 0 0 3px;
box-shadow: none;
box-sizing: border-box;
overflow: visible;
animation: k110GlyphGroupAppear 0.28s cubic-bezier(0.2, 0.88, 0.24, 1) both;
}
.glyph-group:nth-child(1) { animation-delay: 0.02s; }
.glyph-group:nth-child(2) { animation-delay: 0.08s; }
.glyph-group:nth-child(3) { animation-delay: 0.14s; }
.glyph-group:nth-child(4) { animation-delay: 0.2s; }
@keyframes k110GlyphGroupAppear {
0% { opacity: 0; transform: translateY(10px) scale(0.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.glyph-group.is-flat {
background: transparent;
}
.glyph-group-label {
position: relative;
z-index: 3;
--glyph-bracket-line: 3px;
--glyph-bracket-arm: 6px;
width: 100%;
height: 64px;
min-height: 64px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
align-self: flex-start;
color: var(--glyph-color);
font-size: 12px;
font-weight: 900;
line-height: 1.05;
text-align: center;
margin: 0;
padding: 0 8px;
box-sizing: border-box;
overflow: hidden;
}
.k110-glyph-group-head {
--glyph-bracket-line: var(--k110-panel-line-w, 1px);
--glyph-bracket-arm: calc(var(--k110-gap, 2px) * 3);
}
.glyph-group-label:before {
content: "";
position: absolute;
inset: 0;
width: auto;
height: auto;
background:
linear-gradient(var(--glyph-color), var(--glyph-color)) left top / var(--glyph-bracket-line) 100% no-repeat,
linear-gradient(var(--glyph-color), var(--glyph-color)) right top / var(--glyph-bracket-line) 100% no-repeat,
linear-gradient(var(--glyph-color), var(--glyph-color)) left top / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat,
linear-gradient(var(--glyph-color), var(--glyph-color)) left bottom / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat,
linear-gradient(var(--glyph-color), var(--glyph-color)) right top / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat,
linear-gradient(var(--glyph-color), var(--glyph-color)) right bottom / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat;
pointer-events: none;
}
.glyph-group-label:after {
display: none;
}
.glyph-group-label-pill {
position: static;
width: 100%;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--glyph-color);
font-size: 24px;
line-height: 0.9;
background: transparent;
border: 0;
border-radius: 0;
white-space: pre-line;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.k110-glyph-group-head-glyph {
font-size: var(--k110-type-body);
font-weight: 900;
}
.glyph-group-label-pill:before,
.glyph-group-label-pill:after {
display: none;
}
.glyph-group-label-pill:before {
top: 3px;
}
.glyph-group-label-pill:after {
bottom: 3px;
}
.glyph-group-count {
display: block;
width: 100%;
color: var(--glyph-color);
font-size: 10px;
font-weight: 900;
line-height: 1;
text-align: center;
}
.k110-glyph-group-head-count {
font-size: var(--k110-type-micro);
}
.glyph-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: visible;
padding: 0 24px 8px 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
overscroll-behavior: contain;
cursor: grab;
user-select: none;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--glyph-color) transparent;
}
.glyph-group.has-left .glyph-scroll {
padding-left: 20px;
}
.glyph-group.has-right .glyph-scroll {
padding-right: 20px;
}
.glyph-group.has-left.has-right .glyph-scroll {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.glyph-group.has-left:not(.has-right) .glyph-scroll {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 100%);
}
.glyph-group.has-right:not(.has-left) .glyph-scroll {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.glyph-scroll.is-wrap {
flex-wrap: wrap;
overflow: visible;
padding: 4px 0 8px;
scroll-snap-type: none;
cursor: default;
user-select: auto;
}
.glyph-scroll.is-grid-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
align-items: stretch;
overflow: visible;
padding: 4px 0 8px;
cursor: default;
user-select: auto;
touch-action: pan-y;
}
.glyph-scroll.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}
.glyph-scroll::-webkit-scrollbar {
height: 3px;
}
.glyph-scroll::-webkit-scrollbar-track {
background: rgba(255,255,255,0.08);
border-radius: 999px;
}
.glyph-scroll::-webkit-scrollbar-thumb {
background: var(--glyph-color);
border-radius: 999px;
}
.glyph-group.has-left:before,
.glyph-group.has-right:after {
position: absolute;
top: 8px;
bottom: 24px;
z-index: 4;
width: 16px;
min-height: 28px;
display: grid;
place-items: center;
background: transparent;
color: var(--glyph-color);
border: 0;
font-size: 22px;
font-weight: 900;
line-height: 1;
opacity: 0.82;
pointer-events: none;
text-shadow: 0 0 6px currentColor;
}
.glyph-group.has-left:before {
content: "<";
left: 66px;
animation: k110ScrollNudgeLeft 0.9s ease-in-out infinite;
}
.glyph-group.has-right:after {
content: ">";
right: -2px;
animation: k110ScrollNudgeRight 0.9s ease-in-out infinite;
}
@keyframes k110ScrollNudgeRight {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(2px); }
}
@keyframes k110ScrollNudgeLeft {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-2px); }
}
.glyph-item {
flex: 0 0 64px;
width: 64px;
min-width: 64px;
max-width: 64px;
height: 64px;
min-height: 64px;
background: var(--glyph-color);
color: #000;
border: 2px solid #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
cursor: pointer;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.28),
inset 0 -10px 18px rgba(0,0,0,0.16),
0 0 12px color-mix(in srgb, var(--glyph-color) 72%, transparent),
0 0 24px color-mix(in srgb, var(--glyph-color) 38%, transparent);
filter: saturate(1.28) brightness(1.04);
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
scroll-snap-align: start;
padding: 6px 9px;
box-sizing: border-box;
}
.glyph-item.is-color-rolling {
--glyph-roll-delay: 0s;
background: linear-gradient(90deg, #FF00FF 0%, #00FFFF 20%, #7CFF00 40%, #FFFF00 60%, #BF00FF 80%, #FF00FF 100%);
background-size: 500% 100%;
border-color: #000;
color: #000;
text-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.42),
0 0 10px var(--glyph-accent-color, #7CFF00),
0 0 24px color-mix(in srgb, var(--glyph-accent-color, #7CFF00) 62%, transparent),
0 0 42px rgba(255,0,255,0.2);
animation: k110GlyphButtonRoll 1.15s linear infinite;
animation-delay: var(--glyph-roll-delay);
}
.glyph-item.is-color-solid,
.glyph-item.is-color-mixed {
--glyph-glow-a: var(--glyph-accent-color, #7CFF00);
--glyph-glow-b: var(--glyph-glow-a);
--glyph-glow-c: var(--glyph-glow-b);
border-color: #000;
color: #000;
text-shadow: none;
box-shadow:
0 0 12px var(--glyph-glow-a),
0 0 28px color-mix(in srgb, var(--glyph-glow-a) 64%, transparent);
}
.glyph-item.is-color-mixed {
background-size: 620% 100%;
box-shadow:
0 0 10px var(--glyph-glow-a),
0 0 22px color-mix(in srgb, var(--glyph-glow-a) 58%, transparent),
0 0 12px var(--glyph-glow-b),
0 0 28px color-mix(in srgb, var(--glyph-glow-b) 52%, transparent),
0 0 14px var(--glyph-glow-c),
0 0 34px color-mix(in srgb, var(--glyph-glow-c) 46%, transparent);
animation: k110GlyphButtonRoll 1.22s linear infinite;
animation-delay: var(--glyph-roll-delay);
}
@keyframes k110GlyphButtonRoll {
0% {
background-position: 0% 50%;
filter: saturate(1.42) brightness(1.08);
}
100% {
background-position: 500% 50%;
filter: saturate(1.42) brightness(1.08);
}
}
.glyph-item.is-wide {
flex-basis: auto;
width: auto;
min-width: min(100%, max(84px, calc(var(--glyph-units) * 42px)));
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
}
.glyph-scroll.is-grid-wrap .glyph-item {
width: 100%;
min-width: 0;
max-width: none;
flex-basis: auto;
}
.glyph-item:hover {
filter: saturate(1.42) brightness(1.12);
}
#authModal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.72);
display: none;
align-items: center;
justify-content: center;
z-index: 24000;
color: #fff;
padding: clamp(18px, 5vw, 36px);
box-sizing: border-box;
}
.k110-auth-box {
--k110-auth-pad-x: clamp(18px, 5vw, 28px);
--k110-auth-text-size: clamp(16px, 4.2vw, 18px);
--k110-breathe-speed: 3.1s;
--k110-command-color: #7CFF00;
--k110-command-glow-soft: rgba(124,255,0,0.18);
--k110-command-glow-strong: rgba(124,255,0,0.34);
--k110-command-text-top: #2E7000;
--k110-command-text-mid: #7CFF00;
--k110-command-text-bottom: #C8FF8D;
position: relative;
background: rgba(2, 8, 7, 0.78);
border: 1px solid rgba(124,255,0,0.72);
border-radius: 0;
padding: 30px 0 24px;
width: 90%;
max-width: 420px;
box-shadow:
0 0 22px rgba(124,255,0,0.28),
0 0 54px rgba(124,255,0,0.1);
box-sizing: border-box;
overflow: hidden;
}
.k110-c-popup {
--k110-popup-accent: var(--k110-panel-primary, var(--k110-color-green));
--k110-popup-bg: rgba(2, 8, 7, 0.78);
--k110-popup-line: var(--k110-line-1);
border: var(--k110-popup-line) solid color-mix(in srgb, var(--k110-popup-accent) 72%, transparent);
background: var(--k110-popup-bg);
box-shadow:
0 0 0 var(--k110-popup-line) color-mix(in srgb, var(--k110-popup-accent) 38%, transparent),
0 0 22px color-mix(in srgb, var(--k110-popup-accent) 34%, transparent),
0 0 54px color-mix(in srgb, var(--k110-popup-accent) 14%, transparent);
}
.k110-auth-box:before,
.k110-auth-box:after {
position: absolute;
left: 0;
right: 0;
color: #7CFF00;
font-size: var(--k110-auth-text-size);
font-weight: 900;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-shadow: 0 0 9px rgba(124,255,0,0.58);
pointer-events: none;
padding: 0 8px;
box-sizing: border-box;
}
.k110-auth-box:before {
display: none;
content: "";
top: 8px;
}
.k110-auth-box:after {
display: none;
content: "";
bottom: 8px;
}
.k110-auth-box h3 {
color: #7CFF00;
font-size: var(--k110-auth-text-size);
font-weight: 900;
margin: 0;
padding: 3px var(--k110-auth-pad-x) 15px;
line-height: 1;
letter-spacing: 0;
text-shadow: 0 0 12px rgba(124,255,0,0.66);
}
.k110-auth-box h3:before {
display: none;
}
.k110-auth-box h3:after {
display: none;
}
.k110-terminal-field {
--k110-terminal-wave-color: #7CFF00;
--k110-terminal-wave-text: "";
position: relative;
width: 100%;
min-height: 52px;
overflow: hidden;
border-top: 1px solid rgba(124,255,0,0.34);
background: rgba(0,0,0,0.56);
box-shadow: inset 0 0 18px rgba(124,255,0,0.07);
box-sizing: border-box;
}
.k110-terminal-field:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 76%;
pointer-events: none;
opacity: 0;
transform: translateY(16px);
background:
radial-gradient(ellipse at 50% 100%, rgba(124,255,0,0.52) 0%, rgba(124,255,0,0.24) 34%, rgba(124,255,0,0.08) 58%, rgba(124,255,0,0) 76%),
linear-gradient(0deg, rgba(124,255,0,0.22) 0%, rgba(124,255,0,0.08) 38%, rgba(124,255,0,0) 100%);
filter: blur(8px);
transition: opacity 0.32s ease, transform 0.32s ease;
}
.k110-terminal-field:before {
content: "";
display: none;
}
.k110-terminal-wave-layer {
position: absolute;
inset: 0;
z-index: 0;
color: var(--k110-terminal-wave-color);
display: block;
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "Noto Sans Symbols 2", "Noto Sans Symbols", "SFMono-Regular", Menlo, Consolas, monospace;
font-weight: 900;
letter-spacing: 0;
padding: 0;
margin: 0;
opacity: 0;
transform: none;
pointer-events: none;
transition: opacity 0.12s ease;
}
.k110-terminal-wave-row {
display: block;
height: var(--k110-terminal-row-height, 16px);
line-height: var(--k110-terminal-row-height, 16px);
padding: 0;
margin: 0;
white-space: nowrap;
}
.k110-terminal-wave-tile {
display: inline-block;
width: var(--k110-terminal-tile-width, 8px);
height: var(--k110-terminal-row-height, 16px);
line-height: var(--k110-terminal-row-height, 16px);
overflow: hidden;
color: var(--k110-terminal-wave-color);
font-size: var(--k110-terminal-row-size, 16px);
font-weight: 900;
text-align: center;
text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
opacity: 1;
}
.k110-terminal-wave-tile.is-solid {
position: relative;
color: transparent;
text-shadow: none;
}
.k110-terminal-wave-tile.is-solid:before {
content: "";
position: absolute;
inset: 0;
background: var(--k110-terminal-wave-color);
box-shadow: 0 0 9px var(--k110-terminal-wave-color), 0 0 18px var(--k110-terminal-wave-color);
}
.k110-terminal-wave-tile.is-dense {
text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}
.k110-terminal-field:focus-within {
border-top-color: var(--k110-terminal-wave-color);
background: rgba(0,0,0,0.34);
box-shadow: inset 0 2px 0 rgba(124,255,0,0.72), inset 0 0 16px rgba(124,255,0,0.08), 0 0 16px rgba(124,255,0,0.18);
}
.k110-terminal-field:focus-within:after {
opacity: 1;
transform: translateY(0);
}
.k110-terminal-field.is-terminal-wiping .k110-terminal-wave-layer {
opacity: 0.34;
}
.k110-auth-box input {
display: block;
width: 100%;
min-height: 52px;
padding: 13px var(--k110-auth-pad-x);
border: 0;
border-top: 1px solid rgba(124,255,0,0.34);
background: rgba(0,0,0,0.56);
color: #fff;
margin: 0;
font-size: var(--k110-auth-text-size);
font-weight: 900;
box-sizing: border-box;
outline: none;
box-shadow: inset 0 0 18px rgba(124,255,0,0.07);
caret-color: #7CFF00;
}
.k110-terminal-field input {
position: relative;
z-index: 2;
border-top: 0;
background: transparent;
box-shadow: none;
}
.k110-auth-box input:focus {
border-top-color: #7CFF00;
background: rgba(0,0,0,0.18);
box-shadow: none;
}
.k110-auth-box input::placeholder {
color: rgba(185,185,185,0.66);
font-weight: 300;
opacity: 1;
letter-spacing: 0.02em;
}
.k110-auth-box input.is-invalid {
border-top-color: #FF3B30;
background: rgba(255,59,48,0.08);
box-shadow: 0 0 16px rgba(255,59,48,0.32), inset 0 0 16px rgba(255,59,48,0.08);
}
.k110-auth-warning {
display: none;
margin: 0;
padding: 9px var(--k110-auth-pad-x);
border: 0;
border-top: 1px solid rgba(255,59,48,0.58);
background: rgba(0,0,0,0.58);
color: #FF3B30;
font-size: clamp(12px, 3.2vw, 14px);
font-weight: 900;
line-height: 1.25;
box-shadow: 0 0 12px rgba(255,59,48,0.22);
}
.k110-auth-warning.is-active {
display: block;
}
.k110-auth-consent {
display: flex;
align-items: center;
gap: 9px;
min-height: 42px;
margin-top: 10px;
color: #7CFF00;
font-size: var(--k110-auth-text-size);
font-weight: 900;
cursor: pointer;
text-shadow: 0 0 10px rgba(124,255,0,0.48);
}
.k110-auth-consent input {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
min-height: 20px;
flex: 0 0 20px;
margin: 0;
padding: 0;
border: 1px solid rgba(124,255,0,0.78);
background: rgba(0,0,0,0.58);
box-shadow: 0 0 10px rgba(124,255,0,0.18);
display: grid;
place-items: center;
}
.k110-auth-consent input:checked {
background: #7CFF00;
box-shadow: 0 0 15px rgba(124,255,0,0.58);
}
.k110-auth-consent input:checked:before {
content: "✓";
color: #000;
font-size: 16px;
font-weight: 900;
line-height: 1;
}
#authMainBtn {
--k110-auth-button-fill: #7CFF00;
--k110-auth-glow-a: rgba(124,255,0,0.72);
--k110-auth-glow-b: rgba(0,229,255,0.32);
--k110-auth-glow-c: rgba(255,238,0,0.3);
--k110-auth-glow-d: rgba(255,92,200,0.26);
width: 100%;
min-height: 52px;
position: relative;
isolation: isolate;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: #000;
border: 0;
box-shadow: none;
border-radius: 0;
font-size: var(--k110-auth-text-size);
font-weight: 900;
padding: 0 var(--k110-auth-pad-x);
margin: 0;
transform: none !important;
transition: color 0.14s ease !important;
}
#authMainBtn:before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: var(--k110-auth-button-fill);
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
transition: inset 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
}
#authMainBtn:after {
content: "";
position: absolute;
inset: 4px;
z-index: 1;
opacity: 0;
pointer-events: none;
border-radius: 0;
}
#authMainBtn:disabled {
--k110-auth-button-fill: #444;
background: transparent !important;
color: rgba(255,255,255,0.42) !important;
cursor: not-allowed;
box-shadow: none !important;
animation: none !important;
}
#authMainBtn:disabled .k110-front-text {
color: rgba(255,255,255,0.42) !important;
-webkit-text-fill-color: rgba(255,255,255,0.42) !important;
background-image: none !important;
animation: none !important;
text-shadow: none !important;
}
#authMainBtn:disabled:before {
box-shadow: none;
}
#authMainBtn.is-auth-register-ready {
--k110-auth-button-fill: linear-gradient(90deg, #7CFF00 0%, #00E5FF 20%, #FFEE00 40%, #FF5CC8 60%, #B45CFF 80%, #7CFF00 100%);
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
}
#authMainBtn.is-auth-register-ready:before {
background-size: 500% 100%;
animation: k110GlyphButtonRoll 0.72s linear infinite;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.18),
0 0 12px rgba(124,255,0,0.72),
0 0 22px rgba(0,229,255,0.38),
0 0 34px rgba(255,92,200,0.28);
}
#authMainBtn:active,
#authMainBtn.is-pressing {
transform: none !important;
box-shadow: none !important;
}
#authMainBtn:active:before,
#authMainBtn.is-pressing:before {
inset: 4px;
filter: brightness(1.24);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.22),
0 0 18px var(--k110-auth-glow-a),
0 0 34px var(--k110-auth-glow-b);
}
#authMainBtn.is-auth-releasing:before {
animation: k110AuthButtonReleaseFill 0.34s cubic-bezier(0.18, 0.88, 0.2, 1.24);
}
#authMainBtn.is-auth-releasing:after {
animation: k110AuthButtonGlowScatter 0.42s ease-out;
}
@keyframes k110AuthButtonReleaseFill {
0% { inset: 4px; filter: brightness(1.22); }
38% { inset: 0; filter: brightness(1.1); }
52% { inset: 2px; filter: brightness(1.18); }
72% { inset: 0; filter: brightness(1.06); }
84% { inset: 1px; filter: brightness(1.12); }
100% { inset: 0; filter: brightness(1); }
}
@keyframes k110AuthButtonGlowScatter {
0% {
opacity: 0.95;
transform: scale(1);
box-shadow:
0 0 18px var(--k110-auth-glow-a),
0 0 30px var(--k110-auth-glow-b);
}
55% {
opacity: 0.62;
transform: scale(1.16);
box-shadow:
-16px 0 22px var(--k110-auth-glow-a),
16px 0 22px var(--k110-auth-glow-b),
0 -14px 24px var(--k110-auth-glow-c),
0 14px 24px var(--k110-auth-glow-d);
}
100% {
opacity: 0;
transform: scale(1.34);
box-shadow:
-34px 0 10px rgba(124,255,0,0),
34px 0 10px rgba(0,229,255,0),
0 -28px 10px rgba(255,238,0,0),
0 28px 10px rgba(255,92,200,0);
}
}
#authMainBtn .k110-auth-loading-label {
display: inline-block;
min-width: 5.8em;
text-align: right;
}
#authMainBtn .k110-auth-loading-frame {
display: inline-block;
width: 1.2em;
margin-left: 0.35em;
text-align: center;
}
.k110-front-text {
position: relative;
z-index: 3;
pointer-events: none;
filter: none;
}
.k110-auth-box {
--k110-auth-row-h: 52px;
--k110-auth-band-h: calc(var(--k110-auth-row-h) * 2 / 3);
--k110-panel-primary: #7CFF00;
padding: 0;
display: flex;
flex-direction: column;
}
.k110-auth-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
@keyframes k110-auth-band-dots-drift {
0% { background-position: 0 0; }
100% { background-position: 48px 36px; }
}
@keyframes k110-auth-band-dots-drift-rev {
0% { background-position: 0 0; }
100% { background-position: -40px 32px; }
}
.k110-auth-band {
position: relative;
flex: 0 0 var(--k110-auth-band-h);
height: var(--k110-auth-band-h);
min-height: var(--k110-auth-band-h);
overflow: hidden;
background: rgba(0, 0, 0, 0.52);
box-sizing: border-box;
border-bottom: var(--k110-panel-line-w) solid color-mix(in srgb, var(--k110-panel-primary) 72%, transparent);
display: flex;
align-items: stretch;
}
.k110-auth-band-top {
border-top: 0;
}
.k110-auth-band-dots {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-color: transparent;
background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--k110-panel-primary) 26%, transparent) 0.75px, transparent 1.05px);
background-size: var(--k110-bar-dot-size, 5px 5px);
background-repeat: repeat;
opacity: 0.85;
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
}
.k110-auth-band-bottom .k110-auth-band-dots {
background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--k110-panel-primary) 18%, transparent) 0.75px, transparent 1.05px);
animation-name: k110PatternDotFlowReverse;
animation-duration: var(--k110-pattern-flow-speed);
}
.k110-auth-band #authTitle {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
height: 100%;
margin: 0;
padding: 0 calc(var(--k110-auth-pad-x) + var(--k110-auth-band-h)) 0 var(--k110-auth-pad-x);
display: flex;
align-items: center;
border: 0;
background: transparent;
box-shadow: none;
color: #7CFF00;
font-size: var(--k110-type-caption);
font-weight: 900;
line-height: 1;
text-shadow: 0 0 12px rgba(124,255,0,0.66);
}
.k110-auth-spacer {
flex: 0 0 var(--k110-auth-row-h);
height: var(--k110-auth-row-h);
min-height: var(--k110-auth-row-h);
border-top: 1px solid rgba(124,255,0,0.34);
background:
linear-gradient(0deg, rgba(124,255,0,0.045), rgba(0,0,0,0) 64%),
rgba(0,0,0,0.22);
box-sizing: border-box;
pointer-events: none;
}
.k110-auth-close {
--red-action-size: var(--k110-auth-band-h);
--red-action-icon-font-size: calc(var(--k110-auth-band-h) * 0.58);
--red-action-icon-shift-y: -0.015em;
z-index: 3;
}
.k110-auth-close:hover {
background: var(--k110-color-red) !important;
border-color: var(--k110-color-red) !important;
color: #000 !important;
box-shadow:
0 0 14px rgba(255,59,48,0.48),
0 0 28px rgba(255,59,48,0.24) !important;
}
.k110-auth-close:active {
transform: scale(0.94);
}
.k110-auth-close:focus-visible {
outline: none;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.55),
0 0 18px rgba(255, 90, 110, 0.6),
0 0 32px rgba(255, 60, 90, 0.35),
inset 0 0 0 1px rgba(0, 0, 0, 0.32);
}
.k110-auth-body > h3 {
padding: 0 var(--k110-auth-pad-x);
min-height: 52px;
display: flex;
align-items: center;
line-height: 1.2;
border-top: 1px solid rgba(124,255,0,0.34);
background: rgba(22,22,22,0.84);
box-shadow: inset 0 0 18px rgba(124,255,0,0.07);
}
.k110-terminal-field {
background: rgba(22,22,22,0.84);
}
.k110-auth-box input {
background: rgba(22,22,22,0.84);
}
.k110-auth-box input:focus {
background: rgba(16,16,16,0.72);
}
.k110-auth-message-scroll {
width: 100%;
max-height: min(32vh, 280px);
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
border-top: 1px solid #FFEE00;
background: rgba(0, 0, 0, 0.56);
scrollbar-width: thin;
scrollbar-color: rgba(255, 238, 0, 0.72) rgba(0, 0, 0, 0.45);
-webkit-overflow-scrolling: touch;
position: relative;
}
.k110-auth-message-scroll::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.28;
background-image: repeating-linear-gradient(115deg, color-mix(in srgb, #FFEE00 24%, transparent) 0 1px, transparent 1px 6px);
background-size: 18px 18px;
animation: k110StatusSlashFlow var(--k110-pattern-flow-speed) linear infinite;
}
.k110-auth-message-scroll::-webkit-scrollbar {
width: 8px;
}
.k110-auth-message-scroll::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.45);
}
.k110-auth-message-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 238, 0, 0.72);
border-radius: 0;
}
.k110-auth-terminal-feed {
position: relative;
z-index: 1;
padding: 10px var(--k110-auth-pad-x) 12px;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "Noto Sans Mono CJK JP", "SF Mono", Menlo, Consolas, monospace;
font-size: clamp(11px, 3vw, 13px);
font-weight: 700;
line-height: 1.45;
color: #FFEE00;
text-shadow: none;
word-break: keep-all;
}
.k110-auth-feed-line + .k110-auth-feed-line {
margin-top: 8px;
}
.k110-auth-feed-register {
margin-top: 8px;
}
@keyframes k110-auth-consent-appear {
0% { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(4px); }
55% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes k110-ui-glow-breathe {
0%, 100% {
filter: brightness(var(--k110-glow-dim-filter, 0.92));
box-shadow: var(--k110-glow-dim);
}
50% {
filter: brightness(var(--k110-glow-bright-filter, 1.16));
box-shadow: var(--k110-glow-bright);
}
}
@keyframes k110-ui-text-breathe {
0%, 100% {
text-shadow: var(--k110-text-glow-dim);
}
50% {
text-shadow: var(--k110-text-glow-bright);
}
}
@keyframes k110-auth-consent-row-breathe {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(124, 255, 0, 0.46),
inset 0 -1px 0 rgba(124, 255, 0, 0.46),
inset 0 0 22px rgba(124, 255, 0, 0.08),
0 0 10px rgba(124, 255, 0, 0.1),
0 0 24px rgba(124, 255, 0, 0.05);
}
50% {
box-shadow:
inset 0 1px 0 rgba(124, 255, 0, 0.9),
inset 0 -1px 0 rgba(124, 255, 0, 0.9),
inset 0 0 32px rgba(124, 255, 0, 0.18),
0 0 18px rgba(124, 255, 0, 0.26),
0 0 42px rgba(124, 255, 0, 0.12);
}
}
@keyframes k110-auth-consent-chk-breathe {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 6px rgba(124, 255, 0, 0.22),
inset 0 0 8px rgba(124, 255, 0, 0.06);
}
50% {
transform: scale(1.04);
box-shadow:
0 0 16px rgba(124, 255, 0, 0.55),
0 0 26px rgba(124, 255, 0, 0.22),
inset 0 0 10px rgba(124, 255, 0, 0.12);
}
}
@keyframes k110-auth-consent-label-glow {
0%, 100% {
text-shadow:
0 0 8px rgba(124, 255, 0, 0.38),
0 0 18px rgba(124, 255, 0, 0.2);
}
50% {
text-shadow:
0 0 14px rgba(124, 255, 0, 0.85),
0 0 28px rgba(124, 255, 0, 0.5),
0 0 44px rgba(124, 255, 0, 0.22);
}
}
.k110-auth-consent-wrap {
margin-top: 12px;
padding-top: 0;
opacity: 0;
width: calc(100% + 2 * var(--k110-auth-pad-x));
max-width: none;
margin-left: calc(-1 * var(--k110-auth-pad-x));
margin-right: calc(-1 * var(--k110-auth-pad-x));
box-sizing: border-box;
}
.k110-auth-consent-wrap.is-visible {
animation: k110-auth-consent-appear 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.k110-auth-consent-wrap.is-visible .k110-auth-consent {
--k110-glow-dim:
inset 0 1px 0 rgba(124, 255, 0, 0.46),
inset 0 -1px 0 rgba(124, 255, 0, 0.46),
inset 0 0 22px rgba(124, 255, 0, 0.08),
0 0 10px rgba(124, 255, 0, 0.1),
0 0 24px rgba(124, 255, 0, 0.05);
--k110-glow-bright:
inset 0 1px 0 rgba(124, 255, 0, 0.9),
inset 0 -1px 0 rgba(124, 255, 0, 0.9),
inset 0 0 32px rgba(124, 255, 0, 0.18),
0 0 18px rgba(124, 255, 0, 0.26),
0 0 42px rgba(124, 255, 0, 0.12);
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 14px var(--k110-auth-pad-x);
min-height: 48px;
border-top: 1px solid rgba(124, 255, 0, 0.58);
border-bottom: 1px solid rgba(124, 255, 0, 0.58);
background: rgba(0, 0, 0, 0.38);
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out 0.58s infinite;
}
.k110-auth-consent-wrap .k110-auth-consent {
gap: 12px;
margin-top: 0;
text-shadow: none;
}
.k110-auth-consent-wrap.is-visible .k110-auth-consent > span {
--k110-text-glow-dim:
0 0 8px rgba(124, 255, 0, 0.38),
0 0 18px rgba(124, 255, 0, 0.2);
--k110-text-glow-bright:
0 0 14px rgba(124, 255, 0, 0.85),
0 0 28px rgba(124, 255, 0, 0.5),
0 0 44px rgba(124, 255, 0, 0.22);
animation: k110-ui-text-breathe var(--k110-breathe-speed, 3.1s) ease-in-out 0.58s infinite;
}
.k110-auth-consent-wrap .k110-auth-consent input {
--k110-glow-dim:
0 0 6px rgba(124, 255, 0, 0.22),
inset 0 0 8px rgba(124, 255, 0, 0.06);
--k110-glow-bright:
0 0 13px rgba(124, 255, 0, 0.46),
0 0 23px rgba(124, 255, 0, 0.18),
inset 0 0 10px rgba(124, 255, 0, 0.1);
--k110-glow-dim-filter: 0.96;
--k110-glow-bright-filter: 1.08;
width: 22px;
height: 22px;
min-height: 22px;
flex: 0 0 22px;
border-style: solid;
border-color: rgba(124, 255, 0, 0.62);
border-width: 1px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
box-shadow: none;
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out 0.58s infinite;
will-change: filter, box-shadow;
}
.k110-auth-consent-wrap .k110-auth-consent input:checked {
--k110-glow-dim:
0 0 12px rgba(124, 255, 0, 0.5),
0 0 22px rgba(124, 255, 0, 0.22);
--k110-glow-bright:
0 0 18px rgba(124, 255, 0, 0.78),
0 0 34px rgba(124, 255, 0, 0.34);
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
border-width: 2px;
border-color: rgba(124, 255, 0, 0.95);
background: #7CFF00;
}
.k110-auth-consent-wrap.is-consent-checked .k110-auth-consent {
border-top-color: transparent;
border-bottom-color: transparent;
animation: none;
box-shadow: none;
background: rgba(0, 0, 0, 0.32);
}
@keyframes k110-auth-main-floor-breathe {
0%, 100% {
filter: brightness(0.92);
box-shadow:
inset 0 0 0 1px rgba(124, 255, 0, 0.64),
inset 0 -16px 26px rgba(124, 255, 0, 0.18),
inset 0 -42px 46px rgba(124, 255, 0, 0.08);
}
50% {
filter: brightness(1.16);
box-shadow:
inset 0 0 0 1px rgba(124, 255, 0, 0.96),
inset 0 -24px 34px rgba(124, 255, 0, 0.34),
inset 0 -58px 62px rgba(124, 255, 0, 0.16);
}
}
@keyframes k110-auth-main-text-breathe {
0%, 100% {
text-shadow:
0 0 7px rgba(124, 255, 0, 0.28),
0 0 15px rgba(124, 255, 0, 0.12);
}
50% {
text-shadow:
0 0 10px rgba(124, 255, 0, 0.54),
0 0 24px rgba(124, 255, 0, 0.24);
}
}
.k110-c-command-text {
--k110-text-glow-dim:
0 0 7px color-mix(in srgb, var(--k110-command-color, #7CFF00) 28%, transparent),
0 0 15px color-mix(in srgb, var(--k110-command-color, #7CFF00) 12%, transparent);
--k110-text-glow-bright:
0 0 10px color-mix(in srgb, var(--k110-command-color, #7CFF00) 54%, transparent),
0 0 24px color-mix(in srgb, var(--k110-command-color, #7CFF00) 24%, transparent);
color: var(--k110-command-text-mid, var(--k110-command-color, #7CFF00));
background-image: linear-gradient(180deg, var(--k110-command-text-top, #2E7000) 0%, var(--k110-command-text-mid, #7CFF00) 58%, var(--k110-command-text-bottom, #C8FF8D) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: k110-ui-text-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
#authMainBtn {
--k110-breathe-speed: 3.1s;
--k110-command-color: #7CFF00;
--k110-command-glow-soft: rgba(124,255,0,0.18);
--k110-command-glow-strong: rgba(124,255,0,0.34);
--k110-command-text-top: #2E7000;
--k110-command-text-mid: #7CFF00;
--k110-command-text-bottom: #C8FF8D;
min-height: 64px;
color: #9DFF38;
z-index: 1;
}
#authMainBtn .k110-auth-main-label,
#authMainBtn .k110-auth-loading-label,
#authMainBtn .k110-auth-loading-frame {
--k110-text-glow-dim:
0 0 7px rgba(124, 255, 0, 0.28),
0 0 15px rgba(124, 255, 0, 0.12);
--k110-text-glow-bright:
0 0 10px rgba(124, 255, 0, 0.54),
0 0 24px rgba(124, 255, 0, 0.24);
color: var(--k110-command-text-mid, #7CFF00);
background-image: linear-gradient(180deg, var(--k110-command-text-top, #2E7000) 0%, var(--k110-command-text-mid, #7CFF00) 58%, var(--k110-command-text-bottom, #C8FF8D) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: k110-ui-text-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
#authMainBtn:before {
--k110-glow-dim:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color, #7CFF00) 64%, transparent),
inset 0 -16px 26px var(--k110-command-glow-soft, rgba(124,255,0,0.18)),
inset 0 -42px 46px color-mix(in srgb, var(--k110-command-glow-soft, rgba(124,255,0,0.18)) 48%, transparent);
--k110-glow-bright:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color, #7CFF00) 92%, transparent),
inset 0 -24px 34px var(--k110-command-glow-strong, rgba(124,255,0,0.34)),
inset 0 -58px 62px color-mix(in srgb, var(--k110-command-glow-strong, rgba(124,255,0,0.34)) 48%, transparent);
--k110-glow-dim-filter: 0.92;
--k110-glow-bright-filter: 1.16;
inset: 0;
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-command-color, #7CFF00) 34%, transparent) 0%, color-mix(in srgb, var(--k110-command-color, #7CFF00) 18%, transparent) 22%, color-mix(in srgb, var(--k110-command-color, #7CFF00) 6%, transparent) 50%, rgba(0, 0, 0, 0) 76%),
#020402;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--k110-command-color, #7CFF00) 72%, transparent),
inset 0 -18px 30px color-mix(in srgb, var(--k110-command-color, #7CFF00) 22%, transparent),
inset 0 -48px 54px color-mix(in srgb, var(--k110-command-color, #7CFF00) 10%, transparent);
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
#authMainBtn:after {
inset: 0;
}
#authMainBtn.is-auth-register-ready:before {
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-command-color, #7CFF00) 42%, transparent) 0%, color-mix(in srgb, var(--k110-command-color, #7CFF00) 22%, transparent) 28%, color-mix(in srgb, var(--k110-command-color, #7CFF00) 8%, transparent) 58%, rgba(0, 0, 0, 0) 78%),
#020402;
background-size: auto;
animation: k110-ui-glow-breathe 2.35s ease-in-out infinite;
}
#authMainBtn.is-auth-register-ready {
color: #9DFF38 !important;
}
#authMainBtn:disabled {
color: rgba(255,255,255,0.42) !important;
background-image: none;
animation: none !important;
}
#authMainBtn:disabled .k110-front-text {
color: rgba(255,255,255,0.42) !important;
-webkit-text-fill-color: rgba(255,255,255,0.42) !important;
background-image: none !important;
animation: none !important;
text-shadow: none !important;
}
#authMainBtn:disabled:before {
background: #080808;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
animation: none !important;
filter: none;
}
#authMainBtn:disabled:after {
display: none;
}
#authMainBtn:active:before,
#authMainBtn.is-pressing:before {
inset: 4px;
}
.k110-history-modal {
position: fixed;
inset: 0;
display: none;
background: rgba(0,0,0,0.9);
z-index: 19000;
color: #fff;
align-items: center;
justify-content: center;
}
.k110-history-box {
position: relative;
width: min(92vw, 860px);
max-height: 82vh;
overflow: hidden;
background: #050505;
border: 6px solid #fff;
box-shadow: 12px 12px 0 #7CFF00, 0 0 34px rgba(124,255,0,0.35);
padding: 24px;
box-sizing: border-box;
}
.k110-history-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 0 58px 14px 0;
margin-bottom: 8px;
}
.k110-history-head span {
display: inline-block;
background: #7CFF00;
color: #000;
border: 3px solid #000;
padding: 5px 9px;
font-size: 12px;
line-height: 1;
font-weight: 900;
box-shadow: 4px 4px 0 #222;
}
.k110-history-head h3 {
margin: 12px 0 0;
color: #fff;
font-size: clamp(34px, 5vw, 64px);
line-height: 0.95;
font-weight: 900;
letter-spacing: 0;
text-shadow: 0 0 14px rgba(255,255,255,0.75);
}
#closeHistoryBtn {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
background: #FF3B30;
color: #000;
font-size: 28px;
line-height: 1;
display: grid;
place-items: center;
border: 3px solid #000;
font-weight: 900;
box-shadow: none !important;
}
#closeHistoryBtn:active {
transform: translate(1px, 1px) !important;
box-shadow: none !important;
}
.k110-history-stats {
display: grid;
grid-template-columns: minmax(0, 1fr) 3px minmax(0, 1fr) 3px minmax(0, 1fr) 3px minmax(0, 1fr);
gap: 14px;
align-items: stretch;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
padding: 16px 0;
margin: 0 0 22px;
}
.history-stat {
display: grid;
align-content: center;
justify-items: center;
min-width: 0;
text-align: center;
}
.history-stat span {
display: block;
color: #fff;
font-size: clamp(10px, 1.35vw, 14px);
line-height: 1.2;
font-weight: 900;
word-break: keep-all;
}
.history-stat strong {
display: block;
margin-top: 6px;
color: #7CFF00;
font-size: clamp(30px, 5vw, 58px);
line-height: 0.95;
font-weight: 900;
letter-spacing: 0;
text-shadow: 0 0 14px rgba(124,255,0,0.72);
}
.history-stat-sep {
width: 3px;
min-height: 58px;
background: #fff;
}
.k110-history-list {
max-height: min(48vh, 500px);
overflow: auto;
padding: 4px 8px 8px 0;
box-sizing: border-box;
}
.k110-history-list.is-loading,
.k110-history-list.is-empty {
min-height: 180px;
display: grid;
place-items: center;
border: 3px solid #fff;
color: #7CFF00;
font-size: clamp(20px, 3vw, 34px);
font-weight: 900;
text-align: center;
padding: 24px;
}
.history-row {
display: grid;
grid-template-columns: 126px minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 14px 0;
border-bottom: 2px solid rgba(255,255,255,0.16);
word-break: break-all;
--history-accent: #7CFF00;
}
.history-row:first-child {
padding-top: 0;
}
.history-row.is-excavated {
--history-accent: #00E5FF;
}
.history-row.is-listed {
--history-accent: #FFEE00;
}
.history-row.is-discovered {
--history-accent: #7CFF00;
}
.history-symbol {
display: grid;
place-items: center;
width: 112px;
height: 112px;
border: 4px solid var(--history-accent);
border-radius: 12px;
background: rgba(255,255,255,0.02);
color: var(--history-accent);
padding: 10px;
box-sizing: border-box;
box-shadow: 0 0 18px color-mix(in srgb, var(--history-accent) 45%, transparent);
overflow: hidden;
}
.history-symbol strong {
display: block;
max-width: 100%;
color: var(--history-accent);
font-size: clamp(28px, 4vw, 54px);
line-height: 0.95;
font-weight: 900;
text-align: center;
overflow-wrap: anywhere;
text-shadow: 0 0 12px color-mix(in srgb, var(--history-accent) 65%, transparent);
}
.history-info {
min-width: 0;
display: grid;
gap: 7px;
color: #fff;
font-weight: 900;
}
.history-info-line {
display: block;
color: #fff;
font-size: clamp(14px, 1.8vw, 19px);
line-height: 1.25;
font-weight: 900;
overflow-wrap: anywhere;
}
.history-info-label {
color: rgba(255,255,255,0.72);
margin-right: 6px;
}
.k110-contribution-modal {
position: fixed;
inset: 0;
z-index: 21000;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.82);
color: #000;
padding: 18px;
box-sizing: border-box;
}
.k110-contribution-modal.is-active {
display: flex;
}
.k110-contribution-box:not(.k110-c-popup) {
width: min(92vw, 520px);
background: #fff;
border: 6px solid #000;
box-shadow: 12px 12px 0 #7CFF00;
padding: 24px;
box-sizing: border-box;
}
.k110-contribution-box:not(.k110-c-popup) h3 {
margin: 0 0 10px;
font-size: clamp(32px, 5vw, 52px);
line-height: 1.05;
font-weight: 900;
}
.k110-contribution-intro {
margin: 0 0 18px;
font-size: clamp(16px, 2.2vw, 22px);
line-height: 1.25;
font-weight: 900;
}
.k110-contribution-compare {
display: grid;
gap: 10px;
margin-bottom: 16px;
}
.k110-contribution-compare > div {
border: 3px solid #000;
padding: 12px;
background: #f7f7f7;
}
.k110-contribution-compare > div > span {
display: block;
font-size: 12px;
font-weight: 900;
margin-bottom: 6px;
}
.k110-contribution-compare strong {
display: block;
font-size: clamp(34px, 6vw, 58px);
line-height: 1.05;
font-weight: 900;
word-break: break-all;
}
.k110-admin-finaldb-modal {
position: fixed;
inset: 0;
z-index: 26000;
display: none;
align-items: center;
justify-content: center;
padding: clamp(8px, 1.6vw, 20px);
box-sizing: border-box;
background: rgba(0,0,0,0.78);
color: #000;
}
.k110-admin-finaldb-modal.is-active {
display: flex;
}
.k110-admin-finaldb-box {
width: min(98vw, 1040px);
max-height: min(96svh, 860px);
overflow: auto;
background: #fff;
border: 5px solid #000;
box-shadow: none;
padding: clamp(10px, 1.8vw, 18px);
box-sizing: border-box;
}
.k110-admin-finaldb-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 8px;
}
.k110-admin-finaldb-head span {
display: inline-block;
padding: 4px 8px;
background: #000;
color: #7CFF00;
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
}
.k110-admin-finaldb-head h3 {
margin: 5px 0 0;
font-size: clamp(28px, 4.8vw, 46px);
line-height: 0.95;
font-weight: 900;
}
#adminFinalDBCloseBtn {
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 0;
background: #FF3B30;
color: #000;
font-size: 26px;
font-weight: 900;
cursor: pointer;
}
.k110-admin-finaldb-status {
min-height: 28px;
display: flex;
align-items: center;
padding: 5px 9px;
margin-bottom: 8px;
background: #000;
color: #7CFF00;
border: 3px solid #000;
font-weight: 900;
box-sizing: border-box;
}
.k110-admin-finaldb-filters {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 5px;
margin-bottom: 8px;
}
.k110-admin-finaldb-filter {
min-height: 32px;
border: 3px solid #000;
background: #fff;
color: #000;
font-size: clamp(10px, 1.2vw, 13px);
font-weight: 900;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k110-admin-finaldb-filter.is-active {
background: #000;
color: #7CFF00;
}
.k110-admin-finaldb-card {
display: grid;
gap: clamp(6px, 0.9vh, 10px);
}
.k110-admin-finaldb-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
font-size: 11px;
font-weight: 900;
}
.k110-admin-finaldb-chip {
display: inline-flex;
align-items: center;
padding: 3px 6px;
background: #000;
color: #fff;
}
.k110-admin-finaldb-field {
display: grid;
gap: 3px;
}
.k110-admin-finaldb-field label {
font-size: 11px;
font-weight: 900;
}
.k110-admin-finaldb-grid-wrap {
position: relative;
overflow: hidden;
border: 4px solid #000;
background:
linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px),
#f7f7f7;
background-size: 22px 22px;
box-sizing: border-box;
min-height: clamp(106px, 14svh, 150px);
max-height: clamp(106px, 14svh, 150px);
}
.k110-admin-finaldb-field textarea {
width: 100%;
min-height: clamp(106px, 14svh, 150px);
max-height: clamp(106px, 14svh, 150px);
resize: none;
box-sizing: border-box;
border: 0;
background: transparent;
color: #000;
padding: clamp(8px, 1.2vw, 16px) clamp(10px, 1.4vw, 16px) 28px;
font-family: inherit;
font-size: clamp(58px, min(8.4vw, 11.5svh), 128px);
line-height: 1;
font-weight: 900;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
direction: ltr;
unicode-bidi: isolate;
position: relative;
z-index: 2;
}
.k110-admin-grid-line {
position: absolute;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
z-index: 1;
}
.k110-admin-grid-ascender {
top: var(--admin-ascender-y, 20%);
background: rgba(0,0,0,0.22);
}
.k110-admin-grid-xheight {
top: var(--admin-xheight-y, 42%);
border-top: 1px dashed rgba(0,0,0,0.32);
}
.k110-admin-grid-baseline {
top: var(--admin-baseline-y, 72%);
height: 2px;
background: rgba(0,0,0,0.52);
}
.k110-admin-grid-descender {
top: var(--admin-descender-y, 86%);
background: rgba(0,0,0,0.22);
}
.k110-admin-grid-label {
display: none;
}
.k110-admin-unicode-meta {
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
z-index: 5;
display: flex;
flex-wrap: nowrap;
gap: 4px;
align-items: center;
justify-content: flex-start;
max-width: calc(100% - 20px);
min-height: 20px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.k110-admin-unicode-pill {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
max-width: min(210px, 56vw);
min-height: var(--k110-capsule-min-h);
padding: var(--k110-capsule-pad-y) var(--k110-capsule-pad-x);
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.66);
border-radius: 999px;
background: #000;
color: #7CFF00;
font-family: "Noto Sans KR", "Noto Sans", sans-serif;
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k110-admin-unicode-code {
background: #111;
color: #00E5FF;
border-color: rgba(0,229,255,0.6);
}
.k110-admin-unicode-group {
background: #111;
color: #FFEE00;
border-color: rgba(255,238,0,0.6);
}
.k110-admin-unicode-warning {
background: #FFEE00;
color: #000;
border-color: #000;
font-weight: 900;
}
.k110-admin-finaldb-note {
padding: 6px 8px;
border: 3px solid #000;
background: #f2f2f2;
font-size: 11px;
line-height: 1.25;
font-weight: 800;
white-space: pre-wrap;
}
.k110-admin-finaldb-votes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
.k110-admin-finaldb-votes span {
display: flex;
align-items: center;
justify-content: center;
min-height: 28px;
background: #000;
color: #7CFF00;
font-size: 11px;
font-weight: 900;
}
.k110-admin-finaldb-actions {
display: flex;
flex-wrap: nowrap;
gap: 5px;
margin-top: 2px;
}
.k110-admin-finaldb-actions button {
flex: 1 1 0;
min-width: 0;
min-height: 40px;
border: 4px solid #000;
color: #000;
font-size: clamp(11px, 1.45vw, 16px);
font-weight: 900;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k110-admin-finaldb-modal.is-pipeline-running .k110-admin-finaldb-actions button {
opacity: 0.45;
filter: grayscale(1);
pointer-events: none;
}
.k110-admin-action-green { background: #7CFF00; }
.k110-admin-action-blue { background: #00D8FF; }
.k110-admin-action-red { background: #FF3B30; color: #fff !important; }
.k110-admin-action-hold { background: #e8e8e8; }
.k110-admin-action-ghost { background: #fff; }
.k110-admin-finaldb-empty {
padding: 22px;
border: 4px solid #000;
background: #f7f7f7;
font-weight: 900;
text-align: center;
}
@media (max-width: 640px) {
.k110-admin-finaldb-box {
width: 98vw;
max-height: 94svh;
}
.k110-admin-finaldb-filters {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.k110-admin-finaldb-grid-wrap,
.k110-admin-finaldb-field textarea {
min-height: clamp(96px, 13svh, 128px);
max-height: clamp(96px, 13svh, 128px);
}
}
.k110-contribution-alien-card {
min-height: 92px;
}
.k110-contribution-compare input {
width: 100%;
min-height: 48px;
border: 3px solid #000;
background: #fff;
color: #000;
padding: 10px 12px;
box-sizing: border-box;
font-size: 20px;
font-weight: 900;
outline: none;
}
.k110-contribution-compare input.is-required {
border-color: #FF3B30;
background: #FFF2CC;
box-shadow: 0 0 0 5px rgba(255,59,48,0.22);
animation: k110RequiredPulse 0.7s ease-in-out 3;
}
.k110-contribution-compare input.is-readonly {
background: #efefef;
color: #111;
cursor: not-allowed;
}
@keyframes k110RequiredPulse {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
#contribIdArea input,
#contribIdArea button {
width: 100%;
min-height: 48px;
border: 3px solid #000;
box-sizing: border-box;
font-size: 16px;
font-weight: 900;
}
#contribIdArea input {
padding: 10px 12px;
}
#contribIdArea button {
background: #00E5FF;
cursor: pointer;
}
.k110-contrib-disclaimer {
margin-top: 8px;
color: #333;
font-size: 12px;
line-height: 1.35;
font-weight: 900;
}
.k110-contribution-actions {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 12px;
margin-top: 16px;
}
.k110-contribution-actions button {
min-height: 52px;
border: 3px solid #000;
border-radius: 14px;
font-weight: 900;
cursor: pointer;
box-shadow: 5px 5px 0 #111;
}
.k110-contribution-actions button.is-pressing {
transform: translate(4px, 4px);
box-shadow: 1px 1px 0 #111;
}
.k110-contrib-register {
background: #7CFF00;
}
.k110-contrib-cancel {
background: #FF3B30;
color: #fff;
}
.k110-contribution-modal {
--k110-popup-accent: var(--k110-color-green);
--k110-panel-primary: var(--k110-popup-accent);
color: var(--k110-popup-accent);
background: rgba(0,0,0,0.84);
}
.k110-contribution-box.k110-c-popup {
--k110-command-color: var(--k110-popup-accent);
--k110-command-glow-soft: color-mix(in srgb, var(--k110-popup-accent) 18%, transparent);
--k110-command-glow-strong: color-mix(in srgb, var(--k110-popup-accent) 34%, transparent);
--k110-command-text-top: color-mix(in srgb, var(--k110-popup-accent) 34%, black);
--k110-command-text-mid: var(--k110-popup-accent);
--k110-command-text-bottom: color-mix(in srgb, var(--k110-popup-accent) 68%, white);
position: relative;
display: flex;
flex-direction: column;
width: min(92vw, 540px);
max-height: min(92svh, 720px);
padding: 0;
border: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 78%, transparent);
background: rgba(2,8,7,0.82);
color: var(--k110-popup-accent);
box-shadow:
0 0 0 var(--k110-line-1) color-mix(in srgb, var(--k110-popup-accent) 42%, transparent),
0 0 24px color-mix(in srgb, var(--k110-popup-accent) 36%, transparent),
0 0 58px color-mix(in srgb, var(--k110-popup-accent) 14%, transparent);
overflow: hidden;
}
.k110-contribution-band {
flex: 0 0 auto;
}
.k110-contribution-band .k110-c-bar-title,
.k110-contribution-box.k110-c-popup .k110-contribution-band h3 {
position: relative;
z-index: 2;
margin: 0;
padding: 0 var(--k110-cell-pad-x);
color: var(--k110-popup-accent);
font-size: var(--k110-type-body);
line-height: var(--k110-bar-h);
font-weight: 900;
text-shadow: 0 0 10px color-mix(in srgb, var(--k110-popup-accent) 55%, transparent);
}
.k110-contribution-close {
--red-action-size: var(--k110-bar-h);
--red-action-overlap: var(--k110-line-1);
}
.k110-contribution-body {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
.k110-contribution-intro {
margin: 0;
padding: calc(var(--k110-gap) * 2) var(--k110-cell-pad-x);
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 48%, transparent);
background: rgba(0,0,0,0.58);
color: var(--k110-color-yellow);
font-size: var(--k110-type-caption);
line-height: 1.35;
font-weight: 900;
}
.k110-contribution-compare {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
}
.k110-contribution-compare > div {
border: 0;
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
padding: 0;
background: rgba(0,0,0,0.38);
color: var(--k110-popup-accent);
}
.k110-contribution-compare > div > span {
display: block;
margin: 0;
padding: var(--k110-gap) var(--k110-cell-pad-x) 0;
color: color-mix(in srgb, var(--k110-popup-accent) 72%, white);
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 1.2;
}
.k110-contribution-compare strong {
min-height: calc(var(--k110-bar-h) * 1.8);
padding: var(--k110-gap) var(--k110-cell-pad-x) calc(var(--k110-gap) * 2);
box-sizing: border-box;
display: flex;
align-items: center;
color: #fff;
font-size: clamp(var(--k110-type-heading), 8vw, var(--k110-type-display));
line-height: 1.05;
font-weight: 900;
word-break: break-word;
text-shadow: 0 0 12px color-mix(in srgb, var(--k110-popup-accent) 48%, transparent);
}
.k110-contribution-input-field {
--k110-terminal-wave-color: var(--k110-popup-accent);
min-height: calc(var(--k110-bar-h) * 1.2);
margin-top: var(--k110-gap);
border-top-color: transparent;
}
.k110-contribution-compare input,
#contribIdArea input {
position: relative;
z-index: 2;
width: 100%;
min-height: calc(var(--k110-bar-h) * 1.2);
padding: 0 var(--k110-cell-pad-x);
border: 0;
background: transparent;
color: #fff;
box-shadow: none;
box-sizing: border-box;
outline: none;
font-size: var(--k110-type-body);
line-height: calc(var(--k110-bar-h) * 1.2);
font-weight: 900;
caret-color: var(--k110-popup-accent);
}
.k110-contribution-compare input::placeholder,
#contribIdArea input::placeholder {
color: color-mix(in srgb, var(--k110-popup-accent) 42%, #777);
font-weight: 300;
}
.k110-contribution-compare input.is-readonly,
#contribIdArea input[readonly] {
color: color-mix(in srgb, var(--k110-popup-accent) 72%, white);
cursor: not-allowed;
}
.k110-contribution-compare input.is-required {
color: var(--k110-color-yellow);
background: transparent;
box-shadow: none;
}
.k110-contribution-compare .k110-terminal-field:has(input.is-required) {
border-top-color: var(--k110-color-red);
box-shadow: inset 0 0 18px color-mix(in srgb, var(--k110-color-red) 22%, transparent);
animation: k110RequiredPulse 0.7s ease-in-out 3;
}
#contribIdArea {
display: grid;
gap: 0;
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
background: rgba(0,0,0,0.42);
}
#contribIdArea .k110-terminal-field {
--k110-terminal-wave-color: var(--k110-popup-accent);
border-top: 0;
}
#contribIdArea button {
--btn-accent: var(--k110-color-cyan);
--btn-bg: var(--k110-bg-black);
--btn-fg: var(--btn-accent);
width: calc(100% - (var(--k110-gap) * 2));
min-height: var(--k110-bar-h);
margin: var(--k110-gap);
border: var(--k110-line-1) solid var(--btn-accent);
background: var(--k110-bg-black);
color: var(--btn-accent);
box-shadow: inset 0 0 12px color-mix(in srgb, var(--btn-accent) 18%, transparent);
font-size: var(--k110-type-caption);
}
.k110-contrib-disclaimer {
margin: 0;
padding: 0 var(--k110-cell-pad-x) calc(var(--k110-gap) * 2);
color: color-mix(in srgb, var(--k110-color-yellow) 82%, white);
font-size: var(--k110-type-micro);
line-height: 1.35;
font-weight: 300;
}
.k110-contribution-actions {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--k110-gap);
margin: 0;
padding: var(--k110-gap);
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 52%, transparent);
background: rgba(0,0,0,0.48);
}
.k110-contribution-actions button {
min-height: var(--k110-bar-h);
border: var(--k110-line-1) solid currentColor;
border-radius: 0;
box-shadow: none;
font-size: var(--k110-type-body);
font-weight: 900;
text-shadow: none;
}
.k110-contribution-actions button.is-pressing {
transform: scale(0.985);
box-shadow: none;
}
.k110-contrib-cancel {
--btn-accent: var(--k110-color-red);
--fx-color: var(--k110-color-red);
background: var(--k110-bg-black);
color: var(--k110-color-red);
}
.k110-contrib-register {
--btn-accent: var(--k110-popup-accent);
--fx-color: var(--k110-popup-accent);
background: var(--k110-bg-black);
color: var(--k110-popup-accent);
}
.k110-contribution-actions .k110-front-text {
position: relative;
z-index: 3;
}
/* K110 MODULE: POPUP AUTH/REGISTER
Login and contribution request popups share this module. Keep panel modules
usable inside, but popup frame/overlay remain independent from panel layout.
PBGSPQA-1196: 발견하기 등록 팝업(#discoverContributionModal)도 이 블록을 만들기 팝업과 같이 쓴다.
`:is(#designContributionModal, #discoverContributionModal)` 는 특이도가 id 하나와 같아 만들기
팝업의 계산값은 그대로다. 등록 실패 오류 영역(`.k110-contribution-error`)도 두 팝업이 이 블록을
같이 쓴다. 두 팝업을 다시 가르지 않도록 여기만 고친다. */
:is(#designContributionModal, #discoverContributionModal).k110-contribution-modal {
--k110-popup-accent: var(--k110-color-green);
--k110-panel-primary: var(--k110-popup-accent);
z-index: 24000;
padding: clamp(18px, 5vw, 36px);
background: rgba(0,0,0,0.72);
color: #fff;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.k110-c-popup-contribution {
--k110-auth-pad-x: clamp(18px, 5vw, 28px);
--k110-auth-text-size: clamp(16px, 4.2vw, 18px);
--k110-breathe-speed: 3.1s;
--k110-command-color: var(--k110-popup-accent);
--k110-command-glow-soft: color-mix(in srgb, var(--k110-popup-accent) 18%, transparent);
--k110-command-glow-strong: color-mix(in srgb, var(--k110-popup-accent) 34%, transparent);
--k110-command-text-top: color-mix(in srgb, var(--k110-popup-accent) 34%, black);
--k110-command-text-mid: var(--k110-popup-accent);
--k110-command-text-bottom: color-mix(in srgb, var(--k110-popup-accent) 68%, white);
--k110-popup-inset: var(--k110-auth-pad-x);
--k110-popup-edge: color-mix(in srgb, var(--k110-popup-accent) 72%, transparent);
width: min(92vw, 680px);
max-height: min(92svh, 760px);
padding: 0;
border: var(--k110-line-1) solid var(--k110-popup-edge);
border-radius: 0;
background: rgba(2,8,7,0.78);
color: var(--k110-popup-accent);
box-shadow:
0 0 0 var(--k110-line-1) color-mix(in srgb, var(--k110-popup-accent) 38%, transparent),
0 0 22px color-mix(in srgb, var(--k110-popup-accent) 34%, transparent),
0 0 54px color-mix(in srgb, var(--k110-popup-accent) 14%, transparent);
overflow: hidden;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.k110-c-popup-contribution.is-side-layout {
width: min(94vw, 920px);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-band {
--k110-bar-title-inset: var(--k110-popup-inset);
position: relative;
min-height: var(--k110-bar-h);
height: var(--k110-bar-h);
border-bottom: var(--k110-line-1) solid var(--k110-popup-edge);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-band .k110-c-bar-title {
position: relative;
z-index: 2;
margin: 0;
padding: 0 calc(var(--k110-popup-inset) + var(--k110-bar-h) + (var(--k110-gap) * 2)) 0 var(--k110-popup-inset);
color: var(--k110-popup-accent);
/* PBGSPQA-1196 후속: 제목(외계어 등록 신청하기)을 바로 아래 안내문과 같은 크기로 맞춘다(사용자 결정).
종전에는 타이틀바 공용 크기(--k110-bar-font-size, 12~15px)라 안내문(18px)보다 작았다. 안내문과 같은
식을 써서 만들기 팝업은 최종 authority 의 --k110-contribution-copy-size 를, 발견하기 팝업은 같은
기본값을 따른다. 한쪽만 바꾸면 e2e 가 제목·안내문 크기 불일치로 잡는다. */
font-size: var(--k110-contribution-copy-size, max(var(--k110-type-body), 18px));
font-weight: 900;
line-height: var(--k110-bar-h);
text-shadow: 0 0 12px color-mix(in srgb, var(--k110-popup-accent) 66%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-close.k110-c-red-action {
--red-action-size: calc(var(--k110-bar-h) - (var(--k110-gap) * 2));
--red-action-overlap: 0px;
--btn-accent: var(--k110-color-red);
--fx-color: var(--k110-color-red);
position: absolute;
top: var(--k110-gap);
right: var(--k110-gap);
width: var(--red-action-size);
height: var(--red-action-size);
min-width: var(--red-action-size);
min-height: var(--red-action-size);
padding: 0;
color: var(--k110-color-red);
background: var(--k110-bg-black);
border: var(--k110-line-1) solid var(--k110-color-red);
border-radius: 0;
font-size: 0;
line-height: 1;
box-shadow:
inset 0 -12px 24px color-mix(in srgb, var(--k110-color-red) 16%, transparent),
0 0 10px color-mix(in srgb, var(--k110-color-red) 34%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-body {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-intro {
min-height: calc(var(--k110-bar-h) * 1.32);
display: flex;
align-items: center;
margin: 0;
padding: calc(var(--k110-gap) * 3) var(--k110-popup-inset);
border-top: 0;
border-bottom: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
background: rgba(0,0,0,0.58);
color: var(--k110-color-yellow);
font-size: var(--k110-contribution-copy-size, max(var(--k110-type-body), 18px));
line-height: 1.35;
font-weight: 900;
text-shadow: 0 0 9px color-mix(in srgb, var(--k110-color-yellow) 44%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
border-bottom: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 44%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-side-layout .k110-contribution-compare {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-side-layout .k110-contribution-alien-card {
border-left: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-side-layout .k110-contribution-compare > div {
min-height: calc(var(--k110-bar-h) * 4.05);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare > div {
position: relative;
display: grid;
grid-template-rows: var(--k110-bar-h) minmax(calc(var(--k110-bar-h) * 2.55), 1fr);
min-height: calc(var(--k110-bar-h) * 3.65);
padding: 0;
border: 0;
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-popup-accent) 7%, transparent), transparent 58%),
rgba(0,0,0,0.42);
color: var(--k110-popup-accent);
overflow: visible;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare > div > span {
display: flex;
align-items: center;
height: var(--k110-bar-h);
margin: 0;
padding: 0 var(--k110-popup-inset);
border-bottom: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 34%, transparent);
color: color-mix(in srgb, var(--k110-popup-accent) 72%, white);
font-size: var(--k110-type-micro);
font-weight: 300;
line-height: 1.2;
letter-spacing: 0;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-input-field {
--k110-terminal-wave-color: var(--k110-popup-accent);
display: flex;
align-items: center;
min-height: 0;
height: 100%;
margin-top: 0;
border-top-color: transparent;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare input,
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) input {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
min-height: 0;
padding: 0 var(--k110-popup-inset);
border: 0;
background: transparent;
color: #fff;
box-shadow: none;
box-sizing: border-box;
outline: none;
font-size: var(--k110-contrib-value-size, var(--k110-type-heading));
line-height: 1.05;
font-weight: 900;
text-align: center;
caret-color: var(--k110-popup-accent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare input::placeholder,
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) input::placeholder {
color: color-mix(in srgb, var(--k110-popup-accent) 42%, #777);
font-weight: 300;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare input.is-required {
color: var(--k110-color-yellow);
background: transparent;
box-shadow: none;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare .k110-terminal-field:has(input.is-required) {
border-top-color: var(--k110-color-red);
box-shadow: inset 0 0 18px color-mix(in srgb, var(--k110-color-red) 22%, transparent);
animation: k110RequiredPulse 0.7s ease-in-out 3;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-alien-card {
display: grid;
grid-template-rows: var(--k110-bar-h) minmax(calc(var(--k110-bar-h) * 2.6), 1fr) auto;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-compare strong {
min-height: 0;
height: 100%;
padding: var(--k110-gap) var(--k110-popup-inset);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #fff;
font-size: var(--k110-contrib-value-size, var(--k110-type-heading));
line-height: 1.05;
font-weight: 900;
text-align: center;
white-space: nowrap;
overflow: visible;
word-break: keep-all;
text-shadow: 0 0 12px color-mix(in srgb, var(--k110-popup-accent) 48%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-alien-meta,
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-alien-meta > .k110-c-capsule-stack {
justify-self: center;
align-self: end;
margin: 0 0 calc(var(--k110-gap) * 2);
max-width: calc(100% - (var(--k110-popup-inset) * 2));
color: var(--k110-popup-accent);
pointer-events: none;
overflow: visible;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-alien-meta {
display: flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: calc(100% - (var(--k110-popup-inset) * 2));
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-alien-meta .k110-c-capsule {
--capsule-accent: var(--k110-popup-accent);
--capsule-fg: var(--k110-popup-accent);
border-color: color-mix(in srgb, var(--k110-popup-accent) 72%, transparent);
color: var(--k110-popup-accent);
background: rgba(0,0,0,0.5);
width: max-content;
max-width: 100%;
min-width: max-content;
overflow: visible;
text-overflow: clip;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-alien-meta-side .k110-contribution-alien-card {
grid-template-columns: minmax(0, 1fr) minmax(92px, max-content);
grid-template-rows: auto minmax(calc(var(--k110-bar-h) * 1.45), 1fr);
column-gap: calc(var(--k110-gap) * 3);
padding-right: calc(var(--k110-gap) * 3);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-alien-meta-side .k110-contribution-alien-card > span {
grid-column: 1 / -1;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-alien-meta-side .k110-contribution-compare strong {
grid-column: 1;
grid-row: 2;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-alien-meta-side .k110-contribution-alien-meta {
grid-column: 2;
grid-row: 2;
justify-self: end;
align-self: center;
flex-direction: column;
align-items: flex-end;
margin: 0;
max-width: 190px;
}
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) {
display: grid;
gap: 0;
border-top: 0;
/* PBGSPQA-1196: 안내문 두 줄에 좌우 여백. 좌우는 카드 라벨과 같은 inset 으로 맞춰 글 시작선을 맞춘다. */
padding: calc(var(--k110-gap) * 2) var(--k110-popup-inset);
background: rgba(0,0,0,0.42);
}
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) .k110-terminal-field {
--k110-terminal-wave-color: var(--k110-popup-accent);
border-top: 0;
}
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) .k110-c-button {
--btn-accent: var(--k110-color-cyan);
--btn-border: var(--btn-accent);
--btn-bg: var(--k110-bg-black);
--btn-fg: var(--btn-accent);
width: calc(100% - (var(--k110-gap) * 2));
min-height: var(--k110-bar-h);
margin: var(--k110-gap);
border: var(--k110-line-1) solid var(--btn-accent);
background: var(--k110-bg-black);
color: var(--btn-accent);
box-shadow: inset 0 0 12px color-mix(in srgb, var(--btn-accent) 18%, transparent);
font-size: var(--k110-type-caption);
}
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) .k110-contrib-disclaimer {
min-height: calc(var(--k110-bar-h) * 1.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: calc(var(--k110-gap) * 3) var(--k110-popup-inset);
color: var(--k110-color-yellow);
font-size: max(var(--k110-type-caption), 16px);
line-height: 1.35;
font-weight: 800;
text-align: center;
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-color-yellow) 72%, transparent);
background: rgba(0,0,0,0.52);
text-shadow: 0 0 7px color-mix(in srgb, var(--k110-color-yellow) 34%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) .k110-contrib-disclaimer.is-typing:after {
content: "";
display: inline-block;
width: max(2px, var(--k110-line-2));
height: 1em;
margin-left: var(--k110-gap);
vertical-align: -0.12em;
background: currentColor;
animation: k110-status-cursor-blink 0.72s steps(1, end) infinite;
}
:is(#designContributionModal, #discoverContributionModal) :is(#contribIdArea, #discoverContribIdArea) .k110-contrib-disclaimer.is-typing-done:after {
content: none;
}
/* 등록 실패 문구 영역(만들기 #contribError, 발견하기 #discoverContribError). 비어 있으면 높이가 0이라
안내문과 버튼 사이 간격이 바뀌지 않는다. 종전에는 발견하기 전용 규칙이었다. */
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-error {
min-height: 0;
color: var(--k110-color-red);
font-size: var(--k110-type-caption);
font-weight: 900;
text-align: center;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-error:not(:empty) {
padding: calc(var(--k110-gap) * 2) var(--k110-popup-inset);
border-top: var(--k110-line-1) solid currentColor;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-actions {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--k110-gap);
margin: 0;
padding: var(--k110-gap);
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 52%, transparent);
background: rgba(0,0,0,0.48);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-actions .k110-c-button {
min-height: var(--k110-bar-h);
margin: 0;
border: var(--k110-line-1) solid currentColor;
border-radius: 0;
background: var(--k110-bg-black);
box-shadow:
inset 0 -12px 24px color-mix(in srgb, currentColor 12%, transparent),
0 0 8px color-mix(in srgb, currentColor 24%, transparent);
font-size: var(--k110-type-body);
font-weight: 900;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-actions .k110-c-button.is-disabled,
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-actions .k110-c-button[aria-disabled="true"] {
animation: none;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-actions .k110-c-button.is-pressing {
transform: scale(0.985);
box-shadow:
inset 0 -12px 24px color-mix(in srgb, currentColor 16%, transparent),
0 0 10px color-mix(in srgb, currentColor 28%, transparent);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contrib-cancel {
--btn-accent: var(--k110-color-red);
--fx-color: var(--k110-color-red);
color: var(--k110-color-red);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contrib-register {
--btn-accent: var(--k110-color-green);
--fx-color: var(--k110-color-green);
--k110-command-color: var(--k110-color-green);
--k110-command-glow-soft: color-mix(in srgb, var(--k110-color-green) 20%, transparent);
--k110-command-glow-strong: color-mix(in srgb, var(--k110-color-green) 46%, transparent);
--k110-command-text-top: color-mix(in srgb, var(--k110-color-green) 42%, black);
--k110-command-text-mid: var(--k110-color-green);
--k110-command-text-bottom: color-mix(in srgb, var(--k110-color-green) 76%, white);
color: var(--k110-color-green);
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contrib-register .k110-c-command-text {
animation: k110-ui-text-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-actions .k110-front-text {
position: relative;
z-index: 3;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-bottom-band {
flex: 0 0 var(--k110-bar-h);
min-height: var(--k110-bar-h);
height: var(--k110-bar-h);
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 48%, transparent);
border-bottom: 0;
}
@media (max-width: 560px) {
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.k110-c-popup-contribution {
width: min(94vw, 680px);
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-side-layout .k110-contribution-compare {
grid-template-columns: 1fr;
}
:is(#designContributionModal, #discoverContributionModal) .k110-contribution-box.is-side-layout .k110-contribution-alien-card {
border-left: 0;
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
}
}
.k110-contribution-modal.is-launching {
display: flex !important;
background: transparent;
pointer-events: none;
}
.k110-contribution-modal.is-launching .k110-contribution-box {
animation: k110ContributionModalDissolve 0.78s ease-in forwards;
}
@keyframes k110ContributionModalDissolve {
0% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
100% { transform: translateY(32px) scale(0.985); opacity: 0; filter: blur(16px); }
}
.k110-contribution-flight {
position: fixed;
inset: 0;
z-index: 20000;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
overflow: hidden;
}
.k110-contribution-flight.is-active {
display: flex;
}
.k110-contribution-skip {
position: fixed;
right: clamp(14px, 3vw, 42px);
bottom: clamp(18px, 4vh, 46px);
z-index: 20005;
min-width: 112px;
min-height: 46px;
border: 3px solid #fff;
background: #000;
color: #fff;
font-size: 16px;
font-weight: 900;
box-shadow: 6px 6px 0 rgba(255,255,255,0.35);
transform: translateX(calc(100% + 60px));
opacity: 0;
pointer-events: auto;
cursor: pointer;
}
.k110-contribution-flight.is-active .k110-contribution-skip {
animation: k110SkipToastIn 0.5s cubic-bezier(0.15, 0.9, 0.25, 1) 0.2s forwards;
}
.k110-contribution-skip:active {
transform: translateX(0) translate(3px, 3px);
box-shadow: 2px 2px 0 rgba(255,255,255,0.35);
}
@keyframes k110SkipToastIn {
0% { transform: translateX(calc(100% + 60px)); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.k110-contribution-pair {
width: min(92vw, 1400px);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(34px, 8vw, 160px);
color: #fff;
font-weight: 900;
line-height: 0.95;
text-align: center;
will-change: transform, filter, opacity;
}
.k110-contribution-pair.is-stacked {
flex-direction: column;
gap: clamp(16px, 4vh, 54px);
}
.k110-flight-korean,
.k110-flight-alien {
display: block;
max-width: 46vw;
overflow-wrap: anywhere;
font-size: clamp(44px, 9vw, 156px);
text-shadow: 0 0 20px rgba(255,255,255,0.7);
}
.k110-contribution-pair.is-stacked .k110-flight-korean,
.k110-contribution-pair.is-stacked .k110-flight-alien {
max-width: 92vw;
}
@media (max-width: 759.98px) {
.k110-contribution-pair {
flex-direction: column;
gap: clamp(16px, 4vh, 54px);
}
.k110-flight-korean,
.k110-flight-alien {
max-width: 92vw;
}
}
.k110-flight-korean {
color: #fff;
}
.k110-flight-alien {
color: #7CFF00;
text-shadow: 0 0 18px rgba(124,255,0,0.9), 0 0 48px rgba(124,255,0,0.5);
}
.k110-contribution-pair.is-collapsing {
animation: k110PairCollapse 1.35s ease-in forwards;
}
.k110-contribution-pair.is-collapsing span {
animation: k110FastVibrate 0.07s linear infinite;
}
@keyframes k110PairCollapse {
0% { transform: scale(1) translateX(0); filter: brightness(1); opacity: 1; }
65% { transform: scale(0.74); filter: brightness(1.7); opacity: 1; }
100% { transform: scale(0.08); filter: brightness(4) blur(2px); opacity: 0.05; }
}
@keyframes k110FastVibrate {
0% { transform: translate(0, 0); }
25% { transform: translate(4px, -2px); }
50% { transform: translate(-3px, 3px); }
75% { transform: translate(2px, 2px); }
100% { transform: translate(0, 0); }
}
.k110-contribution-flash {
position: fixed;
inset: 0;
background: #7CFF00;
opacity: 0;
transform: scale(0.05);
border-radius: 50%;
pointer-events: none;
}
.k110-contribution-flash.is-flashing {
animation: k110ContributionFlash 1.45s ease-in-out forwards;
}
@keyframes k110ContributionFlash {
0% { opacity: 0; transform: scale(0.05); border-radius: 50%; }
36% { opacity: 0.98; transform: scale(3); border-radius: 0; }
62% { opacity: 0.98; transform: scale(3); border-radius: 0; }
100% { opacity: 0; transform: scale(0.02); border-radius: 50%; }
}
.k110-contribution-warp {
position: fixed;
inset: 0;
z-index: 26000;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 30px;
color: #fff;
text-align: center;
pointer-events: none;
}
.k110-contribution-warp.is-active {
display: flex;
pointer-events: auto;
animation: k110ContributionFinalSettle 0.8s ease-out forwards;
}
@keyframes k110ContributionFinalSettle {
0% { opacity: 0; filter: blur(10px); transform: scale(0.96); }
100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
.k110-contribution-success {
max-width: min(92vw, 960px);
color: #fff;
font-size: var(--k110-type-body);
line-height: 1.18;
font-weight: 900;
text-shadow: 0 0 14px rgba(255,255,255,0.58), 0 0 34px rgba(124,255,0,0.34);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(9px, 1.1vw, 18px);
}
.k110-contribution-success-glyph,
.k110-contribution-final-alien {
max-width: min(92vw, 960px);
color: #7CFF00;
font-size: clamp(70px, 9vw, 148px);
line-height: 1;
font-weight: 900;
overflow-wrap: anywhere;
text-shadow: 0 0 20px rgba(124,255,0,1), 0 0 60px rgba(124,255,0,0.55);
}
.k110-contribution-final-alien {
display: none;
}
.k110-contribution-success-title {
font-size: clamp(34px, 5vw, 86px);
line-height: 1;
color: #fff;
}
.k110-contribution-success-user-row {
width: min(92vw, 860px);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.4vw, 18px);
}
.k110-contribution-success-user {
max-width: min(78vw, 980px);
min-width: 0;
border: var(--k110-line-1) solid #7CFF00;
border-radius: 999px;
padding: 0.16em 0.66em 0.2em;
color: #7CFF00;
background: rgba(0,0,0,0.58);
font-size: clamp(24px, var(--k110-user-fit-size, 6vw), 98px);
line-height: 1.12;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 0 14px rgba(124,255,0,0.62);
}
.k110-contribution-success-points {
flex: 0 0 auto;
border: var(--k110-line-1) solid #FFEE00;
border-radius: 999px;
padding: 0.16em 0.5em 0.2em;
color: #000;
background: #FFEE00;
font-size: clamp(18px, 2.4vw, 42px);
line-height: 1;
font-weight: 900;
box-shadow: 0 0 22px rgba(255,238,0,0.48);
}
.k110-contribution-success-note {
color: color-mix(in srgb, #fff 86%, var(--k110-color-green) 14%);
font-size: clamp(19px, 2.8vw, 42px);
line-height: 1.28;
text-shadow: 0 0 10px rgba(255,255,255,0.32);
}
.k110-contribution-success-actions {
width: min(92vw, 720px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--k110-gap);
align-items: stretch;
}
.k110-contribution-success-actions .k110-c-independent-button {
--independent-btn-accent: var(--k110-color-green);
min-height: 58px;
padding: 0 18px;
font-size: 18px;
font-weight: 900;
cursor: pointer;
}
#continueContributionBtn {
--independent-btn-accent: var(--k110-color-cyan);
}
#openContributionHistoryBtn {
--independent-btn-accent: var(--k110-color-green);
}
@media (min-width: 701px) {
.k110-contribution-warp {
gap: clamp(8px, 1vh, 16px);
padding: clamp(18px, 3vh, 34px) 4vw;
box-sizing: border-box;
overflow: hidden;
}
.k110-contribution-success {
max-width: min(88vw, 900px);
max-height: calc(100svh - 118px);
gap: clamp(5px, 0.8vh, 12px);
line-height: 1.12;
transform: translateY(-1vh);
}
.k110-contribution-success-glyph,
.k110-contribution-final-alien {
font-size: clamp(48px, 9vh, 112px);
line-height: 0.98;
}
.k110-contribution-success-title {
font-size: clamp(30px, 5.5vh, 68px);
line-height: 1;
}
.k110-contribution-success-user-row {
width: min(88vw, 900px);
gap: clamp(8px, 1vh, 12px);
}
.k110-contribution-success-user {
max-width: min(64vw, 720px);
border-width: 2px;
font-size: clamp(18px, var(--k110-user-fit-size, 4vw), 46px);
line-height: 1.06;
padding: 0.12em 0.52em 0.16em;
}
.k110-contribution-success-points {
border-width: 2px;
font-size: clamp(15px, 2.2vh, 28px);
padding: 0.14em 0.42em 0.18em;
}
.k110-contribution-success-note {
font-size: clamp(18px, 3.1vh, 34px);
line-height: 1.16;
}
.k110-contribution-success-actions {
width: min(78vw, 620px);
gap: 10px;
}
.k110-contribution-success-actions .k110-c-independent-button {
min-height: clamp(42px, 5vh, 52px);
font-size: 16px;
}
}
@media (max-width: 700px) {
.k110-contribution-warp {
gap: 22px;
padding: 0 18px;
}
.k110-contribution-success {
gap: 12px;
line-height: 1.25;
}
.k110-contribution-success-glyph {
font-size: clamp(86px, 28vw, 138px);
}
.k110-contribution-success-title {
font-size: clamp(42px, 14vw, 76px);
}
.k110-contribution-success-user {
max-width: calc(100vw - 132px);
border-width: 3px;
font-size: clamp(22px, var(--k110-user-fit-size, 12vw), 62px);
padding: 0.18em 0.58em 0.22em;
}
.k110-contribution-success-user-row {
width: calc(100vw - 34px);
gap: 8px;
}
.k110-contribution-success-points {
font-size: clamp(17px, 5.1vw, 24px);
padding: 0.2em 0.48em 0.24em;
}
.k110-contribution-success-note {
font-size: clamp(27px, 8vw, 48px);
line-height: 1.36;
}
.k110-contribution-success-actions {
width: calc(100vw - 34px);
gap: 10px;
}
.k110-contribution-success-actions .k110-c-independent-button {
min-height: 54px;
font-size: 15px;
padding: 0 10px;
}
}
@keyframes k110HeroDissolveIn {
0% { opacity: 0; filter: blur(12px); transform: translateY(24px) scale(0.98); }
100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@media (max-width: 767px) and (orientation: portrait) {
:root {
--k110-edge-x: clamp(8px, 3vw, 15px);
--k110-edge-y: clamp(14px, 3.5vh, 25px);
--k110-header-h: clamp(42px, 7vh, 58px);
--k110-panel-w: calc(100vw - (var(--k110-edge-x) * 2));
--k110-panel-max-h: none;
--k110-safe-bottom-live: env(safe-area-inset-bottom, 0px);
--k110-safe-bottom-max: env(safe-area-max-inset-bottom, 34px);
--k110-mobile-visual-h: 100svh;
--k110-mobile-browser-bottom: 0px;
--k110-mobile-footer-clearance: clamp(5px, 1.2svh, 12px);
--k110-mobile-footer-tail: var(--k110-safe-bottom-live);
--k110-mobile-footer-visible-gap: var(--k110-safe-bottom-live);
--k110-mobile-bottom-gap: var(--k110-mobile-footer-clearance);
--k110-mobile-bottom-reserve: calc(var(--k110-mobile-footer-visible-gap) + var(--k110-mobile-footer-clearance));
--k110-mobile-viewport-h: var(--k110-mobile-visual-h);
--k110-mobile-panel-top: calc(var(--k110-header-h) + var(--k110-edge-y) + 14px);
--k110-tab-footer-h: clamp(46px, 7.4svh, 58px);
--k110-tab-footer-gap: clamp(10px, 1.4svh, 14px);
--k110-panel-available-h: max(300px, calc(var(--k110-mobile-viewport-h) - var(--k110-mobile-panel-top) - var(--k110-tab-footer-h) - var(--k110-tab-footer-gap) - var(--k110-mobile-footer-visible-gap)));
--k110-discover-status-h: var(--k110-bar-h);
--k110-discover-row-h: max(calc(var(--k110-discover-vote-size, 34px) + (var(--k110-discover-row-pad-y, 7px) * 2) + var(--k110-panel-line-w)), clamp(38px, 5.2svh, 44px));
--k110-discover-list-min-h: calc(var(--k110-discover-row-h) * 2);
--k110-discover-menu-h: clamp(92px, 14.8svh, 116px);
}
html,
body {
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
scroll-behavior: smooth;
}
html.is-mobile-keyboard-lock {
overflow-y: auto !important;
scroll-behavior: auto !important;
overscroll-behavior-y: none;
}
body {
padding-bottom: var(--k110-mobile-bottom-reserve) !important;
box-sizing: border-box;
}
body.is-mobile-keyboard-lock {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
scroll-behavior: auto !important;
}
.k110-header {
top: var(--k110-edge-y) !important;
left: var(--k110-edge-x) !important;
right: var(--k110-edge-x) !important;
height: var(--k110-header-h) !important;
align-items: flex-start !important;
}
/* 예약값 118px -> 88px. 이 값은 헤더 우측 계정 레이어 자리를 비워 두는 몫이고,
로고가 작던 시절(락업 약 234px)에 맞춰져 있었다. 두 로고를 같은 높이로 키운 뒤
락업의 자연 폭이 268px 이 되어 종전 예약값이면 박스가 내용보다 작다고 보고했다.
`overflow` 가 visible 이라 잘리지는 않지만, `justify-content: space-between` 이
계정 레이어를 배치할 때 참조하는 값이 박스라 어긋난 채로 두면 안 된다.
계정 레이어 실측이 72.3px 이라 88px 이면 390px 화면에서 박스가 내용과 맞는다.
380px 미만 + 관리자 진입(`?admin=1`) 조합에서는 몇 px 겹칠 수 있다. 일반
사용자에게 계정 레이어는 마운트되지 않으므로 그대로 둔다. */
/* 예약값 118px -> 88px. 이 값은 헤더 우측 계정 레이어 자리를 비워 두는 몫이고,
로고가 작던 시절(락업 약 234px)에 맞춰져 있었다. 계정 레이어 실측이 72.3px 이다.
잉크 정렬 뒤 락업 자연 폭이 197px 로 줄어 이 상한은 더 여유롭다.
`gap` 은 데스크톱과 같은 잉크 기준 파생값을 쓴다 — 종전 2px 을 남기면 모바일만
간격이 좁아진다. */
.k110-brand-lockup {
gap: calc(var(--k110-brand-ink-h) * 0.213) !important;
max-width: calc(100vw - var(--k110-edge-x) * 2 - 88px) !important;
align-items: center !important;
height: var(--k110-brand-lockup-h) !important;
}
.k110-brand-item {
height: var(--k110-brand-lockup-h) !important;
}
/* 데스크톱과 같이 폭 고정을 걷는다. 세로 조합은 높이만 정하면 폭이 따라온다.
종전 `clamp` 두 쌍은 3원+텍스트 가로 조합의 폭을 잡던 값이라 의미가 없어졌다. */
.k110-sandoll-cloud-logo {
flex-basis: auto !important;
width: auto !important;
padding: 0 !important;
}
/* 폭 clamp 두 쌍은 SVG 박스를 잡던 값이라 걷었다. 문자 크기만 좁은 화면에서 줄인다. */
.k110-brand-x {
width: auto !important;
font-size: clamp(22px, 5.8vw, 26px) !important;
}
/* 폭 clamp 를 걷는다. 높이 기준으로 바뀌었으므로 폭을 따로 잡으면 비율이 깨진다. */
.k110-home-logo {
width: auto !important;
}
.k110-hero,
.k110-ui {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.k110-hero {
min-height: 100svh !important;
height: auto !important;
display: flex !important;
flex-direction: column;
justify-content: flex-start;
padding-top: clamp(210px, 32svh, 305px) !important;
padding-bottom: var(--k110-mobile-bottom-reserve) !important;
overflow: visible !important;
box-sizing: border-box;
text-align: center;
opacity: 0;
animation: k110HeroDissolveIn 1.7s ease 1.35s forwards !important;
}
.k110-hero-title {
--k110-hero-title-size: clamp(44px, min(17vw, 10.4svh), 76px);
line-height: 0.94 !important;
}
.k110-sample-counter {
font-size: clamp(12px, 3.6vw, 15px) !important;
}
.k110-mobile-scroll-hint {
display: block !important;
width: 100% !important;
margin-top: auto !important;
margin-bottom: clamp(56px, 10svh, 110px) !important;
color: #fff !important;
background: none !important;
background-size: 420% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
font-size: clamp(13px, 3.8vw, 17px) !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
text-align: center !important;
animation: none !important;
opacity: 0.88 !important;
pointer-events: none !important;
white-space: nowrap !important;
transform: translateY(0);
transition: opacity 0.32s ease, filter 0.32s ease, transform 0.32s ease;
}
body.is-mobile-hero-idle-hint .k110-mobile-scroll-hint {
color: #fff !important;
background: none !important;
background-size: auto !important;
-webkit-background-clip: text !important;
background-clip: text !important;
animation: k110MobileScrollHintNudge 1.8s cubic-bezier(0.2, 0.86, 0.22, 1) infinite !important;
opacity: 1 !important;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.38));
}
.k110-ui {
max-height: none !important;
overflow: visible !important;
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: var(--k110-mobile-bottom-reserve) !important;
box-sizing: border-box;
scroll-margin-top: calc(var(--k110-header-h) + var(--k110-edge-y) + 14px);
}
.k110-ui.is-design-mode {
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
}
.k110-panel.is-active {
--k110-panel-footer-h: var(--k110-tab-footer-h);
--k110-panel-footer-gap: var(--k110-tab-footer-gap);
--k110-panel-frame-h: var(--k110-panel-available-h);
max-height: none !important;
overflow: visible !important;
padding-right: 0;
padding-bottom: var(--k110-mobile-bottom-gap);
margin-top: var(--k110-mobile-panel-top);
}
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
min-height: var(--k110-tab-footer-h);
margin-bottom: var(--k110-mobile-bottom-gap);
gap: 2px;
}
.k110-panel.is-active > .k110-feature-buttons .k110-feature-btn,
.k110-panel.is-active > .k110-feature-buttons .k110-back-btn,
.k110-panel.is-active > .k110-subnav .k110-feature-btn,
.k110-panel.is-active > .k110-subnav .k110-back-btn {
min-height: var(--k110-tab-footer-h);
}
#discoverPanel.k110-panel.is-active {
margin-top: var(--k110-mobile-panel-top);
}
body.is-design-mobile-focus .k110-header {
opacity: 0;
transform: translateY(calc(-100% - 18px)) !important;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.86, 0.22, 1);
}
body.is-design-mobile-focus.is-design-show-header .k110-header {
opacity: 1;
transform: translateY(0) !important;
pointer-events: auto;
}
body.is-design-mobile-focus #designPanel.k110-panel.is-active {
margin-top: max(2px, env(safe-area-inset-top)) !important;
}
body.is-design-mobile-focus.is-design-show-header #designPanel.k110-panel.is-active {
margin-top: var(--k110-mobile-panel-top) !important;
}
body.is-design-mobile-focus #designPanel > .k110-subnav {
max-height: none;
margin-top: 12px;
opacity: 1;
overflow: visible;
pointer-events: auto;
transform: translateY(0);
transition: none;
}
body.is-design-mobile-focus.is-design-show-nav #designPanel > .k110-subnav {
max-height: 140px;
margin-top: 12px;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.k110-user-layer {
width: auto;
max-width: 54vw;
margin: 0;
}
.k110-auth-action {
min-height: 36px;
height: 36px;
padding: 2px 8px 2px 4px;
gap: 4px;
font-size: clamp(11px, 3vw, 14px);
box-shadow: none;
max-width: 100%;
overflow: hidden;
}
.k110-auth-icon {
flex-basis: 24px;
width: 24px;
height: 24px;
}
.k110-status-dot {
position: absolute;
width: 1px;
height: 1px;
}
.k110-user-toast {
position: fixed;
top: calc(var(--k110-edge-y) + var(--k110-header-h) + 10px);
right: var(--k110-edge-x);
left: var(--k110-edge-x);
width: auto;
}
.k110-review-compare,
.k110-design-body,
.k110-action-row {
grid-template-columns: 1fr;
}
#normalInput,
#alienOutput {
min-height: clamp(168px, 26svh, 220px);
font-size: clamp(28px, 9.4vw, 46px) !important;
line-height: 1.12 !important;
padding: 14px 12px !important;
text-align: center !important;
overflow-wrap: anywhere;
word-break: keep-all;
}
#normalInput {
display: block;
align-content: center;
overflow-y: auto;
}
#normalInput::placeholder {
font-size: clamp(24px, 8.1vw, 38px);
line-height: 1.16;
white-space: normal;
color: rgba(0,0,0,0.48);
}
#alienOutput {
display: flex;
align-items: center;
justify-content: center;
}
#translatePanel .k110-action-row {
grid-template-columns: repeat(var(--k110-translate-action-cols), minmax(0, 1fr));
}
#charInput {
width: 100%;
min-height: 132px;
}
#designPanel.is-source-collapsed .k110-input-col {
position: relative;
right: auto;
bottom: auto;
display: block;
width: 100%;
height: 100%;
}
#designPanel.is-source-collapsed #charInput {
width: 100%;
height: 100%;
min-height: 0;
border-width: 2px;
font-size: clamp(24px, 8vw, 34px);
box-shadow: inset 0 0 0 1px rgba(124,255,0,0.32), 0 0 10px rgba(124,255,0,0.2);
}
#designPanel.is-source-collapsed #resetBtn {
position: absolute;
right: 5px;
top: 5px;
width: 22px;
height: 22px;
min-height: 0;
flex: none;
}
#designPanel .k110-box {
height: auto !important;
max-height: none !important;
display: block !important;
overflow: visible !important;
}
.k110-box,
.k110-review-card {
padding: 16px;
}
.k110-review-word {
height: clamp(118px, 20svh, 150px);
min-height: 118px;
max-height: 150px;
}
.k110-label {
margin: -16px -16px 15px -16px;
}
.k110-design-output-wrap {
position: sticky;
top: max(var(--k110-edge-y), env(safe-area-inset-top));
z-index: 45;
height: clamp(150px, 22svh, 184px);
min-height: clamp(150px, 22svh, 184px);
flex: 0 0 clamp(150px, 22svh, 184px);
padding-right: 88px;
}
body.is-design-mobile-focus .k110-design-output-wrap {
top: max(2px, env(safe-area-inset-top));
}
body.is-design-mobile-focus.is-design-show-header .k110-design-output-wrap {
top: calc(var(--k110-header-h) + var(--k110-edge-y) + 8px);
}
#designOutput {
min-height: 100%;
height: 100%;
max-height: 100%;
font-size: clamp(72px, 24vw, 132px);
}
#designOutput.is-compact {
font-size: clamp(28px, 7vw, 40px);
}
#designOutput.is-dense {
font-size: clamp(22px, 5.5vw, 30px);
}
#designCopyBtn,
#designBackspaceBtn {
width: 62px;
right: 12px;
height: calc((100% - 38px) / 2);
}
#designIdleMarquee {
right: 88px;
}
#designIdleMarquee .marquee-line span {
margin-right: 66%;
}
#designIdleMarquee .marquee-line {
font-size: clamp(20px, 6.2vw, 34px);
}
.k110-design-body {
grid-template-columns: minmax(0, 1fr) 76px;
grid-template-rows: minmax(0, 1fr) 76px;
gap: 9px;
margin-top: 6px;
height: max(456px, calc(var(--k110-mobile-viewport-h) - max(2px, env(safe-area-inset-top)) - var(--k110-mobile-bottom-reserve) - clamp(150px, 22svh, 184px) - 12px));
min-height: 456px;
max-height: none;
padding: 0;
}
body.is-design-mobile-focus.is-design-show-header .k110-design-body,
body.is-design-mobile-focus.is-design-show-nav .k110-design-body {
margin-top: 9px;
height: max(344px, calc(var(--k110-panel-available-h) - clamp(150px, 22svh, 184px) - var(--k110-tab-footer-h) - 26px));
min-height: 344px;
max-height: none;
}
.k110-design-body > div:last-child {
display: contents;
}
.k110-input-col {
width: 76px;
height: 76px;
}
#charInput {
width: 100%;
height: 100%;
min-height: 0;
border-width: 2px;
font-size: clamp(24px, 8vw, 34px);
box-shadow: inset 0 0 0 1px rgba(124,255,0,0.32), 0 0 10px rgba(124,255,0,0.2);
}
#designPanel.is-source-collapsed .k110-input-col {
position: relative;
right: auto;
bottom: auto;
display: block;
width: 76px;
height: 76px;
}
#designPanel.is-source-collapsed #charInput {
width: 100%;
height: 100%;
min-height: 0;
border-width: 2px;
font-size: clamp(24px, 8vw, 34px);
box-shadow: inset 0 0 0 1px rgba(124,255,0,0.32), 0 0 10px rgba(124,255,0,0.2);
}
#designPanel.is-source-collapsed #resetBtn {
position: absolute;
right: 5px;
top: 5px;
width: 22px;
height: 22px;
min-height: 0;
flex: none;
}
.k110-glyph-grid {
--k110-glyph-grid-scroll-offset: 20px;
--k110-glyph-grid-row: 60px;
grid-column: 1 / -1;
grid-row: 1;
height: 100%;
max-height: 100%;
overflow-x: visible;
overflow-y: auto;
gap: 3px;
padding: 6px var(--k110-glyph-grid-scroll-offset) 28px 0;
margin-right: calc(var(--k110-glyph-grid-scroll-offset) * -1);
scroll-padding-bottom: 28px;
}
#designStatus {
grid-column: 1;
grid-row: 2;
min-height: 76px;
padding: 8px 10px;
font-size: clamp(11px, 3.2vw, 14px);
border-radius: 8px;
}
#designPanel .glyph-group {
width: 100%;
grid-template-columns: var(--k110-design-glyph-button-h, 64px) minmax(0, 1fr);
align-items: start;
gap: var(--k110-design-glyph-head-gap, calc(var(--k110-gap, 2px) * 6));
border-width: 0;
padding: 0 0 3px;
box-shadow: none;
}
#designPanel .glyph-group-label {
--glyph-bracket-line: var(--k110-panel-line-w, 1px);
--glyph-bracket-arm: calc(var(--k110-gap, 2px) * 3);
font-size: var(--k110-type-body);
height: var(--k110-design-glyph-button-h, 64px);
min-height: var(--k110-design-glyph-button-h, 64px);
gap: 4px;
margin-top: 0;
padding: 0 7px;
}
#designPanel .glyph-group-label-pill {
min-height: 0;
padding: 0;
font-size: var(--k110-type-body);
line-height: 0.88;
}
#designPanel .glyph-group-count {
font-size: var(--k110-type-micro);
}
#designPanel .glyph-scroll {
gap: var(--k110-design-glyph-button-gap, calc(var(--k110-gap, 2px) * 3));
padding: 0 18px 10px 0;
overflow-y: visible;
touch-action: pan-x pan-y;
}
#designPanel .glyph-scroll::-webkit-scrollbar {
height: 7px;
}
#designPanel .glyph-scroll::-webkit-scrollbar-track {
background: rgba(255,255,255,0.16);
}
#designPanel .glyph-group.has-left .glyph-scroll {
padding-left: calc(var(--k110-gap, 2px) * 3);
}
#designPanel .glyph-group.has-right .glyph-scroll {
padding-right: calc(var(--k110-gap, 2px) * 3);
}
#designPanel .glyph-group.has-left.has-right .glyph-scroll {
-webkit-mask-image: none;
mask-image: none;
}
#designPanel .glyph-group.has-left:not(.has-right) .glyph-scroll {
-webkit-mask-image: none;
mask-image: none;
}
#designPanel .glyph-group.has-right:not(.has-left) .glyph-scroll {
-webkit-mask-image: none;
mask-image: none;
}
#designPanel .glyph-scroll.is-wrap {
padding: 3px 0 6px;
}
#designPanel .glyph-group.has-left:before,
#designPanel .glyph-group.has-right:after {
top: 6px;
bottom: 18px;
width: 12px;
min-height: 22px;
font-size: 17px;
opacity: 0.76;
}
#designPanel .glyph-group.has-left:before {
left: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-gap, 2px));
}
#designPanel .glyph-group.has-right:after {
right: -2px;
}
#designPanel .glyph-item {
flex-basis: auto;
width: max(var(--k110-design-glyph-button-h, 64px), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w, 42px)));
min-width: max(var(--k110-design-glyph-button-h, 64px), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w, 42px)));
max-width: none;
height: var(--k110-design-glyph-button-h, 64px);
min-height: var(--k110-design-glyph-button-h, 64px);
border-width: 0;
box-shadow: none;
border-radius: var(--k110-design-glyph-button-r, 8px);
font-size: clamp(18px, 5.2vw, 22px);
padding: 4px 5px;
}
#designPanel .glyph-item.is-color-rolling {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.38),
0 0 10px var(--glyph-accent-color, #7CFF00),
0 0 22px color-mix(in srgb, var(--glyph-accent-color, #7CFF00) 58%, transparent);
}
#designPanel .glyph-item.is-color-solid,
#designPanel .glyph-item.is-color-mixed {
box-shadow:
0 0 10px var(--glyph-glow-a, #7CFF00),
0 0 22px color-mix(in srgb, var(--glyph-glow-a, #7CFF00) 58%, transparent);
}
#designPanel .glyph-item.is-color-mixed {
box-shadow:
0 0 9px var(--glyph-glow-a, #7CFF00),
0 0 18px color-mix(in srgb, var(--glyph-glow-a, #7CFF00) 56%, transparent),
0 0 10px var(--glyph-glow-b, #00E5FF),
0 0 22px color-mix(in srgb, var(--glyph-glow-b, #00E5FF) 48%, transparent),
0 0 11px var(--glyph-glow-c, #FF5CC8),
0 0 26px color-mix(in srgb, var(--glyph-glow-c, #FF5CC8) 42%, transparent);
}
.k110-contribution-actions {
grid-template-columns: 1fr 2fr;
}
.k110-history-box {
width: var(--k110-panel-w);
max-height: 82svh;
padding: 16px;
}
.k110-history-head {
align-items: stretch;
gap: 12px;
padding-right: 48px;
}
.k110-history-head h3 {
font-size: clamp(32px, 11vw, 48px);
}
#closeHistoryBtn {
top: 14px;
right: 14px;
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
font-size: 24px;
animation: k110GlyphItemAppear 0.24s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}
.glyph-item:nth-child(1) { animation-delay: 0.03s; }
.glyph-item:nth-child(2) { animation-delay: 0.05s; }
.glyph-item:nth-child(3) { animation-delay: 0.07s; }
.glyph-item:nth-child(4) { animation-delay: 0.09s; }
.glyph-item:nth-child(5) { animation-delay: 0.11s; }
.glyph-item:nth-child(6) { animation-delay: 0.13s; }
.glyph-item:nth-child(7) { animation-delay: 0.15s; }
.glyph-item:nth-child(8) { animation-delay: 0.17s; }
@keyframes k110GlyphItemAppear {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
.k110-history-stats {
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px 0;
margin-bottom: 16px;
}
.history-stat {
border: 2px solid #fff;
padding: 10px 6px;
}
.history-stat strong {
font-size: clamp(30px, 11vw, 44px);
}
.history-stat-sep {
display: none;
}
.history-row {
grid-template-columns: 88px minmax(0, 1fr);
gap: 10px;
}
.history-symbol {
width: 82px;
height: 82px;
border-width: 3px;
border-radius: 10px;
padding: 7px;
}
.history-symbol strong {
font-size: clamp(22px, 9vw, 38px);
}
.history-info-line {
font-size: clamp(12px, 3.5vw, 15px);
}
}
@media (min-width: 768px) {
:root {
--k110-edge-y: clamp(12px, 2.4svh, 32px);
--k110-header-h: clamp(42px, 6svh, 66px);
--k110-panel-top: calc(var(--k110-edge-y) + var(--k110-header-h) + clamp(8px, 1.5svh, 18px));
--k110-panel-bottom: 0px;
--k110-panel-max-h: calc(100svh - var(--k110-panel-top) - var(--k110-panel-bottom));
--k110-panel-w: min(67.5vw, calc(100svh * 1.34), 1080px);
--k110-panel-control-h: clamp(76px, 10svh, 112px);
--k110-panel-box-h: max(360px, calc(var(--k110-panel-max-h) - var(--k110-panel-control-h)));
}
.k110-ui {
top: var(--k110-panel-top) !important;
transform: none !important;
max-height: var(--k110-panel-max-h) !important;
overflow: hidden !important;
}
.k110-panel.is-active {
display: flex !important;
flex-direction: column;
height: var(--k110-panel-max-h) !important;
max-height: var(--k110-panel-max-h) !important;
overflow: hidden !important;
padding-right: 0;
}
.k110-panel.is-active > .k110-panel-main,
.k110-panel.is-active > .k110-panel-frame > .k110-panel-main {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 0;
scrollbar-gutter: auto;
box-sizing: border-box;
}
/* Panel footer rule: tab buttons are outside the visual frame and stay bottom-aligned. */
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
flex: 0 0 auto;
margin-top: auto;
padding-top: clamp(10px, 1.7svh, 18px);
gap: 2px;
}
.k110-box,
.k110-review-card {
padding: clamp(12px, 1.8svh, 20px);
margin-bottom: clamp(10px, 1.8svh, 20px);
}
.k110-label {
margin: calc(clamp(12px, 1.8svh, 20px) * -1) calc(clamp(12px, 1.8svh, 20px) * -1) clamp(9px, 1.4svh, 15px) calc(clamp(12px, 1.8svh, 20px) * -1);
}
#normalInput,
#alienOutput {
min-height: clamp(124px, 21svh, 220px);
padding: clamp(10px, 1.6svh, 16px);
font-size: clamp(32px, min(6vw, 6.5svh), 68px) !important;
}
.k110-review-word {
height: clamp(112px, 18svh, 190px);
min-height: clamp(112px, 18svh, 190px);
max-height: clamp(112px, 18svh, 190px);
padding: clamp(12px, 1.8svh, 18px);
font-size: clamp(22px, min(3vw, 4.2svh), 38px);
}
.k110-action-row {
margin-top: clamp(8px, 1.3svh, 14px);
gap: clamp(8px, 1.2svh, 10px);
}
.k110-action-row button {
min-height: clamp(42px, 6svh, 52px);
}
.k110-feature-buttons,
.k110-subnav {
margin-top: clamp(10px, 1.8svh, 22px);
gap: 2px;
}
.k110-design-output-wrap {
top: 0;
}
.k110-feature-btn,
.k110-back-btn {
min-height: clamp(38px, 5.8svh, 48px);
padding: clamp(8px, 1.4svh, 12px) 10px;
font-size: clamp(13px, min(1.1vw, 2svh), 15px);
}
#designPanel .k110-box {
height: auto;
max-height: none;
}
.k110-discover-box {
min-height: 0;
height: 100%;
gap: 0;
}
.k110-discover-stage {
min-height: 0;
height: 100%;
padding-top: 0;
}
}
@media (min-width: 768px) and (max-height: 760px) {
:root {
--k110-edge-y: clamp(8px, 1.8svh, 18px);
--k110-header-h: clamp(38px, 5.4svh, 52px);
--k110-panel-control-h: clamp(68px, 9svh, 96px);
--k110-panel-w: min(66vw, calc(100svh * 1.25), 980px);
}
/* 폭 clamp 를 걷는다. 높이 기준으로 바뀌었으므로 폭을 따로 잡으면 비율이 깨진다. */
.k110-home-logo {
width: auto !important;
}
.k110-user-badge {
padding: 6px 12px;
box-shadow: none;
}
.k110-hero-title {
--k110-hero-title-size: clamp(42px, min(6.6vw, 14vh), 82px);
}
.k110-sample-counter {
font-size: clamp(14px, 1.6vw, 20px);
margin-top: 10px;
}
#normalInput,
#alienOutput {
min-height: clamp(108px, 19svh, 172px);
font-size: clamp(28px, min(5.2vw, 6svh), 56px) !important;
}
#designPanel .k110-box {
height: auto;
max-height: none;
}
}
@media (min-width: 1024px) and (orientation: landscape) {
:root {
--k110-edge-x: clamp(23px, 2.6vw, 60px);
--k110-panel-w: clamp(540px, 41.8vw, 900px);
--k110-panel-max-h: calc(100svh - var(--k110-panel-top) - var(--k110-panel-bottom));
}
.k110-hero {
width: clamp(360px, 33vw, 700px) !important;
}
.k110-hero-title {
--k110-hero-title-size: clamp(52px, min(7vw, 16vh), 112px);
}
.k110-ui,
.k110-ui.is-design-mode {
right: var(--k110-edge-x) !important;
width: var(--k110-panel-w) !important;
}
.k110-feature-buttons,
.k110-subnav {
position: relative;
left: auto;
right: auto;
bottom: auto;
width: 100%;
margin-top: clamp(10px, 1.7svh, 18px);
gap: 2px;
z-index: 180;
}
.k110-panel.is-active {
padding-bottom: 0;
}
#designPanel.k110-panel.is-active {
overflow-y: auto;
}
#designPanel .k110-box {
margin-bottom: 0;
}
.k110-design-body {
min-height: clamp(300px, calc(var(--k110-panel-max-h) - 226px), 520px);
}
}
#translatePanel .k110-panel-main {
grid-template-rows:
var(--k110-translate-gap-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-exec-h)
var(--k110-translate-status-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-gap-h)
var(--k110-translate-action-h) !important;
}
#translatePanel .k110-translate-input-wrap,
#translatePanel #normalInput,
#translatePanel #alienOutput {
min-height: var(--k110-translate-field-h) !important;
height: 100% !important;
}
@media (max-width: 767px) and (orientation: portrait) {
#translatePanel {
--k110-translate-main-h: max(180px, calc(var(--k110-panel-frame-h) - var(--k110-bar-h, calc(52px * 2 / 3))));
--k110-translate-field-h: clamp(96px, calc((var(--k110-translate-main-h) - var(--k110-translate-action-h) - var(--k110-translate-exec-h) - var(--k110-translate-status-h) - (var(--k110-translate-gap-h) * 2)) / 2), 310px);
}
#translatePanel .k110-panel-main {
display: grid !important;
grid-template-rows:
var(--k110-translate-gap-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-exec-h)
var(--k110-translate-status-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-gap-h)
var(--k110-translate-action-h) !important;
}
}
@media (min-width: 768px) and (max-height: 760px) {
#translatePanel {
--k110-translate-main-h: max(180px, calc(var(--k110-panel-frame-h) - var(--k110-bar-h, calc(52px * 2 / 3))));
--k110-translate-field-h: clamp(88px, calc((var(--k110-translate-main-h) - var(--k110-translate-action-h) - var(--k110-translate-exec-h) - var(--k110-translate-status-h) - (var(--k110-translate-gap-h) * 2)) / 2), 220px);
}
}
.k110-feature-btn,
.k110-back-btn {
--k110-tab-tail-h: 120svh;
}
.k110-feature-btn::before,
.k110-back-btn::before,
.k110-feature-btn::after,
.k110-back-btn::after {
height: calc(100% + var(--k110-tab-tail-h, 120svh));
}
.k110-feature-btn::after,
.k110-back-btn::after {
background:
linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92)) top / 100% calc(100% - var(--k110-tab-tail-h, 120svh)) no-repeat,
linear-gradient(0deg, var(--k110-feature-glow-strong) 0%, var(--k110-feature-glow-soft) 34%, rgba(0,0,0,0) 74%) 0 calc(100% - var(--k110-tab-tail-h, 120svh)) / 100% var(--k110-tab-tail-h, 120svh) no-repeat;
}
.k110-feature-btn:hover::after,
.k110-back-btn:hover::after {
background:
linear-gradient(var(--k110-feature-fill), var(--k110-feature-fill)) top / 100% calc(100% - var(--k110-tab-tail-h, 120svh)) no-repeat,
linear-gradient(0deg, var(--k110-feature-glow-strong) 0%, var(--k110-feature-glow-soft) 34%, rgba(0,0,0,0) 74%) 0 calc(100% - var(--k110-tab-tail-h, 120svh)) / 100% var(--k110-tab-tail-h, 120svh) no-repeat;
}
.k110-feature-btn.is-tab-active::after,
.k110-back-btn.is-tab-active::after {
background:
linear-gradient(var(--k110-feature-fill), var(--k110-feature-fill)) top / 100% calc(100% - var(--k110-tab-tail-h, 120svh)) no-repeat,
linear-gradient(0deg, var(--k110-feature-glow-strong) 0%, var(--k110-feature-glow-soft) 34%, rgba(0,0,0,0) 74%) 0 calc(100% - var(--k110-tab-tail-h, 120svh)) / 100% var(--k110-tab-tail-h, 120svh) no-repeat;
}
@media (max-width: 767px) and (orientation: portrait) {
.k110-panel.is-active {
padding-bottom: 0 !important;
}
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
position: fixed !important;
left: var(--k110-edge-x) !important;
right: var(--k110-edge-x) !important;
bottom: var(--k110-mobile-footer-tail) !important;
width: var(--k110-panel-w) !important;
z-index: 190 !important;
min-height: var(--k110-tab-footer-h);
height: var(--k110-tab-footer-h);
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
align-items: stretch;
box-sizing: border-box;
}
.k110-panel.is-active > .k110-feature-buttons .k110-feature-btn,
.k110-panel.is-active > .k110-feature-buttons .k110-back-btn,
.k110-panel.is-active > .k110-subnav .k110-feature-btn,
.k110-panel.is-active > .k110-subnav .k110-back-btn {
min-height: var(--k110-tab-footer-h);
}
.k110-panel.is-active {
display: flex !important;
flex-direction: column;
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
overflow: hidden !important;
}
.k110-panel.is-active > .k110-panel-main,
.k110-panel.is-active > .k110-panel-frame > .k110-panel-main {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
#discoverPanel.k110-panel.is-active {
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
}
}
/* K110 SECTION CSS-80 DESIGN PANEL */
#designPanel {
--k110-panel-primary: #00E5FF;
--k110-design-color: #00E5FF;
--k110-design-glow-soft: rgba(0,229,255,0.18);
--k110-design-glow-strong: rgba(0,229,255,0.44);
--k110-design-output-display-size: var(--k110-type-display);
--k110-design-output-h: clamp(156px, calc(var(--k110-design-output-display-size) + var(--k110-bar-h, 35px)), 230px);
--k110-design-glyph-button-h: 64px;
--k110-design-glyph-button-r: 8px;
--k110-design-glyph-unit-w: 42px;
--k110-design-glyph-button-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-head-gap: calc(var(--k110-gap, 2px) * 6);
--k110-design-glyph-group-gap: calc(var(--k110-gap, 2px) * 12);
--k110-design-action-gap: var(--k110-button-cluster-gap, var(--k110-gap, 2px));
--k110-design-bar-action-total-w: 25%;
--k110-design-bar-action-w: 12.5%;
background: transparent;
border: 0;
box-shadow: none;
}
#designPanel > .k110-panel-bar,
#designPanel > .k110-panel-main,
#designPanel > .k110-panel-frame > .k110-panel-bar,
#designPanel > .k110-panel-frame > .k110-panel-main {
border-left: var(--k110-panel-line-w) solid rgba(0,229,255,0.34);
border-right: var(--k110-panel-line-w) solid rgba(0,229,255,0.34);
box-shadow:
0 0 18px rgba(0,229,255,0.1),
0 0 42px rgba(0,229,255,0.05);
}
#designPanel > .k110-design-panel-bar-top,
#designPanel > .k110-panel-frame > .k110-design-panel-bar-top {
border-top: var(--k110-panel-line-w) solid rgba(0,229,255,0.44);
}
#designPanel > .k110-design-panel-bar-bottom,
#designPanel > .k110-panel-frame > .k110-design-panel-bar-bottom {
border-bottom: var(--k110-panel-line-w) solid rgba(0,229,255,0.34);
}
#designPanel .k110-panel-bar {
--k110-panel-primary: #00E5FF;
border-color: rgba(0,229,255,0.42);
}
#designPanel .k110-panel-bar-dots {
background-image: radial-gradient(circle at 50% 50%, rgba(0,229,255,0.26) 0.75px, transparent 1.08px);
}
#designPanel .k110-panel-title {
color: #00E5FF;
text-shadow: 0 0 9px rgba(0,229,255,0.58);
}
#designPanel .k110-panel-main {
padding: 0;
background: rgba(0,0,0,0.56);
}
#designPanel .k110-box {
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid rgba(0,229,255,0.42) !important;
background: rgba(0,0,0,0.3) !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column;
min-height: 0;
}
#designPanel .k110-label {
display: none !important;
}
#designPanel .k110-design-output-wrap {
--grid-accent: var(--k110-panel-primary);
--grid-bg: rgba(0,0,0,0.62);
--grid-line-alpha-x: 28%;
--grid-line-alpha-y: 24%;
--grid-glow-alpha: 12%;
--grid-shadow:
inset 0 -22px 44px rgba(0,229,255,0.1),
0 0 18px rgba(0,229,255,0.12);
position: relative !important;
top: auto !important;
height: var(--k110-design-output-h);
min-height: var(--k110-design-output-h);
flex: 0 0 var(--k110-design-output-h);
margin: 0;
border: 0;
border-bottom: 1px solid rgba(0,229,255,0.42);
border-radius: 0;
}
#designPanel #designOutput {
--k110-alien-output-color: var(--k110-panel-primary);
--k110-alien-output-glow-tight: 10px;
--k110-alien-output-glow-wide: 24px;
--k110-alien-output-glow-strong: 72%;
--k110-alien-output-glow-soft: 42%;
color: var(--k110-alien-output-color);
font-size: var(--k110-design-output-display-size);
text-shadow: var(--k110-alien-output-glow);
}
#designPanel #designGhostCaret {
background: #00E5FF;
box-shadow: 0 0 10px rgba(0,229,255,0.86);
}
#designPanel #designCopyBtn {
background: #00E5FF;
color: #000;
}
#designPanel #designBackspaceBtn {
background: #FF3B30;
color: #000;
}
#designPanel .k110-design-body {
margin-top: var(--k110-gap, 2px);
padding: 0;
min-height: clamp(300px, calc(var(--k110-panel-max-h) - 300px), 560px);
background: transparent;
grid-template-columns: minmax(0, 3fr) minmax(74px, 1fr);
grid-template-rows: minmax(0, 1fr) clamp(78px, 10vw, 112px);
gap: var(--k110-gap, 2px);
overflow: visible;
}
#designPanel #charInput {
border: var(--k110-button-line-w, 1px) solid rgba(0,229,255,0.74);
border-radius: 0;
background:
linear-gradient(0deg, rgba(0,229,255,0.16), rgba(0,0,0,0) 68%),
rgba(0,0,0,0.82);
color: #00E5FF;
box-shadow:
inset 0 -16px 34px rgba(0,229,255,0.12),
0 0 14px rgba(0,229,255,0.2);
animation: none;
}
#designPanel #charInput.is-special-mode {
font-size: var(--k110-char-input-fit-size);
}
#designPanel #charInput:focus,
#designPanel #charInput.is-focused {
border-color: #00E5FF;
box-shadow:
inset 0 -22px 42px rgba(0,229,255,0.22),
0 0 18px rgba(0,229,255,0.34);
}
#designPanel #charInput.is-special-mode {
border-color: #fff;
background-image: var(--k110-neon-roll-gradient);
background-size: 620% 100%;
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}
#designPanel .k110-glyph-grid {
scrollbar-color: rgba(0,229,255,0.82) transparent;
}
#designPanel .k110-glyph-grid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #00E5FF, #7CFF00, #FF5CC8);
}
#designPanel #designStatus {
--status-accent: var(--k110-panel-primary);
--status-fg: var(--k110-panel-primary);
color: #00E5FF;
border: 1px solid rgba(0,229,255,0.58);
background-color: rgba(0,0,0,0.72);
background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--k110-panel-primary) 22%, transparent) 0 var(--k110-panel-line-w, 1px), transparent var(--k110-panel-line-w, 1px) 12px);
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
text-shadow: 0 0 8px rgba(0,229,255,0.38);
box-shadow: inset 0 -16px 34px rgba(0,229,255,0.08);
}
#designPanel #designStatus .k110-design-status-line {
display: inline-flex;
align-items: center;
max-width: 100%;
min-width: 0;
white-space: normal;
}
#designPanel #designStatus .k110-design-status-typed {
display: inline;
max-width: 100%;
overflow: visible;
white-space: normal;
clip-path: none;
animation: none;
}
#designPanel #designStatus .k110-design-status-cursor {
display: inline-block;
width: 0.42em;
height: 1em;
margin-left: 3px;
background: currentColor;
box-shadow: 0 0 8px rgba(0,229,255,0.72);
animation: k110FxCursorBlink 0.72s steps(1, end) infinite;
}
#designPanel #designStatus .k110-design-status-cursor.is-hidden {
opacity: 0;
visibility: hidden;
}
@media (max-width: 767px) and (orientation: portrait) {
.k110-ui.is-design-mode {
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
}
#designPanel.k110-panel.is-active {
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
overflow: hidden !important;
margin-top: var(--k110-mobile-panel-top) !important;
padding-bottom: 0 !important;
}
#designPanel .k110-box {
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
#designPanel .k110-design-output-wrap {
--k110-design-output-h: clamp(132px, calc(var(--k110-design-output-display-size) + var(--k110-bar-h, 35px)), 174px);
height: var(--k110-design-output-h);
min-height: var(--k110-design-output-h);
flex-basis: var(--k110-design-output-h);
padding-right: 82px;
}
#designPanel #designOutput {
font-size: clamp(68px, 22vw, 122px);
}
#designPanel .k110-design-body {
height: auto;
min-height: 0;
flex: 1 1 auto;
grid-template-columns: minmax(0, 1fr) 76px;
grid-template-rows: minmax(0, 1fr) 76px;
}
#designPanel .k110-glyph-grid {
--k110-glyph-grid-row: 60px;
padding-bottom: 28px;
}
}
:root {
--k110-bar-h: calc(52px * 2 / 3);
--k110-bar-font-size: clamp(12px, 1.1vw, 15px);
--k110-bar-dot-size: 5px 5px;
--k110-pattern-flow-speed: 9s;
--k110-pattern-flow-x: 24px;
--k110-pattern-flow-y: 24px;
}
@keyframes k110PatternDotFlow {
0% { background-position: 0 0; }
100% { background-position: var(--k110-pattern-flow-x) var(--k110-pattern-flow-y); }
}
@keyframes k110PatternDotFlowReverse {
0% { background-position: 0 0; }
100% { background-position: calc(var(--k110-pattern-flow-x) * -1) var(--k110-pattern-flow-y); }
}
@keyframes k110PatternGridFlow {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: var(--k110-pattern-flow-x) var(--k110-pattern-flow-y), var(--k110-pattern-flow-x) var(--k110-pattern-flow-y), 0 0; }
}
.k110-panel-bar-dots,
.k110-auth-band-dots {
animation-duration: var(--k110-pattern-flow-speed) !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
}
.k110-panel-bar-dots {
animation-name: k110PatternDotFlow !important;
}
.k110-panel-bar-bottom .k110-panel-bar-dots,
.k110-auth-band-bottom .k110-auth-band-dots {
animation-name: k110PatternDotFlowReverse !important;
}
#translatePanel #alienOutput.k110-c-output-grid-bg {
--output-accent: var(--k110-panel-primary);
}
@keyframes k110DesignButtonReleaseGlow {
0% { opacity: 0.86; transform: scale(1); }
60% { opacity: 0.46; transform: scale(1.24); }
100% { opacity: 0; transform: scale(1.42); }
}
@keyframes k110DesignGlyphOrganicRoll {
0% {
background-position: 0% 10%, 100% 90%, 44% 48%, 0% 50%;
filter: saturate(1.55) brightness(1.08);
}
45% {
background-position: 78% 42%, 22% 58%, 70% 18%, 54% 50%;
filter: saturate(1.72) brightness(1.16);
}
100% {
background-position: 0% 10%, 100% 90%, 44% 48%, 100% 50%;
filter: saturate(1.55) brightness(1.08);
}
}
#designPanel.k110-panel.is-active {
display: flex !important;
flex-direction: column;
overflow: visible !important;
}
#designPanel > .k110-panel-bar,
#designPanel > .k110-panel-frame > .k110-panel-bar {
flex: 0 0 auto;
}
#designPanel .k110-design-panel-bar-top {
--k110-design-bar-action-w: clamp(48px, 6.4vw, 72px);
overflow: visible;
}
#designPanel .k110-design-panel-bar-top .k110-panel-title {
padding-right: calc((var(--k110-design-bar-action-w) * 2) + 18px);
}
#designPanel .k110-design-bar-actions {
position: absolute;
right: 0;
top: 0;
z-index: 3;
height: 100%;
display: grid;
grid-template-columns: var(--k110-design-bar-action-w) var(--k110-design-bar-action-w);
align-items: stretch;
pointer-events: auto;
}
#designPanel .k110-design-bar-actions::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background:
repeating-linear-gradient(90deg, rgba(0,229,255,0.58) 0 1px, transparent 1px 8px),
linear-gradient(90deg, rgba(0,229,255,0.74), rgba(0,229,255,0.24));
pointer-events: none;
}
#designPanel > .k110-panel-main,
#designPanel > .k110-panel-frame > .k110-panel-main {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
#designPanel > .k110-panel-main > .k110-box,
#designPanel > .k110-panel-frame > .k110-panel-main > .k110-box {
flex: 1 1 auto;
min-height: 0;
height: 100% !important;
overflow: hidden !important;
}
#designPanel > .k110-subnav {
flex: 0 0 auto;
}
#designPanel .k110-design-output-wrap {
--k110-design-output-h: clamp(142px, calc(var(--k110-design-output-display-size) + var(--k110-bar-h, 35px)), 214px);
--grid-accent: var(--k110-panel-primary);
--grid-bg: rgba(0,0,0,0.66);
--grid-line-alpha-x: 28%;
--grid-line-alpha-y: 24%;
--grid-glow-alpha: 14%;
--grid-shadow:
inset 0 -24px 48px rgba(0,229,255,0.14),
0 0 18px rgba(0,229,255,0.12);
--output-divider-color: rgba(0,229,255,0.62);
background: var(--grid-bg) !important;
height: var(--k110-design-output-h);
min-height: var(--k110-design-output-h);
flex: 0 0 var(--k110-design-output-h);
transition: box-shadow 0.22s ease;
}
#designPanel .k110-design-output-wrap.is-has-design-text {
box-shadow:
inset 0 -1px 0 rgba(0,229,255,0.62),
inset 0 -26px 54px rgba(0,229,255,0.16),
0 0 22px rgba(0,229,255,0.18),
0 0 48px rgba(0,229,255,0.08) !important;
}
#designPanel #designOutput {
display: grid !important;
align-content: center !important;
justify-content: start !important;
justify-items: start !important;
font-size: var(--k110-design-output-display-size);
font-family: "Noto Sans CJK KR", "Noto Sans", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
font-variant-emoji: text;
text-align: left;
scrollbar-width: thin;
scrollbar-color: rgba(0,229,255,0.76) transparent;
}
#designPanel #designOutput:not(:empty) {
align-content: center !important;
}
#designPanel #designBackspaceBtn,
#designPanel #designCopyBtn {
border-radius: 0 !important;
position: relative;
inset: auto !important;
width: auto;
height: auto;
min-height: 0;
padding: 0 clamp(4px, 0.7vw, 8px);
box-sizing: border-box;
border: 1px solid rgba(0,229,255,0.72);
border-top: 0;
border-bottom: 0;
border-right: 0;
overflow: hidden;
isolation: isolate;
display: flex !important;
align-items: center;
justify-content: center;
background:
repeating-linear-gradient(90deg, rgba(0,229,255,0.18) 0 1px, transparent 1px 12px),
repeating-linear-gradient(0deg, rgba(0,229,255,0.14) 0 1px, transparent 1px 12px),
rgba(0,0,0,0.68) !important;
background-size: 12px 12px, 12px 12px, auto;
transform: none !important;
animation: k110PatternGridFlow var(--k110-pattern-flow-speed) linear infinite;
}
#designPanel #designBackspaceBtn {
--k110-design-button-color: #FF3B30;
--k110-design-button-glow: rgba(255,59,48,0.72);
color: #FF3B30;
border-color: rgba(255,59,48,0.74);
font-size: clamp(14px, 1.6vw, 20px);
text-shadow: 0 0 8px rgba(255,59,48,0.86), 0 0 18px rgba(255,59,48,0.46);
box-shadow:
inset 0 0 18px rgba(255,59,48,0.22),
0 0 12px rgba(255,59,48,0.18) !important;
}
#designPanel #designCopyBtn {
--k110-design-button-color: #00E5FF;
--k110-design-button-glow: rgba(0,229,255,0.62);
color: #00E5FF;
border-color: rgba(0,229,255,0.72);
font-size: clamp(9px, 1vw, 12px);
text-shadow: 0 0 7px rgba(0,229,255,0.72);
box-shadow:
inset 0 0 16px rgba(0,229,255,0.16),
0 0 12px rgba(0,229,255,0.14) !important;
}
#designPanel #designBackspaceBtn.is-disabled,
#designPanel #designBackspaceBtn:disabled,
#designPanel #designCopyBtn.is-disabled,
#designPanel #designCopyBtn:disabled {
opacity: 0.38;
filter: saturate(0.35);
pointer-events: none;
}
#designPanel #designBackspaceBtn:before,
#designPanel #designCopyBtn:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #000;
box-shadow: inset 0 0 18px color-mix(in srgb, var(--k110-design-button-color) 28%, transparent);
transition: background-color 0.14s ease, inset 0.08s ease, box-shadow 0.14s ease, filter 0.12s ease;
}
#designPanel #designBackspaceBtn:after,
#designPanel #designCopyBtn:after {
content: "";
position: absolute;
inset: 3px;
z-index: -2;
pointer-events: none;
opacity: 0;
box-shadow: 0 0 22px var(--k110-design-button-glow);
}
#designPanel #designBackspaceBtn:hover:before,
#designPanel #designCopyBtn:hover:before {
background: var(--k110-design-button-color);
box-shadow:
inset 0 0 0 1px var(--k110-design-button-color),
0 0 18px var(--k110-design-button-glow),
0 0 36px color-mix(in srgb, var(--k110-design-button-color) 34%, transparent);
}
#designPanel #designBackspaceBtn:hover,
#designPanel #designCopyBtn:hover {
color: #000;
text-shadow: none;
}
#designPanel #designBackspaceBtn:active:before,
#designPanel #designCopyBtn:active:before {
inset: 5px;
filter: brightness(1.18);
}
#designPanel #designBackspaceBtn:active:after,
#designPanel #designCopyBtn:active:after {
animation: k110DesignButtonReleaseGlow 0.34s ease-out;
}
#designPanel .k110-design-body {
flex: 1 1 auto;
min-height: 0;
height: auto;
overflow: hidden;
margin-top: var(--k110-gap, 2px) !important;
padding: 0 !important;
background: rgba(0,0,0,0.75) !important;
grid-template-columns: minmax(0, 3fr) minmax(74px, 1fr) !important;
grid-template-rows: minmax(0, 1fr) clamp(78px, 10vw, 112px) !important;
gap: var(--k110-gap, 2px) !important;
}
#designPanel .k110-glyph-grid {
min-height: 0;
overflow: auto;
border-left-color: transparent !important;
border-right-color: transparent !important;
background: rgba(0,0,0,0.75) !important;
margin: 0 !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-group {
border-left-color: transparent !important;
border-right-color: transparent !important;
}
#designPanel .glyph-item {
border: 0;
box-shadow:
0 0 10px var(--glyph-glow-a, var(--glyph-accent-color, #00E5FF)),
0 0 24px color-mix(in srgb, var(--glyph-glow-a, var(--glyph-accent-color, #00E5FF)) 64%, transparent),
0 0 42px color-mix(in srgb, var(--glyph-glow-b, var(--glyph-accent-color, #00E5FF)) 36%, transparent) !important;
filter: saturate(1.42) brightness(1.08);
}
#designPanel .glyph-item.is-color-solid {
background: var(--glyph-accent-color, var(--glyph-color)) !important;
box-shadow:
0 0 12px var(--glyph-accent-color, #00E5FF),
0 0 30px color-mix(in srgb, var(--glyph-accent-color, #00E5FF) 68%, transparent),
0 0 56px color-mix(in srgb, var(--glyph-accent-color, #00E5FF) 28%, transparent) !important;
}
#designPanel .glyph-item.is-color-mixed {
background-size: 240% 240%, 230% 230%, 260% 260%, 360% 360%;
background-blend-mode: screen, screen, screen, normal;
animation: k110DesignGlyphOrganicRoll 5.8s ease-in-out infinite;
box-shadow:
0 0 12px var(--glyph-glow-a),
0 0 26px color-mix(in srgb, var(--glyph-glow-a) 62%, transparent),
0 0 16px var(--glyph-glow-b),
0 0 34px color-mix(in srgb, var(--glyph-glow-b) 48%, transparent),
0 0 18px var(--glyph-glow-c),
0 0 48px color-mix(in srgb, var(--glyph-glow-c) 36%, transparent) !important;
}
@media (min-width: 768px) {
#designPanel.k110-panel.is-active {
height: var(--k110-panel-max-h) !important;
max-height: var(--k110-panel-max-h) !important;
}
#designPanel.k110-panel.is-active > .k110-panel-main,
#designPanel.k110-panel.is-active > .k110-panel-frame > .k110-panel-main {
overflow: hidden !important;
padding-right: 0;
}
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel.k110-panel.is-active {
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
overflow: hidden !important;
margin-top: 0 !important;
}
#designPanel .k110-design-output-wrap {
--k110-design-output-display-size: clamp(72px, 22vw, 122px);
--k110-design-output-h: clamp(112px, calc(var(--k110-design-output-display-size) + var(--k110-bar-h, 35px)), 158px);
padding-right: clamp(16px, 2vw, 24px);
}
#designPanel #designBackspaceBtn,
#designPanel #designCopyBtn {
width: auto;
height: auto;
}
}
/* K110 FEATURE: DESIGN TOP COMMANDS */
#designPanel .k110-design-panel-bar-top {
--k110-bar-side-slot-w: var(--k110-design-bar-action-total-w);
--k110-bar-side-slot-gap: 0px;
--k110-bar-pattern-right: var(--k110-design-bar-action-total-w);
--k110-design-command-line: var(--k110-panel-line-w, 1px);
overflow: hidden;
}
#designPanel .k110-design-panel-bar-top .k110-panel-title {
padding-right: calc(var(--k110-design-bar-action-total-w) + var(--k110-design-action-gap)) !important;
}
#designPanel .k110-design-bar-actions {
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: auto !important;
width: var(--k110-design-bar-action-total-w) !important;
height: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: var(--k110-design-action-gap) !important;
padding: 0 !important;
box-sizing: border-box;
background: transparent;
z-index: 6;
}
#designPanel .k110-design-bar-actions::before {
content: none !important;
display: none !important;
}
#designPanel #designClearBtn,
#designPanel #designRegisterBtn,
#designPanel #designCopyBtn {
--btn-accent: var(--k110-panel-primary);
--btn-border: color-mix(in srgb, var(--k110-panel-primary) 72%, transparent);
--btn-bg: rgba(0,0,0,0.78);
--btn-fg: var(--k110-panel-primary);
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
--btn-min-h: 0px;
--k110-design-button-color: var(--k110-panel-primary);
--k110-design-button-glow: color-mix(in srgb, var(--k110-panel-primary) 62%, transparent);
position: relative !important;
inset: auto !important;
display: inline-flex !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 clamp(4px, 0.45vw, 9px) !important;
border: var(--k110-design-command-line) solid var(--btn-border) !important;
border-radius: 0 !important;
background:
linear-gradient(0deg, color-mix(in srgb, var(--k110-panel-primary) 12%, transparent), transparent 72%),
rgba(0,0,0,0.78) !important;
color: var(--k110-panel-primary) !important;
box-shadow:
inset 0 -10px 22px color-mix(in srgb, var(--k110-panel-primary) 10%, transparent),
0 0 10px color-mix(in srgb, var(--k110-panel-primary) 12%, transparent) !important;
font-size: var(--k110-type-caption);
font-weight: 900;
line-height: 1;
text-shadow: 0 0 7px color-mix(in srgb, var(--k110-panel-primary) 62%, transparent) !important;
transform: none !important;
animation: none !important;
overflow: hidden;
}
#designPanel #designClearBtn .k110-front-text,
#designPanel #designRegisterBtn .k110-front-text,
#designPanel #designCopyBtn .k110-front-text,
#designPanel #designCopyBtn .k110-copy-icon {
position: relative;
z-index: 4;
color: currentColor !important;
-webkit-text-fill-color: currentColor !important;
background: none !important;
background-image: none !important;
filter: none !important;
}
#designPanel #designClearBtn:before,
#designPanel #designRegisterBtn:before,
#designPanel #designCopyBtn:before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: #000;
box-shadow: inset 0 -16px 32px color-mix(in srgb, var(--k110-panel-primary) 12%, transparent);
transition: background-color 0.14s ease, inset 0.08s ease, box-shadow 0.14s ease, filter 0.12s ease;
}
#designPanel #designClearBtn:after,
#designPanel #designRegisterBtn:after,
#designPanel #designCopyBtn:after {
content: "";
position: absolute;
inset: 3px;
z-index: 0;
pointer-events: none;
opacity: 0;
box-shadow: 0 0 22px color-mix(in srgb, var(--k110-panel-primary) 64%, transparent);
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):hover:before,
#designPanel #designRegisterBtn:not(:disabled):not(.is-disabled):hover:before,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover:before {
background: var(--k110-panel-primary);
box-shadow:
inset 0 0 0 var(--k110-panel-line-w) var(--k110-panel-primary),
0 0 18px color-mix(in srgb, var(--k110-panel-primary) 52%, transparent),
0 0 36px color-mix(in srgb, var(--k110-panel-primary) 30%, transparent);
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):hover,
#designPanel #designRegisterBtn:not(:disabled):not(.is-disabled):hover,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover {
color: #000 !important;
text-shadow: none !important;
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):hover .k110-front-text,
#designPanel #designRegisterBtn:not(:disabled):not(.is-disabled):hover .k110-front-text,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover .k110-front-text,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover .k110-copy-icon {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
background: none !important;
background-image: none !important;
text-shadow: none !important;
filter: none !important;
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):active:before,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):active:before {
inset: 5px;
filter: brightness(1.18);
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):active:after,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):active:after {
animation: k110DesignButtonReleaseGlow 0.34s ease-out;
}
#designPanel #designClearBtn.is-disabled,
#designPanel #designClearBtn:disabled,
#designPanel #designRegisterBtn.is-disabled,
#designPanel #designRegisterBtn:disabled,
#designPanel #designCopyBtn.is-disabled,
#designPanel #designCopyBtn:disabled {
--btn-disabled-color: color-mix(in srgb, var(--k110-panel-primary) 46%, transparent);
opacity: 1 !important;
filter: none !important;
pointer-events: auto;
}
#designPanel #designClearBtn.is-disabled .k110-front-text,
#designPanel #designClearBtn:disabled .k110-front-text,
#designPanel #designRegisterBtn.is-disabled .k110-front-text,
#designPanel #designRegisterBtn:disabled .k110-front-text,
#designPanel #designCopyBtn.is-disabled .k110-front-text,
#designPanel #designCopyBtn:disabled .k110-front-text,
#designPanel #designCopyBtn.is-disabled .k110-copy-icon,
#designPanel #designCopyBtn:disabled .k110-copy-icon {
color: var(--btn-disabled-color) !important;
-webkit-text-fill-color: var(--btn-disabled-color) !important;
background: none !important;
background-image: none !important;
text-shadow: none !important;
filter: none !important;
}
#designPanel .k110-design-output-wrap {
padding-right: 0 !important;
overflow: visible !important;
}
#designPanel #designOutput,
#designPanel #designIdleMarquee {
max-width: 100%;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner {
--btn-accent: var(--k110-panel-primary);
--btn-border: transparent;
--btn-bg: transparent;
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
--k110-design-backspace-w: clamp(34px, calc(var(--k110-design-output-h) / 5), 86px);
--k110-design-backspace-line: 1px;
--k110-design-backspace-line-half: 0.5px;
--k110-design-backspace-line-half: 0.5px;
--k110-design-backspace-arrow-w: 28%;
position: absolute !important;
right: var(--k110-gap, 2px) !important;
bottom: var(--k110-gap, 2px) !important;
width: var(--k110-design-backspace-w) !important;
height: var(--k110-design-backspace-w) !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--k110-panel-primary) !important;
overflow: visible !important;
transform: none !important;
z-index: 12;
animation: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:after {
content: none !important;
display: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon {
position: relative;
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
color: currentColor;
background:
linear-gradient(currentColor, currentColor) var(--k110-design-backspace-arrow-w) 0 / calc(100% - var(--k110-design-backspace-arrow-w)) var(--k110-design-backspace-line) no-repeat,
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-backspace-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) var(--k110-design-backspace-arrow-w) 100% / calc(100% - var(--k110-design-backspace-arrow-w)) var(--k110-design-backspace-line) no-repeat,
linear-gradient(45deg, transparent calc(50% - var(--k110-design-backspace-line-half)), currentColor calc(50% - var(--k110-design-backspace-line-half)) calc(50% + var(--k110-design-backspace-line-half)), transparent calc(50% + var(--k110-design-backspace-line-half))) 52% 28% / 34% 44% no-repeat,
linear-gradient(-45deg, transparent calc(50% - var(--k110-design-backspace-line-half)), currentColor calc(50% - var(--k110-design-backspace-line-half)) calc(50% + var(--k110-design-backspace-line-half)), transparent calc(50% + var(--k110-design-backspace-line-half))) 52% 28% / 34% 44% no-repeat,
#000;
clip-path: none;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--k110-panel-primary) 62%, transparent));
transition: background-color 0.14s ease, color 0.14s ease, filter 0.14s ease, transform 0.1s ease;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 40%;
height: var(--k110-design-backspace-line);
background: currentColor;
transform-origin: left center;
pointer-events: none;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::before {
transform: rotate(-45deg);
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::after {
transform: rotate(45deg);
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-icon {
color: #000;
background:
linear-gradient(#000, #000) var(--k110-design-backspace-arrow-w) 0 / calc(100% - var(--k110-design-backspace-arrow-w)) var(--k110-design-backspace-line) no-repeat,
linear-gradient(#000, #000) 100% 0 / var(--k110-design-backspace-line) 100% no-repeat,
linear-gradient(#000, #000) var(--k110-design-backspace-arrow-w) 100% / calc(100% - var(--k110-design-backspace-arrow-w)) var(--k110-design-backspace-line) no-repeat,
linear-gradient(45deg, transparent calc(50% - var(--k110-design-backspace-line-half)), #000 calc(50% - var(--k110-design-backspace-line-half)) calc(50% + var(--k110-design-backspace-line-half)), transparent calc(50% + var(--k110-design-backspace-line-half))) 52% 28% / 34% 44% no-repeat,
linear-gradient(-45deg, transparent calc(50% - var(--k110-design-backspace-line-half)), #000 calc(50% - var(--k110-design-backspace-line-half)) calc(50% + var(--k110-design-backspace-line-half)), transparent calc(50% + var(--k110-design-backspace-line-half))) 52% 28% / 34% 44% no-repeat,
var(--k110-panel-primary);
filter:
drop-shadow(0 0 8px color-mix(in srgb, var(--k110-panel-primary) 74%, transparent))
drop-shadow(0 0 16px color-mix(in srgb, var(--k110-panel-primary) 34%, transparent));
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-icon::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-icon::after {
background: #000;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-icon {
transform: scale(0.9);
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-disabled,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:disabled {
--btn-disabled-color: color-mix(in srgb, var(--k110-panel-primary) 46%, transparent);
color: var(--btn-disabled-color) !important;
pointer-events: auto;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-disabled-x-overlay {
display: none !important;
}
.k110-design-clear-confirm {
--k110-popup-accent: var(--k110-color-cyan);
position: fixed;
inset: 0;
z-index: 10020;
display: grid;
place-items: center;
padding: var(--k110-edge-x, 24px);
background: rgba(0,0,0,0.78);
}
.k110-design-clear-confirm__box {
width: min(420px, calc(100vw - (var(--k110-edge-x, 24px) * 2)));
border: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 82%, transparent);
background: rgba(0,0,0,0.86);
color: var(--k110-popup-accent);
box-shadow:
0 0 0 var(--k110-line-1) color-mix(in srgb, var(--k110-popup-accent) 38%, transparent),
0 0 24px color-mix(in srgb, var(--k110-popup-accent) 34%, transparent),
0 0 58px color-mix(in srgb, var(--k110-popup-accent) 14%, transparent);
}
.k110-design-clear-confirm__bar {
position: relative;
height: var(--k110-bar-h);
border-bottom: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 58%, transparent);
overflow: hidden;
display: flex;
align-items: center;
padding: 0 var(--k110-bar-text-inset, 14px);
font-size: var(--k110-bar-font-size, var(--k110-type-caption));
font-weight: 900;
}
.k110-design-clear-confirm__bar::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--k110-popup-accent) 28%, transparent) 0.75px, transparent 1.08px);
background-size: var(--k110-bar-dot-size, 5px 5px);
animation: k110PatternDotFlow var(--k110-pattern-flow-speed) linear infinite;
opacity: 0.92;
}
.k110-design-clear-confirm__bar span {
position: relative;
z-index: 2;
}
.k110-design-clear-confirm__message {
padding: calc(var(--k110-gap) * 8) var(--k110-bar-text-inset, 14px);
font-size: var(--k110-type-body);
font-weight: 900;
text-align: center;
}
.k110-design-clear-confirm__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--k110-gap);
padding: var(--k110-gap);
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 48%, transparent);
}
.k110-design-clear-confirm__actions .k110-c-button {
--btn-accent: var(--k110-popup-accent);
--btn-border: color-mix(in srgb, var(--k110-popup-accent) 72%, transparent);
--btn-bg: rgba(0,0,0,0.78);
--btn-fg: var(--k110-popup-accent);
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
border-radius: 0 !important;
}
.k110-design-clear-confirm__actions .k110-design-clear-confirm__no {
--btn-accent: var(--k110-color-red);
--k110-popup-accent: var(--k110-color-red);
}
.k110-discover-existing-list {
border-top-color: rgba(255,238,0,0.54) !important;
border-bottom-color: rgba(255,238,0,0.48) !important;
scrollbar-color: #FFEE00 transparent;
}
.k110-discover-existing-list.is-ready {
padding-right: 0 !important;
}
.k110-discover-existing-row {
--discover-status-w: 3.8em;
--discover-votes-w: calc((var(--k110-discover-vote-size) * 2) + var(--k110-button-cluster-gap));
grid-template-columns: minmax(0, 1.3fr) minmax(var(--discover-status-w), max-content) minmax(0, 0.9fr) var(--discover-votes-w);
column-gap: var(--k110-button-cluster-gap);
row-gap: 0;
height: var(--k110-discover-row-h);
min-height: var(--k110-discover-row-h);
padding: var(--k110-discover-row-pad-y) 0 var(--k110-discover-row-pad-y) var(--k110-panel-content-x);
border-top: 0 !important;
align-items: center;
}
.k110-discover-existing-row:first-child {
border-top: 0 !important;
}
.k110-discover-existing-korean {
min-width: 0;
padding-right: clamp(8px, 1vw, 14px);
}
.k110-discover-status-word {
justify-self: end;
width: max-content;
white-space: nowrap;
}
.k110-discover-existing-user {
min-width: 0;
max-width: 100%;
justify-self: stretch;
}
.k110-discover-existing-votes {
width: var(--discover-votes-w);
margin-left: 0 !important;
gap: var(--k110-button-cluster-gap);
justify-self: end;
justify-content: flex-end;
}
.k110-discover-vote {
--red-action-size: var(--k110-discover-vote-size);
--red-action-overlap: 0px;
--red-action-icon-font-size: calc(var(--red-action-size) * 0.72);
position: relative;
top: auto;
right: auto;
flex: 0 0 var(--k110-discover-vote-size);
width: var(--k110-discover-vote-size);
height: var(--k110-discover-vote-size);
min-width: var(--k110-discover-vote-size);
min-height: var(--k110-discover-vote-size);
}
.k110-discover-vote.k110-vote-up {
--red-action-color: var(--k110-color-green);
}
.k110-discover-vote.k110-vote-up::before {
content: "\1F44D\FE0E";
}
.k110-discover-vote.k110-vote-down {
--red-action-color: var(--k110-color-red);
}
.k110-discover-vote.k110-vote-down::before {
content: "\1F44E\FE0E";
}
.k110-discover-bottom.has-register .k110-discover-register {
--k110-breathe-speed: 3.1s;
--k110-command-color: #FFEE00;
--k110-command-glow-soft: rgba(255,238,0,0.18);
--k110-command-glow-strong: rgba(255,238,0,0.34);
animation: none;
}
.k110-discover-bottom.has-register .k110-discover-register::before {
--k110-glow-dim:
inset 0 0 0 1px rgba(255,238,0,0.64),
inset 0 -16px 26px rgba(255,238,0,0.18),
inset 0 -42px 46px rgba(255,238,0,0.08),
0 0 14px rgba(255,238,0,0.22);
--k110-glow-bright:
inset 0 0 0 1px rgba(255,238,0,0.96),
inset 0 -24px 34px rgba(255,238,0,0.34),
inset 0 -58px 62px rgba(255,238,0,0.16),
0 0 32px rgba(255,238,0,0.52);
--k110-glow-dim-filter: 0.92;
--k110-glow-bright-filter: 1.16;
border-color: rgba(255,238,0,1);
box-shadow:
inset 0 0 0 1px rgba(255,238,0,0.58),
0 0 22px rgba(255,238,0,0.68),
0 0 58px rgba(255,238,0,0.28),
0 0 92px rgba(255,238,0,0.12);
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
.k110-discover-bottom.has-register .k110-discover-register::after {
background:
linear-gradient(0deg, rgba(255,255,255,0.92) 0%, rgba(255,238,0,0.98) 24%, rgba(255,238,0,0.84) 100%);
box-shadow:
inset 0 0 32px rgba(255,255,255,0.28),
inset 0 -22px 32px rgba(255,255,255,0.24),
0 0 32px rgba(255,238,0,0.34);
}
@keyframes k110-discover-register-urgent-breathe {
0%, 100% {
filter: brightness(1) drop-shadow(0 0 8px rgba(255,238,0,0.2));
}
50% {
filter: brightness(1.28) drop-shadow(0 0 26px rgba(255,238,0,0.62));
}
}
@media (hover: none) {
.k110-discover-next:hover {
color: rgba(255,238,0,0.74);
text-shadow: 0 0 6px rgba(255,238,0,0.22);
filter: none;
}
.k110-discover-next:hover::after {
background:
linear-gradient(0deg, var(--k110-command-glow-soft) 0%, rgba(0,0,0,0) 64%),
rgba(0,0,0,0.86);
box-shadow: none;
}
.k110-discover-bottom.has-register .k110-discover-next:hover {
color: rgba(255,238,0,0.48);
filter: saturate(0.75);
}
}
#designPanel .k110-glyph-grid {
--k110-glyph-scroll-gutter: clamp(18px, 2.2vw, 30px);
--k110-design-glyph-button-h: 64px;
--k110-design-glyph-button-r: 8px;
--k110-design-glyph-unit-w: 42px;
--k110-design-glyph-button-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-head-gap: calc(var(--k110-gap, 2px) * 6);
--k110-design-glyph-group-gap: calc(var(--k110-gap, 2px) * 4);
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
column-gap: calc(var(--k110-gap, 2px) * 8);
row-gap: var(--k110-design-glyph-group-gap);
padding-top: calc(var(--k110-gap, 2px) * 3) !important;
padding-right: var(--k110-glyph-scroll-gutter) !important;
padding-bottom: 38px !important;
padding-left: 0 !important;
margin-right: calc(var(--k110-glyph-scroll-gutter) * -1) !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
box-shadow: none !important;
overflow-y: auto !important;
overflow-x: visible !important;
scroll-padding-top: calc(var(--k110-gap, 2px) * 3) !important;
scroll-padding-bottom: 38px !important;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(0,229,255,0.78) transparent;
}
#designPanel .k110-glyph-grid::-webkit-scrollbar {
width: 4px;
}
#designPanel .k110-glyph-grid::-webkit-scrollbar-track {
background: transparent !important;
border-radius: 0;
box-shadow: none;
}
#designPanel .k110-glyph-grid::-webkit-scrollbar-thumb {
min-height: 34px;
border-radius: 999px;
background: rgba(0,229,255,0.82) !important;
box-shadow:
0 0 8px rgba(0,229,255,0.58),
0 0 18px rgba(0,229,255,0.22);
}
#designPanel .k110-glyph-grid::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
#designPanel .glyph-group {
--k110-glyph-group-head-w: var(--k110-design-glyph-button-h);
--k110-glyph-group-head-gap: var(--k110-design-glyph-head-gap);
width: 100%;
min-width: 0;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
overflow: visible;
}
#designPanel .glyph-group:last-child {
margin-bottom: 0;
}
#designPanel .glyph-group:first-child {
margin-top: 0;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
--glyph-bracket-line: var(--k110-panel-line-w, 1px);
--glyph-bracket-arm: calc(var(--k110-gap, 2px) * 3);
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1);
width: var(--k110-design-glyph-button-h);
height: var(--k110-design-glyph-button-h);
min-height: var(--k110-design-glyph-button-h);
align-self: flex-start;
}
#designPanel .glyph-group-label.is-glyph-color-roll-head::before,
#designPanel .k110-glyph-group-head.is-glyph-color-roll-head::before {
background:
var(--k110-neon-roll-gradient) left top / var(--glyph-bracket-line) 100% no-repeat,
var(--k110-neon-roll-gradient) right top / var(--glyph-bracket-line) 100% no-repeat,
var(--k110-neon-roll-gradient) left top / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat,
var(--k110-neon-roll-gradient) left bottom / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat,
var(--k110-neon-roll-gradient) right top / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat,
var(--k110-neon-roll-gradient) right bottom / var(--glyph-bracket-arm) var(--glyph-bracket-line) no-repeat !important;
background-size:
620% 100%,
620% 100%,
620% 100%,
620% 100%,
620% 100%,
620% 100% !important;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration) linear infinite;
}
#designPanel .glyph-group-label-pill,
#designPanel .k110-glyph-group-head-glyph {
font-size: var(--k110-type-body);
}
#designPanel .glyph-group-count,
#designPanel .k110-glyph-group-head-count {
font-size: var(--k110-type-micro);
}
#designPanel .glyph-scroll {
gap: var(--k110-design-glyph-button-gap);
row-gap: var(--k110-design-glyph-button-gap);
padding-top: 14px;
padding-right: 28px;
padding-bottom: 22px;
padding-left: 4px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
scrollbar-color: rgba(0,229,255,0.7) transparent;
overflow-y: visible !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y !important;
}
#designPanel .glyph-scroll.is-smart-fit {
flex-wrap: wrap;
overflow: visible !important;
scroll-snap-type: none;
cursor: default;
user-select: auto;
touch-action: pan-y;
}
#designPanel .glyph-scroll.is-smart-scroll {
flex-wrap: nowrap;
overflow-x: auto !important;
overflow-y: visible !important;
touch-action: pan-x pan-y !important;
}
#designPanel .glyph-scroll.is-smart-fit::-webkit-scrollbar {
display: none;
}
#designPanel .k110-glyph-grid.is-smart-fit {
scrollbar-width: none;
}
#designPanel .k110-glyph-grid.is-smart-fit::-webkit-scrollbar {
display: none;
}
#designPanel .k110-glyph-grid.is-smart-scroll {
scrollbar-width: thin;
}
#designPanel .glyph-scroll::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none;
}
#designPanel .glyph-group.has-left.has-right .glyph-scroll,
#designPanel .glyph-group.has-left:not(.has-right) .glyph-scroll,
#designPanel .glyph-group.has-right:not(.has-left) .glyph-scroll {
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-item {
--glyph-button-color: var(--glyph-accent-color, var(--glyph-color));
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1);
flex: 0 0 auto;
width: var(--glyph-button-w, max(var(--k110-design-glyph-button-h), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w))));
min-width: var(--glyph-button-w, max(var(--k110-design-glyph-button-h), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w))));
max-width: none;
height: var(--k110-design-glyph-button-h);
min-height: var(--k110-design-glyph-button-h);
border: 0;
border-radius: var(--k110-design-glyph-button-r);
background: var(--glyph-button-color);
color: #000;
overflow: visible;
padding: 6px 11px;
box-shadow:
0 0 10px color-mix(in srgb, var(--glyph-button-color) 72%, transparent),
0 0 24px color-mix(in srgb, var(--glyph-button-color) 48%, transparent),
0 0 44px color-mix(in srgb, var(--glyph-button-color) 22%, transparent);
filter: saturate(1.38) brightness(1.08);
}
#designPanel .glyph-item.is-wide {
flex-basis: auto;
width: var(--glyph-button-w, max(var(--k110-design-glyph-button-h), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w))));
min-width: var(--glyph-button-w, max(var(--k110-design-glyph-button-h), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w))));
max-width: none;
padding-left: 12px;
padding-right: 12px;
}
#designPanel .glyph-item.is-square-glyph {
width: var(--k110-design-glyph-button-h);
min-width: var(--k110-design-glyph-button-h);
padding-left: 6px;
padding-right: 6px;
}
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap {
gap: var(--k110-design-glyph-button-gap);
row-gap: var(--k110-design-glyph-button-gap);
padding-top: 0;
padding-bottom: 18px;
}
#designPanel .glyph-item.is-color-solid {
--glyph-button-color: var(--glyph-glow-a, var(--glyph-accent-color, var(--glyph-color)));
background-image: var(--k110-neon-roll-gradient) !important;
background-size: 620% 100% !important;
background-color: var(--glyph-button-color) !important;
box-shadow:
0 0 10px color-mix(in srgb, var(--glyph-button-color) 78%, transparent),
0 0 25px color-mix(in srgb, var(--glyph-button-color) 54%, transparent),
0 0 46px color-mix(in srgb, var(--glyph-button-color) 26%, transparent);
animation: k110FxNeonRollFill var(--k110-neon-roll-duration) linear infinite;
}
#designPanel .glyph-item.is-color-mixed {
background:
radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--k110-neon-roll-c1) 88%, white 12%) 0 14%, transparent 43%),
radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--k110-neon-roll-c2) 88%, white 12%) 0 16%, transparent 46%),
radial-gradient(circle at 50% 86%, color-mix(in srgb, var(--k110-neon-roll-c3) 86%, white 14%) 0 18%, transparent 50%),
var(--k110-neon-roll-gradient) !important;
background-size: 240% 240%, 260% 260%, 230% 230%, 420% 420%;
box-shadow:
0 0 10px color-mix(in srgb, var(--glyph-glow-a) 76%, transparent),
0 0 18px color-mix(in srgb, var(--glyph-glow-b) 66%, transparent),
0 0 28px color-mix(in srgb, var(--glyph-glow-c) 56%, transparent),
0 0 48px color-mix(in srgb, var(--glyph-glow-a) 24%, transparent);
animation: k110DesignGlyphOrganicRoll 6.2s ease-in-out infinite;
}
#designPanel .glyph-item.is-color-rolling {
background:
radial-gradient(circle at 20% 22%, var(--k110-neon-roll-c1) 0 15%, transparent 44%),
radial-gradient(circle at 80% 26%, var(--k110-neon-roll-c2) 0 16%, transparent 45%),
radial-gradient(circle at 52% 84%, var(--k110-neon-roll-c3) 0 18%, transparent 50%),
var(--k110-neon-roll-gradient) !important;
background-size: 240% 240%, 260% 260%, 230% 230%, 420% 420%;
box-shadow:
0 0 10px color-mix(in srgb, var(--k110-neon-roll-c1) 72%, transparent),
0 0 18px color-mix(in srgb, var(--k110-neon-roll-c2) 62%, transparent),
0 0 28px color-mix(in srgb, var(--k110-neon-roll-c3) 44%, transparent),
0 0 48px color-mix(in srgb, var(--k110-neon-roll-c4) 22%, transparent);
animation: k110DesignGlyphOrganicRoll var(--k110-neon-roll-duration) ease-in-out infinite;
}
@keyframes k110DesignGlyphOrganicRoll {
0% {
background-position: 0% 24%, 86% 18%, 44% 92%, 0% 50%;
filter: saturate(1.34) brightness(1.07);
}
45% {
background-position: 88% 42%, 18% 68%, 78% 18%, 64% 50%;
filter: saturate(1.52) brightness(1.14);
}
100% {
background-position: 0% 24%, 86% 18%, 44% 92%, 100% 50%;
filter: saturate(1.34) brightness(1.07);
}
}
#designPanel #designStatus {
border-radius: 0 !important;
border: var(--k110-panel-line-w, 1px) solid color-mix(in srgb, var(--k110-panel-primary) 68%, transparent) !important;
background-color: rgba(0,0,0,0.72) !important;
background-image: repeating-linear-gradient(115deg, transparent 0 11px, color-mix(in srgb, var(--k110-panel-primary) 26%, transparent) 11px 12px, transparent 12px 24px) !important;
background-size: 24px 24px !important;
background-repeat: repeat !important;
background-position: 0 0;
animation: none !important;
box-shadow: inset 0 -18px 34px color-mix(in srgb, var(--k110-panel-primary) 10%, transparent) !important;
color: var(--k110-panel-primary) !important;
font-size: var(--k110-type-caption) !important;
line-height: 1.22 !important;
text-shadow: 0 0 6px color-mix(in srgb, var(--k110-panel-primary) 32%, transparent) !important;
}
#designPanel #resetBtn.k110-c-red-action {
--red-action-size: clamp(22px, 2.6vw, 30px);
--red-action-overlap: 0px;
--red-action-icon-font-size: calc(var(--red-action-size) * 0.56);
position: absolute;
top: var(--k110-gap, 2px);
right: var(--k110-gap, 2px);
width: var(--red-action-size);
height: var(--red-action-size);
min-width: var(--red-action-size);
min-height: var(--red-action-size);
max-width: var(--red-action-size);
max-height: var(--red-action-size);
border-radius: 0;
border: var(--k110-button-line-w, 1px) solid color-mix(in srgb, var(--red-action-color) 88%, white);
font-size: 0;
z-index: 5;
}
#designPanel #resetBtn.k110-c-red-action::before {
content: "\2715\FE0E";
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel .k110-glyph-grid {
--k110-design-glyph-button-h: clamp(48px, 15vw, 64px);
--k110-design-glyph-unit-w: calc(var(--k110-design-glyph-button-h) * 0.7);
--k110-glyph-scroll-gutter: 18px;
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
row-gap: calc(var(--k110-gap, 2px) * 4);
padding-top: calc(var(--k110-gap, 2px) * 3) !important;
padding-bottom: 32px !important;
scroll-padding-top: calc(var(--k110-gap, 2px) * 3) !important;
}
#designPanel .glyph-scroll {
padding-top: 12px;
padding-right: 20px;
padding-bottom: 20px;
}
}
#designPanel .k110-design-body {
margin-top: var(--k110-gap, 2px) !important;
gap: var(--k110-gap, 2px) !important;
background: transparent !important;
overflow: visible !important;
}
#designPanel .k110-glyph-grid,
#designPanel #glyphGrid {
border-left-color: transparent !important;
border-right-color: transparent !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: rgba(0,0,0,0.75) !important;
overflow-x: visible !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-group {
border-left-color: transparent !important;
border-right-color: transparent !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
outline: 0 !important;
}
#designPanel {
/* 상단 입력 바(#charInput) 높이 — .k110-input-col 이 .k110-box 최상단으로 승격됨 */
--k110-design-top-input-h: clamp(78px, 9.4vh, 108px);
/* 하단 상태 스트립(#designStatus 단독) 행 높이 */
--k110-design-bottom-slot-h: clamp(48px, 6.2vh, 66px);
}
#designPanel .k110-design-body {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) var(--k110-design-bottom-slot-h) !important;
gap: var(--k110-gap, 2px) !important;
min-height: 0 !important;
height: auto !important;
flex: 1 1 auto !important;
overflow: hidden !important;
background: transparent !important;
}
#designPanel .k110-design-body > div:last-child {
display: contents !important;
}
#designPanel #glyphGrid {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
}
#designPanel #designStatus {
grid-column: 1 !important;
grid-row: 2 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 calc(var(--k110-panel-content-x, 16px) * 0.7) !important;
overflow: hidden !important;
border: var(--k110-panel-line-w, 1px) solid color-mix(in srgb, var(--k110-panel-primary) 72%, transparent) !important;
background-color: rgba(0,0,0,0.74) !important;
background-image: repeating-linear-gradient(115deg, transparent 0 11px, color-mix(in srgb, var(--k110-panel-primary) 26%, transparent) 11px 12px, transparent 12px 24px) !important;
background-size: 24px 24px !important;
background-repeat: repeat !important;
background-position: 0 0 !important;
animation: none !important;
}
#designPanel .k110-input-col {
position: relative !important;
flex: 0 0 auto !important;
width: 100% !important;
height: var(--k110-design-top-input-h) !important;
min-height: 0 !important;
display: block !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 0 var(--k110-gap, 2px) 0 !important;
background: transparent !important;
border: 0 !important;
}
#designPanel #charInput {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
}
#designPanel .glyph-group.has-left:before,
#designPanel .glyph-group.has-right:after {
content: none !important;
display: none !important;
}
#designPanel .glyph-group {
display: grid !important;
align-items: center !important;
grid-template-columns: var(--k110-design-glyph-button-h) minmax(0, 1fr) !important;
column-gap: var(--k110-design-glyph-head-gap) !important;
overflow: visible !important;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
align-self: center !important;
justify-self: stretch !important;
box-sizing: border-box !important;
}
#designPanel .glyph-scroll {
align-self: center !important;
min-height: calc(var(--k110-design-glyph-button-h) + 32px) !important;
align-items: center !important;
padding-top: 16px !important;
padding-right: 34px !important;
padding-bottom: 22px !important;
padding-left: calc(var(--k110-gap, 2px) * 2) !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap {
min-height: auto !important;
padding-top: 12px !important;
padding-bottom: 22px !important;
overflow: visible !important;
}
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-wrap.is-smart-scroll,
#designPanel .glyph-scroll.is-grid-wrap.is-smart-scroll {
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
touch-action: pan-x pan-y !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
scroll-snap-type: x proximity !important;
cursor: grab !important;
user-select: none !important;
}
#designPanel .glyph-scroll.is-smart-scroll.is-dragging {
cursor: grabbing !important;
scroll-behavior: auto !important;
}
#designPanel .glyph-item {
align-self: center !important;
overflow: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel {
--k110-design-top-input-h: clamp(66px, 15vw, 92px);
--k110-design-bottom-slot-h: clamp(42px, 11vw, 56px);
--k110-design-glyph-button-h: clamp(46px, 13.2vw, 58px);
--k110-design-glyph-unit-w: calc(var(--k110-design-glyph-button-h) * 0.72);
--k110-design-glyph-head-gap: calc(var(--k110-gap, 2px) * 5);
--k110-design-glyph-button-gap: calc(var(--k110-gap, 2px) * 3);
}
#designPanel .k110-glyph-grid {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: calc(var(--k110-gap, 2px) * 5) !important;
padding-right: 18px !important;
margin-right: -18px !important;
}
#designPanel .glyph-scroll {
padding-top: 12px !important;
padding-right: 24px !important;
padding-bottom: 20px !important;
padding-left: calc(var(--k110-gap, 2px) * 2) !important;
}
#designPanel #designStatus {
font-size: var(--k110-type-micro) !important;
padding-left: calc(var(--k110-panel-content-x, 14px) * 0.55) !important;
padding-right: calc(var(--k110-panel-content-x, 14px) * 0.55) !important;
}
}
#reviewCard .k110-review-category {
grid-template-columns: minmax(0, 1fr);
gap: 0;
height: var(--k110-bar-h, calc(52px * 2 / 3));
min-height: var(--k110-bar-h, calc(52px * 2 / 3));
padding: 0 !important;
}
#reviewCard .k110-review-category-title {
--k110-bar-title-glow: color-mix(in srgb, var(--k110-panel-primary, currentColor) 62%, transparent);
--k110-bar-title-inset: var(--k110-bar-text-inset, var(--k110-panel-content-x, 14px));
display: inline-flex;
align-items: center;
gap: 0;
width: 100%;
height: 100%;
padding: 0 var(--k110-bar-title-inset) !important;
box-sizing: border-box;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--k110-panel-primary);
text-shadow: 0 0 9px var(--k110-bar-title-glow);
}
#reviewCard .k110-review-path-base {
flex: 0 0 auto;
min-width: 0;
}
#reviewCard .k110-review-path-filter-cluster {
--capsule-accent: var(--k110-panel-primary);
--capsule-switch-accent: var(--k110-panel-primary);
flex: 0 1 auto;
min-width: 0;
}
.k110-review-path-filter {
position: relative;
display: inline-flex;
align-items: center;
min-height: var(--k110-capsule-button-min-h);
margin-left: 1px;
padding: 0 var(--k110-capsule-button-pad-x);
border: var(--k110-capsule-line-w) solid rgba(180,92,255,0.78);
border-radius: var(--k110-radius-pill);
background: #000;
color: #B45CFF;
font: inherit;
font-size: var(--k110-type-micro);
font-weight: 900;
line-height: 1;
white-space: nowrap;
cursor: pointer;
box-shadow:
inset 0 0 10px rgba(180,92,255,0.1),
0 0 10px rgba(180,92,255,0.12);
text-shadow: 0 0 7px rgba(180,92,255,0.38);
transition: width 0.24s cubic-bezier(0.18, 0.86, 0.22, 1), background 0.18s ease, color 0.18s ease, padding 0.18s ease, box-shadow 0.18s ease;
}
.k110-review-path-filter.is-typing {
animation: k110ReviewPathRetype 0.3s steps(12, end);
}
#reviewCard .k110-review-path-label {
overflow: hidden;
padding-block: 1px;
}
.k110-review-path-filter.is-locked {
gap: 6px;
background: #B45CFF;
color: #000;
border-color: #B45CFF;
text-shadow: none;
box-shadow:
inset 0 0 18px rgba(255,255,255,0.18),
0 0 18px rgba(180,92,255,0.42);
}
.k110-review-path-filter .k110-capsule-lock {
flex: 0 0 auto;
--k110-capsule-lock-color: currentColor;
filter: none;
}
.k110-review-path-filter.is-locked .k110-capsule-lock {
--k110-capsule-lock-color: #000;
}
.k110-review-path-filter.is-locked .k110-capsule-lock {
display: block;
transform: scale(0.2);
opacity: 0;
animation: k110ReviewLockSnap 0.24s cubic-bezier(0.18, 0.9, 0.2, 1.2) forwards;
}
@keyframes k110ReviewLockSnap {
0% { transform: scale(0.2); opacity: 0; }
58% { transform: scale(1.18); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes k110ReviewPathRetype {
0% { clip-path: inset(0 100% 0 0); opacity: 0.2; }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
#reviewCard.is-updown .k110-review-compare {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#reviewCard.is-updown.is-stacked-review .k110-review-compare {
grid-template-columns: 1fr;
}
#reviewCard.is-updown.is-stacked-review .k110-review-compare::before {
opacity: 0;
transform: translateX(-0.5px) scaleY(0);
}
#reviewCard.is-updown.is-stacked-review .k110-review-compare::after {
display: none;
opacity: 0;
transform: scaleX(0);
}
#reviewCard.is-updown.is-stacked-review .k110-review-compare > div:nth-child(2) {
border-top: var(--k110-panel-line-w, 1px) solid rgba(180,92,255,0.42);
}
#reviewCard.is-updown .k110-review-label {
--k110-review-label-h: var(--k110-bar-h, calc(52px * 2 / 3));
height: var(--k110-review-label-h);
min-height: var(--k110-review-label-h);
display: flex;
align-items: center;
padding: 0 12px;
}
#reviewCard .k110-review-label-alien {
position: relative;
--k110-review-label-h: var(--k110-bar-h, calc(52px * 2 / 3));
padding-right: calc(var(--k110-review-label-h) + 10px);
}
#reviewCard.is-updown #reviewAlien {
padding-bottom: 18px;
}
#reviewCard.is-updown .k110-review-word {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: clamp(168px, 24vh, 260px);
min-height: clamp(168px, 24vh, 260px);
max-height: clamp(168px, 24vh, 260px);
padding: clamp(14px, 2vw, 24px);
font-size: var(--k110-type-heading);
line-height: 1;
white-space: nowrap;
word-break: keep-all;
overflow: visible;
text-overflow: clip;
}
#reviewCard.is-updown .k110-review-single-text {
position: relative;
z-index: 2;
display: block;
max-width: 100%;
width: auto;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
line-height: 1;
}
#reviewCard.is-updown .k110-review-alien-info {
position: absolute;
z-index: 3;
left: 50%;
right: auto;
bottom: clamp(8px, 1.2vh, 14px);
transform: translateX(-50%);
width: max-content;
max-width: calc(100% - 24px);
pointer-events: none;
}
#reviewCard.is-updown .k110-review-alien-info .k110-c-capsule {
max-width: 100%;
}
#reviewCard.is-updown.is-single-meta-bottom #reviewAlien {
padding-bottom: clamp(42px, 5.2vh, 64px);
}
#reviewCard.is-updown.is-single-meta-side #reviewAlien {
padding-right: clamp(96px, 26%, 190px);
padding-bottom: clamp(14px, 2vw, 24px);
}
#reviewCard.is-updown.is-single-meta-side.is-single-meta-side-balanced #reviewAlien {
padding-right: clamp(14px, 2vw, 24px);
}
#reviewCard.is-updown.is-single-meta-side .k110-review-alien-info {
left: auto;
right: calc(var(--k110-panel-content-x, 12px) + (var(--k110-gap, 2px) * 3));
top: 50%;
bottom: auto;
transform: translateY(-50%);
flex-direction: column;
align-items: flex-end;
justify-content: center;
width: max-content;
max-width: min(34%, 190px);
}
#reviewCard.is-updown.is-stacked-review .k110-review-word {
height: auto;
min-height: clamp(112px, 15vh, 178px);
max-height: none;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
word-break: keep-all;
overflow-wrap: normal;
font-size: var(--k110-type-heading);
line-height: 1.04;
}
#reviewCard.is-updown.is-stacked-review .k110-inner-text {
white-space: nowrap;
overflow: visible;
text-overflow: clip;
overflow-wrap: normal;
}
#reviewCard.is-updown .k110-inner-text {
width: auto;
max-width: 100%;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
overflow-wrap: normal;
}
#reviewCard.is-updown .k110-review-compare {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#reviewCard.is-updown .k110-review-choices {
display: none !important;
}
#reviewPanel .k110-action-row {
position: relative;
min-height: calc(var(--k110-bar-h, calc(52px * 2 / 3)) + var(--k110-gap, 2px) + (var(--k110-bar-h, calc(52px * 2 / 3)) * 2));
max-height: none;
grid-template-columns: minmax(0, 1fr) minmax(88px, 0.5fr) minmax(88px, 0.5fr);
grid-template-rows:
var(--k110-bar-h, calc(52px * 2 / 3))
calc(var(--k110-bar-h, calc(52px * 2 / 3)) * 2);
align-items: stretch;
row-gap: var(--k110-gap, 2px);
column-gap: var(--k110-gap, 2px);
padding: 0;
}
#reviewCard.is-updown .k110-action-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
grid-template-rows:
var(--k110-bar-h, calc(52px * 2 / 3))
calc(var(--k110-bar-h, calc(52px * 2 / 3)) * 2);
border-top: 1px solid rgba(180,92,255,0.42);
background: transparent;
}
#reviewCard.is-updown .k110-action-row::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: var(--k110-panel-line-w, 1px);
background: rgba(180,92,255,0.42);
pointer-events: none;
z-index: 2;
}
#reviewCard.is-vs .k110-action-row,
#reviewCard.is-multi .k110-action-row {
display: grid !important;
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-top-color: rgba(180,92,255,0);
}
#reviewPanel .k110-review-meta-info {
min-width: 0;
grid-column: 2 / 4;
grid-row: 1;
padding: 0 var(--k110-panel-content-x);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.42em;
color: #B45CFF;
font-family: "Noto Sans Mono CJK KR", "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: var(--k110-type-micro);
font-weight: 900;
line-height: 1;
text-shadow: 0 0 8px rgba(180,92,255,0.42);
overflow: hidden;
overflow-x: auto;
scrollbar-width: none;
border-left: 0;
border-bottom: 1px solid rgba(180,92,255,0.42);
background:
linear-gradient(0deg, rgba(180,92,255,0.18), rgba(0,0,0,0) 72%),
rgba(0,0,0,0.34);
box-shadow: inset 0 -16px 30px rgba(180,92,255,0.12);
}
#reviewPanel .k110-review-meta-info::-webkit-scrollbar {
display: none;
}
#reviewPanel .k110-review-meta-line {
position: relative;
display: inline-flex;
align-items: center;
width: auto;
min-width: max-content;
max-width: none;
overflow: visible;
white-space: nowrap;
clip-path: inset(0 100% 0 0);
animation: k110ReviewMetaType 0.3s steps(var(--k110-review-meta-chars, 18), end) forwards;
}
#reviewCard .anim-pop-in {
animation: k110ReviewSmoothIn 0.52s var(--k110-review-layout-ease) forwards !important;
}
@keyframes k110ReviewSmoothIn {
0% {
transform: translateY(6px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#reviewPanel .k110-review-meta-line:nth-child(2) {
animation-delay: 0s;
}
#reviewPanel .k110-review-meta-line:nth-child(3) {
animation-delay: 0s;
}
#reviewPanel .k110-review-meta-cursor {
display: inline-block;
width: 0.52em;
height: 1em;
margin-left: 3px;
background: #B45CFF;
box-shadow: 0 0 8px rgba(180,92,255,0.72);
opacity: 0;
animation:
k110ReviewMetaCursorBlink 0.36s step-end infinite,
k110ReviewMetaCursorLife 0.54s linear var(--k110-review-meta-delay, 0ms) both;
}
#reviewPanel .k110-review-meta-status {
color: #B45CFF;
}
#reviewPanel .k110-review-meta-dot {
display: inline-block;
margin-right: 2px;
color: var(--k110-review-meta-state-color, #FFEE00);
text-shadow: 0 0 8px var(--k110-review-meta-state-glow, rgba(255,238,0,0.55));
}
#reviewPanel .k110-review-meta-state {
color: var(--k110-review-meta-state-color, #FFEE00);
text-shadow: 0 0 8px var(--k110-review-meta-state-glow, rgba(255,238,0,0.55));
}
#reviewPanel .k110-review-meta-state.is-listed {
--k110-review-meta-state-color: #7CFF00;
--k110-review-meta-state-glow: rgba(124,255,0,0.58);
}
#reviewPanel .k110-review-meta-state.is-pending {
--k110-review-meta-state-color: #FFEE00;
--k110-review-meta-state-glow: rgba(255,238,0,0.58);
}
@keyframes k110ReviewMetaType {
0% { clip-path: inset(0 100% 0 0); opacity: 0.4; }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes k110ReviewMetaCursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
@keyframes k110ReviewMetaCursorLife {
0% { visibility: visible; }
1% { visibility: visible; }
99% { visibility: visible; }
100% { visibility: hidden; }
}
#reviewPanel .k110-vote-btn:not(.k110-c-red-action) {
min-height: calc((var(--k110-bar-h, calc(52px * 2 / 3)) * 2) - (var(--k110-gap, 2px) * 2)) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
font-size: clamp(12px, 1vw, 15px) !important;
font-weight: 900;
}
#reviewCard.is-updown #boomUpBtn,
#reviewCard.is-updown #boomDownBtn {
grid-row: 2;
align-self: stretch;
justify-self: stretch;
height: auto !important;
min-height: 0 !important;
margin-top: 0;
margin-bottom: var(--k110-gap, 2px);
animation: k110ReviewButtonBreathe 3.1s ease-in-out infinite;
}
#reviewCard.is-updown #boomUpBtn {
grid-column: 2;
margin-left: var(--k110-gap, 2px);
margin-right: 0;
}
#reviewCard.is-updown #boomDownBtn {
grid-column: 3;
margin-left: 0;
margin-right: var(--k110-gap, 2px);
}
#reviewPanel .k110-vote-btn .k110-emoji {
display: none !important;
}
#reviewPanel #boomUpBtn::before,
#reviewPanel #boomDownBtn::before {
content: "\1F44D\FE0E";
display: inline-block;
width: auto;
height: auto;
margin: 0;
background: transparent;
clip-path: none;
font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Sans", "Noto Sans CJK KR", sans-serif;
font-size: clamp(18px, 1.7vw, 24px);
line-height: 1;
font-variant-emoji: text;
}
#reviewPanel #boomDownBtn::before {
content: "\1F44E\FE0E";
}
#reviewPanel .k110-report-btn {
--red-action-overlap: 0px;
--red-action-size: calc(var(--k110-review-label-h, 28px) - (2 * var(--k110-gap, 2px)));
--red-action-icon-font-size: calc(var(--red-action-size) * 0.82);
--red-action-icon-scale: 1.02;
--red-action-icon-shift-y: 0.06em;
position: absolute;
right: var(--k110-gap, 2px);
top: var(--k110-gap, 2px);
z-index: 6;
width: var(--red-action-size) !important;
height: var(--red-action-size) !important;
min-width: var(--red-action-size) !important;
min-height: var(--red-action-size) !important;
max-width: var(--red-action-size) !important;
max-height: var(--red-action-size) !important;
padding: 0 !important;
font-size: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: #000 !important;
border: 1px solid rgba(255,59,48,0.86) !important;
color: #FF3B30 !important;
box-shadow:
inset 0 0 12px rgba(255,59,48,0.16),
0 0 12px rgba(255,59,48,0.18) !important;
}
#reviewPanel .k110-report-btn::before {
color: currentColor;
font-size: var(--red-action-icon-font-size);
transform: translate(var(--red-action-icon-shift-x), var(--red-action-icon-shift-y)) scale(var(--red-action-icon-scale));
}
#reviewPanel .k110-report-btn:hover {
background: #FF3B30 !important;
color: #000 !important;
border-color: #FF3B30 !important;
box-shadow:
0 0 14px rgba(255,59,48,0.48),
0 0 28px rgba(255,59,48,0.24) !important;
}
#reviewPanel .k110-report-btn:hover::before {
color: #000;
text-shadow: none;
filter: none;
}
@media (max-width: 767px) and (orientation: portrait) {
#reviewPanel .k110-report-btn {
--red-action-overlap: 0px;
--red-action-size: calc(var(--k110-review-label-h, 28px) - (2 * var(--k110-gap, 2px)));
--red-action-icon-font-size: calc(var(--red-action-size) * 0.82);
--red-action-icon-scale: 1.02;
--red-action-icon-shift-y: 0.06em;
top: var(--k110-gap, 2px);
right: var(--k110-gap, 2px);
width: var(--red-action-size) !important;
height: var(--red-action-size) !important;
min-width: var(--red-action-size) !important;
min-height: var(--red-action-size) !important;
max-width: var(--red-action-size) !important;
max-height: var(--red-action-size) !important;
transform: none !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#reviewPanel .k110-report-btn::before {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: var(--red-action-icon-font-size);
line-height: 1;
text-align: center;
transform: translate(var(--red-action-icon-shift-x), var(--red-action-icon-shift-y)) scale(var(--red-action-icon-scale));
}
#reviewPanel .k110-report-btn:active {
transform: scale(0.94) !important;
}
}
#reviewCard #reviewStatus {
min-height: 0;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
text-align: right;
overflow: hidden;
background:
repeating-linear-gradient(115deg, rgba(180,92,255,0.16) 0 1px, transparent 1px 8px),
rgba(0,0,0,0.28) !important;
background-size: 18px 18px, auto;
animation: k110ReviewSlashFlow var(--k110-pattern-flow-speed, 9s) linear infinite;
}
#reviewCard.is-multi #reviewStatus {
min-height: 0;
height: 100%;
max-height: 100%;
}
@keyframes k110ReviewSlashFlow {
0% { background-position: 0 0, 0 0; }
100% { background-position: 36px 0, 0 0; }
}
#reviewCard #reviewStatus .k110-review-status-line {
display: block;
width: 100%;
overflow: visible;
text-overflow: ellipsis;
white-space: nowrap;
}
#reviewCard #reviewStatus .k110-review-status-line.is-exiting {
animation: none;
}
#reviewCard #reviewStatus .k110-review-status-line.is-typing {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 3px;
text-overflow: clip;
}
#reviewCard #reviewStatus .k110-review-status-line.is-tip {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.2;
}
#reviewCard #reviewStatus .k110-review-status-tip-row {
display: block;
width: 100%;
}
#reviewCard #reviewStatus .k110-review-status-tip-label {
display: inline-block;
margin-right: 6px;
padding: 1px 8px 2px;
border-radius: 999px;
background: #B45CFF;
color: #000;
font-weight: 900;
text-shadow: none;
box-shadow: 0 0 10px rgba(180,92,255,0.42);
}
#reviewCard #reviewStatus .k110-review-status-tip-body {
color: #B45CFF;
text-shadow: 0 0 7px rgba(180,92,255,0.38);
}
#reviewCard #reviewStatus .k110-review-status-typed {
display: inline-block;
overflow: visible;
white-space: nowrap;
clip-path: none;
animation: k110ReviewStatusType var(--k110-review-status-duration, 640ms) steps(var(--k110-review-status-chars, 16), end) forwards;
}
#reviewCard #reviewStatus .k110-review-status-cursor {
display: inline-block;
width: 0.56em;
height: 1.08em;
background: #B45CFF;
box-shadow: 0 0 8px rgba(180,92,255,0.72);
animation:
k110ReviewStatusCursorBlink 0.42s step-end infinite,
k110ReviewStatusCursorHide 1ms linear var(--k110-review-status-duration, 640ms) forwards;
}
@keyframes k110ReviewStatusType {
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes k110ReviewStatusCursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes k110ReviewStatusCursorHide {
0% { visibility: visible; }
100% { visibility: hidden; }
}
@keyframes k110ReviewStatusFrameOut {
0% { transform: none; opacity: 1; filter: none; }
100% { transform: none; opacity: 1; filter: none; }
}
#reviewCard .k110-review-word.is-loading {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(14px, 2vw, 24px) !important;
}
#reviewCard .k110-review-word.is-loading .k110-inner-text {
display: block;
max-width: 100%;
width: auto;
font-size: inherit;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#reviewCard .k110-review-word.is-loading .k110-review-loading-text {
display: inline-grid;
grid-template-columns: minmax(0, max-content) 1.35em;
align-items: center;
justify-content: center;
gap: 0.28em;
max-width: 100%;
width: auto;
overflow: hidden;
line-height: 1;
}
#reviewCard .k110-review-word.is-loading .k110-review-loading-base {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#reviewCard .k110-review-word.is-loading .k110-review-loading-spin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35em;
min-width: 1.35em;
height: 1em;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
}
#reviewCard.is-review-loading .k110-review-word.is-loading {
height: clamp(168px, 24vh, 260px);
min-height: clamp(168px, 24vh, 260px);
max-height: clamp(168px, 24vh, 260px);
font-size: var(--k110-type-heading);
}
#reviewCard.is-review-loading .k110-action-row {
opacity: 1;
}
#reviewCard.is-review-loading .k110-vote-btn {
pointer-events: none;
opacity: 0.42;
filter: grayscale(0.45);
}
@media (max-width: 767px) and (orientation: portrait) {
#reviewCard .k110-review-category {
grid-template-columns: 1fr;
gap: 0;
height: calc(52px * 2 / 3);
min-height: calc(52px * 2 / 3);
padding: 0 9px;
}
#reviewCard.is-updown .k110-review-word {
font-size: clamp(30px, 8vw, 54px);
}
#reviewCard.is-multi #reviewKorean {
height: clamp(190px, 30svh, 330px);
min-height: clamp(190px, 30svh, 330px);
max-height: clamp(190px, 30svh, 330px);
font-size: var(--k110-type-heading);
}
#reviewCard.is-multi #reviewKorean .k110-review-source-text {
max-width: 100%;
}
#reviewCard.is-multi .k110-review-source-info {
max-width: calc(100% - 24px);
}
#reviewCard.is-multi .k110-review-choices[data-count="5"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#reviewPanel .k110-action-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
}
}
@media (max-height: 780px) {
#reviewCard {
--k110-review-status-line-count: 2;
}
#reviewCard.is-multi {
--k110-review-status-lines: 2;
--k110-review-status-line-count: 2;
}
#reviewCard.is-multi #reviewKorean {
height: clamp(156px, 25svh, 270px);
min-height: clamp(156px, 25svh, 270px);
max-height: clamp(156px, 25svh, 270px);
}
#reviewCard.is-multi .k110-review-choices {
min-height: clamp(132px, 22vh, 218px);
}
}
@media (max-height: 680px) {
#reviewCard {
--k110-review-status-line-count: 2;
}
#reviewCard.is-multi {
--k110-review-status-lines: 2;
--k110-review-status-line-count: 2;
}
#reviewCard.is-multi #reviewKorean {
height: clamp(128px, 22svh, 226px);
min-height: clamp(128px, 22svh, 226px);
max-height: clamp(128px, 22svh, 226px);
}
#reviewCard.is-multi .k110-review-choices {
min-height: clamp(112px, 20vh, 188px);
}
#reviewCard.is-multi #reviewStatus {
padding-top: 6px;
padding-bottom: 6px;
}
}
@media (max-width: 767px) and (orientation: portrait) {
.k110-panel.is-active {
display: flex !important;
flex-direction: column !important;
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
overflow: hidden !important;
}
.k110-panel.is-active > .k110-panel-main,
.k110-panel.is-active > .k110-panel-frame > .k110-panel-main {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
#designPanel.k110-panel.is-active {
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
overflow: hidden !important;
}
#discoverPanel.k110-panel.is-active {
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
overflow: hidden !important;
}
}
/* K110 SECTION CSS-99 LAYOUT AUTHORITY AND FINAL PANEL COLOR RULES
Keep footer tabs outside panel frames. Panel frame geometry is resolved from header plus footer first. */
#translatePanel {
--k110-panel-primary: var(--k110-color-green);
--k110-panel-glow-soft: rgba(124,255,0,0.18);
--k110-panel-glow-strong: rgba(124,255,0,0.42);
}
#reviewPanel {
--k110-panel-primary: var(--k110-color-purple);
--k110-panel-glow-soft: rgba(180,92,255,0.18);
--k110-panel-glow-strong: rgba(180,92,255,0.44);
}
#designPanel {
--k110-panel-primary: var(--k110-color-cyan);
--k110-panel-glow-soft: rgba(0,229,255,0.18);
--k110-panel-glow-strong: rgba(0,229,255,0.44);
}
#discoverPanel {
--k110-panel-primary: var(--k110-color-yellow);
--k110-panel-glow-soft: rgba(255,238,0,0.18);
--k110-panel-glow-strong: rgba(255,238,0,0.44);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
.k110-hero-title {
--k110-hero-title-size: clamp(62px, min(6vw, 12vh), 96px);
}
}
@media (min-width: 900px) and (orientation: landscape) {
.k110-hero-title {
--k110-hero-title-size: clamp(62px, min(6vw, 12vh), 96px);
}
}
.k110-panel .k110-c-terminal-status {
--status-accent: var(--k110-panel-primary, currentColor);
--status-fg: var(--status-accent);
border-radius: 0 !important;
border-color: color-mix(in srgb, var(--status-accent) 46%, transparent) !important;
color: var(--status-fg) !important;
text-shadow: 0 0 7px color-mix(in srgb, var(--status-accent) 32%, transparent);
}
#reviewCard #reviewStatus {
border: 0 !important;
border-radius: 0 !important;
line-height: 1.28 !important;
color: color-mix(in srgb, var(--k110-panel-primary) 86%, white 4%) !important;
background: rgba(0,0,0,0.28) !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: 0 0 7px color-mix(in srgb, var(--k110-panel-primary) 34%, transparent) !important;
}
#reviewCard .k110-review-status-wrap {
--k110-review-status-line-count: 3 !important;
--k110-review-status-line-h: calc(var(--k110-type-body) * 1.32) !important;
--k110-review-status-pad-y: calc(var(--k110-gap, 2px) * 4) !important;
--k110-review-status-h: calc((var(--k110-review-status-line-h) * var(--k110-review-status-line-count)) + (var(--k110-review-status-pad-y) * 2)) !important;
border-top: var(--k110-panel-line-w) solid color-mix(in srgb, var(--k110-panel-primary) 42%, transparent) !important;
border-bottom: var(--k110-panel-line-w) solid color-mix(in srgb, var(--k110-panel-primary) 22%, transparent) !important;
}
#reviewCard.is-multi.is-rank-status-medium .k110-review-status-wrap {
--k110-review-status-line-count: 2 !important;
--k110-review-status-lines: 2 !important;
}
#reviewCard.is-multi.is-rank-status-compact .k110-review-status-wrap {
--k110-review-status-line-count: 1 !important;
--k110-review-status-lines: 1 !important;
--k110-review-status-line-h: max(22px, calc(var(--k110-bar-font-size, 15px) * 1.46)) !important;
--k110-review-status-pad-y: calc(var(--k110-gap, 2px) * 3) !important;
--k110-review-status-h: calc(var(--k110-review-status-line-h) + (var(--k110-review-status-pad-y) * 2) + (var(--k110-panel-line-w, 1px) * 2)) !important;
--k110-review-score-w: clamp(86px, 7vw, 118px) !important;
min-height: var(--k110-review-status-h) !important;
height: var(--k110-review-status-h) !important;
flex: 0 0 var(--k110-review-status-h) !important;
}
#reviewCard.is-multi.is-rank-status-compact #reviewStatus {
justify-content: center !important;
padding-top: var(--k110-review-status-pad-y) !important;
padding-bottom: var(--k110-review-status-pad-y) !important;
overflow: visible !important;
}
#reviewCard.is-multi.is-rank-status-compact .k110-review-score-panel {
gap: calc(var(--k110-gap, 2px) * 2) !important;
padding-left: calc(var(--k110-gap, 2px) * 4) !important;
padding-right: calc(var(--k110-gap, 2px) * 4) !important;
}
#reviewCard.is-multi.is-rank-status-compact .k110-review-score-label {
font-size: calc(var(--k110-type-micro) * 0.86) !important;
}
#reviewCard.is-multi.is-rank-status-compact .k110-review-score-value {
font-size: var(--k110-type-heading) !important;
line-height: 1 !important;
}
#reviewCard .k110-review-score-panel {
border-right: var(--k110-panel-line-w) solid color-mix(in srgb, var(--k110-panel-primary) 42%, transparent) !important;
color: color-mix(in srgb, var(--k110-panel-primary) 86%, white 4%) !important;
text-shadow: 0 0 7px color-mix(in srgb, var(--k110-panel-primary) 34%, transparent) !important;
}
#reviewCard .k110-review-score-value {
color: var(--k110-panel-primary) !important;
}
#reviewCard.is-multi.is-rank-status-compact #reviewStatus .k110-review-status-line {
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
min-height: var(--k110-review-status-line-h) !important;
line-height: var(--k110-review-status-line-h) !important;
overflow: visible !important;
text-overflow: clip !important;
}
#reviewCard #reviewStatus .k110-review-status-cursor {
background: var(--k110-panel-primary) !important;
box-shadow: 0 0 8px color-mix(in srgb, var(--k110-panel-primary) 72%, transparent) !important;
}
#reviewCard #reviewStatus .k110-review-status-tip-label {
background: var(--k110-panel-primary) !important;
color: #000 !important;
box-shadow: 0 0 10px color-mix(in srgb, var(--k110-panel-primary) 42%, transparent) !important;
}
#reviewCard #reviewStatus .k110-review-status-tip-body {
color: var(--k110-panel-primary) !important;
text-shadow: 0 0 7px color-mix(in srgb, var(--k110-panel-primary) 38%, transparent) !important;
}
/* K110 REVIEW AUTHORITY
Review text sizing is controlled by JS fit helpers. Legacy width, clipping and button visuals are neutralized here. */
#reviewCard {
--k110-review-line-color: color-mix(in srgb, var(--k110-panel-primary) 42%, transparent);
--k110-review-line-color-soft: color-mix(in srgb, var(--k110-panel-primary) 22%, transparent);
}
#reviewCard .k110-review-category,
#reviewCard .k110-review-label,
#reviewCard .k110-review-word,
#reviewCard .k110-review-choices,
#reviewCard .k110-action-row,
#reviewCard .k110-review-status-wrap {
border-color: var(--k110-review-line-color) !important;
}
#reviewCard .k110-inner-text,
#reviewCard .k110-review-option-text,
#reviewCard .k110-review-source-text {
display: inline-block !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
text-overflow: clip !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
#reviewCard .k110-review-option {
border: var(--k110-panel-line-w, 1px) solid var(--k110-review-line-color) !important;
border-radius: 0 !important;
box-shadow: none;
box-sizing: border-box !important;
}
#reviewCard .k110-review-option,
#reviewPanel .k110-vote-btn,
#reviewPanel .k110-report-btn {
background-clip: padding-box;
}
#reviewCard.is-vs .k110-review-option,
#reviewCard.is-multi .k110-review-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
#reviewCard.is-multi .k110-review-option {
padding: calc(var(--k110-gap, 2px) * 4) !important;
}
#reviewCard.is-multi .k110-review-option .k110-review-option-text {
font-size: var(--k110-type-display);
}
#reviewCard.is-updown .k110-review-compare {
border-bottom: var(--k110-panel-line-w, 1px) solid var(--k110-review-line-color) !important;
}
#reviewCard.is-updown .k110-action-row {
border-top: var(--k110-panel-line-w, 1px) solid var(--k110-review-line-color) !important;
}
#reviewCard.is-updown .k110-action-row::before {
width: var(--k110-panel-line-w, 1px) !important;
background: var(--k110-review-line-color) !important;
}
#reviewPanel .k110-review-meta-info {
overflow: hidden !important;
overflow-x: auto !important;
scrollbar-width: none !important;
border-color: var(--k110-review-line-color) !important;
}
#reviewPanel .k110-review-meta-info::-webkit-scrollbar {
display: none !important;
}
#reviewPanel .k110-vote-btn:not(.k110-c-red-action) {
border: var(--k110-panel-line-w, 1px) solid var(--k110-review-line-color) !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
#reviewCard.is-updown #boomUpBtn,
#reviewCard.is-updown #boomDownBtn {
--review-vote-accent: var(--k110-panel-primary);
--review-vote-text: var(--review-vote-accent);
--review-vote-fill-soft: color-mix(in srgb, var(--review-vote-accent) 16%, transparent);
--review-vote-glow-soft: color-mix(in srgb, var(--review-vote-accent) 22%, transparent);
--review-vote-glow-strong: color-mix(in srgb, var(--review-vote-accent) 52%, transparent);
--k110-command-fill: var(--review-vote-accent);
--k110-command-glow-soft: var(--review-vote-glow-soft);
--k110-command-glow-strong: var(--review-vote-glow-strong);
border: var(--k110-panel-line-w, 1px) solid color-mix(in srgb, var(--review-vote-accent) 72%, transparent) !important;
background:
linear-gradient(0deg, var(--review-vote-fill-soft), rgba(0,0,0,0) 66%),
rgba(0,0,0,0.72) !important;
color: var(--review-vote-text) !important;
text-shadow: 0 0 8px color-mix(in srgb, var(--review-vote-accent) 42%, transparent) !important;
box-shadow:
inset 0 -18px 34px color-mix(in srgb, var(--review-vote-accent) 14%, transparent),
inset 0 0 12px color-mix(in srgb, var(--review-vote-accent) 12%, transparent) !important;
animation: k110ReviewButtonBreathe 3.1s ease-in-out infinite !important;
}
#reviewCard.is-updown #boomUpBtn {
--review-vote-accent: var(--k110-color-green);
}
#reviewCard.is-updown #boomDownBtn {
--review-vote-accent: var(--k110-color-red);
}
#reviewCard.is-updown #boomUpBtn:hover,
#reviewCard.is-updown #boomDownBtn:hover {
background: var(--review-vote-accent) !important;
border-color: var(--review-vote-accent) !important;
color: var(--k110-bg-black) !important;
text-shadow: none !important;
box-shadow:
0 0 18px color-mix(in srgb, var(--review-vote-accent) 48%, transparent),
0 0 36px color-mix(in srgb, var(--review-vote-accent) 22%, transparent) !important;
}
#reviewPanel .k110-report-btn.k110-c-red-action {
--red-action-color: var(--k110-color-red);
--btn-accent: var(--red-action-color);
--btn-border: color-mix(in srgb, var(--red-action-color) 88%, white);
border: var(--k110-panel-line-w, 1px) solid var(--btn-border) !important;
border-radius: 0 !important;
background: var(--k110-bg-black) !important;
color: var(--red-action-color) !important;
box-shadow:
inset 0 0 12px color-mix(in srgb, var(--red-action-color) 24%, transparent),
0 0 12px color-mix(in srgb, var(--red-action-color) 18%, transparent) !important;
}
#reviewPanel .k110-report-btn.k110-c-red-action:hover {
border-color: var(--red-action-color) !important;
background: var(--red-action-color) !important;
color: var(--k110-bg-black) !important;
}
#reviewCard .k110-inner-text,
#reviewCard .k110-review-option-text,
#reviewCard .k110-review-source-text,
#reviewCard .k110-review-status-line,
#reviewCard .k110-review-status-typed,
#reviewCard .k110-review-status-tip-body,
#reviewPanel .k110-review-meta-line,
#reviewPanel .k110-review-meta-line * {
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#reviewCard .k110-inner-text,
#reviewCard .k110-review-option-text,
#reviewCard .k110-review-source-text,
#reviewCard .k110-review-status-line,
#reviewCard .k110-review-status-typed,
#reviewPanel .k110-review-meta-line {
overflow: visible !important;
}
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
display: grid !important;
grid-template-columns: repeat(var(--k110-feature-cols, 4), minmax(0, 1fr)) !important;
gap: var(--k110-button-cluster-gap) !important;
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
justify-content: center !important;
box-sizing: border-box !important;
overflow: visible !important;
z-index: 220 !important;
}
.k110-panel.is-active {
transform: none !important;
}
.k110-panel.is-tab-exiting,
.k110-panel.is-tab-arriving {
transform: none !important;
}
.k110-panel.is-active > .k110-feature-buttons .k110-feature-btn,
.k110-panel.is-active > .k110-feature-buttons .k110-back-btn,
.k110-panel.is-active > .k110-subnav .k110-feature-btn,
.k110-panel.is-active > .k110-subnav .k110-back-btn {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
}
@media (min-width: 768px) {
.k110-panel.is-active {
--k110-panel-footer-h: clamp(38px, 5.8svh, 48px);
--k110-panel-footer-gap: clamp(8px, 1.2svh, 14px);
--k110-panel-frame-h: max(120px, calc(var(--k110-panel-max-h) - var(--k110-panel-footer-h) - var(--k110-panel-footer-gap)));
height: var(--k110-panel-max-h) !important;
max-height: var(--k110-panel-max-h) !important;
}
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
flex: 0 0 var(--k110-panel-footer-h) !important;
height: var(--k110-panel-footer-h) !important;
min-height: var(--k110-panel-footer-h) !important;
margin-top: var(--k110-panel-footer-gap) !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
}
@media (max-width: 767px) and (orientation: portrait) {
:root {
--k110-mobile-bottom-reserve: calc(var(--k110-mobile-footer-tail) + var(--k110-mobile-footer-clearance));
--k110-panel-available-h: max(260px, calc(var(--k110-mobile-viewport-h) - var(--k110-mobile-panel-top) - var(--k110-tab-footer-h) - var(--k110-tab-footer-gap) - var(--k110-mobile-footer-tail)));
--k110-panel-frame-h: var(--k110-panel-available-h);
}
.k110-panel.is-active {
--k110-panel-footer-h: var(--k110-tab-footer-h);
--k110-panel-footer-gap: var(--k110-tab-footer-gap);
--k110-panel-frame-h: var(--k110-panel-available-h);
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
margin-top: var(--k110-mobile-panel-top) !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.k110-panel.is-active > .k110-panel-frame {
height: var(--k110-panel-frame-h);
max-height: var(--k110-panel-frame-h);
flex: 0 0 var(--k110-panel-frame-h);
}
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
position: fixed !important;
left: var(--k110-edge-x) !important;
right: var(--k110-edge-x) !important;
bottom: var(--k110-mobile-footer-tail) !important;
width: var(--k110-panel-w) !important;
height: var(--k110-tab-footer-h) !important;
min-height: var(--k110-tab-footer-h) !important;
margin: 0 !important;
padding: 0 !important;
}
}
:root {
--k110-screen-w: 100vw;
--k110-screen-h: 100svh;
--k110-layout-gutter: var(--k110-edge-x);
--k110-layout-header-bottom: calc(var(--k110-edge-y) + var(--k110-header-h));
--k110-layout-footer-tail: 0px;
--k110-layout-footer-reserve: calc(var(--k110-tab-footer-h, 54px) + var(--k110-tab-footer-gap, 10px) + var(--k110-layout-footer-tail));
--k110-panel-available-h: max(260px, calc(var(--k110-screen-h) - var(--k110-layout-header-bottom) - var(--k110-layout-footer-reserve)));
--k110-panel-frame-h: var(--k110-panel-available-h);
}
body.k110-layout-landscape {
--k110-layout-content-w: calc(var(--k110-screen-w) - (var(--k110-layout-gutter) * 2));
--k110-hero-w: max(280px, calc(50vw - var(--k110-layout-gutter) - var(--k110-layout-gutter)));
--k110-panel-w: calc(50vw - var(--k110-layout-gutter));
--k110-layout-footer-tail: 0px;
}
body.k110-layout-portrait {
--k110-panel-w: calc(var(--k110-screen-w) - (var(--k110-layout-gutter) * 2));
--k110-portrait-page-gap: clamp(72px, 14svh, 180px);
--k110-layout-footer-tail: 0px;
--k110-layout-footer-reserve: 0px;
--k110-panel-available-h: max(260px, calc(var(--k110-screen-h) - var(--k110-layout-header-bottom)));
--k110-panel-frame-h: var(--k110-panel-available-h);
}
body.k110-layout-landscape .k110-hero {
width: var(--k110-hero-w) !important;
}
body.k110-layout-landscape .k110-ui {
position: fixed !important;
top: var(--k110-layout-header-bottom) !important;
right: var(--k110-layout-gutter) !important;
left: auto !important;
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
transform: none !important;
overflow: hidden !important;
}
body.k110-layout-portrait .k110-ui {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
margin: var(--k110-portrait-page-gap) auto 0 !important;
overflow: visible !important;
}
body.k110-layout-portrait .k110-hero {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (min-width: 768px) {
body.k110-layout-portrait .k110-hero {
min-height: var(--k110-screen-h) !important;
display: flex !important;
flex-direction: column;
justify-content: center;
padding-top: var(--k110-layout-header-bottom) !important;
padding-bottom: var(--k110-layout-header-bottom) !important;
box-sizing: border-box;
pointer-events: auto !important;
}
}
.k110-panel > .k110-feature-buttons,
.k110-panel > .k110-subnav,
.k110-panel.is-active > .k110-feature-buttons,
.k110-panel.is-active > .k110-subnav {
display: none !important;
}
.k110-global-tab-footer {
display: grid !important;
grid-template-columns: repeat(var(--k110-feature-cols, 4), minmax(0, 1fr)) !important;
gap: var(--k110-button-cluster-gap) !important;
position: fixed !important;
z-index: 1300 !important;
width: var(--k110-panel-w) !important;
height: var(--k110-tab-footer-h, 54px) !important;
min-height: var(--k110-tab-footer-h, 54px) !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
align-items: stretch !important;
overflow: visible !important;
pointer-events: auto !important;
}
body.k110-layout-landscape .k110-global-tab-footer {
right: var(--k110-layout-gutter) !important;
left: auto !important;
bottom: var(--k110-layout-footer-tail) !important;
}
body.k110-layout-portrait .k110-global-tab-footer {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
width: var(--k110-panel-w) !important;
margin: var(--k110-tab-footer-gap, 10px) auto 0 !important;
}
.k110-global-tab-footer .k110-feature-btn,
.k110-global-tab-footer .k110-back-btn {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 100% !important;
box-sizing: border-box !important;
}
.k110-panel.is-active {
--k110-panel-footer-h: 0px !important;
--k110-panel-footer-gap: 0px !important;
--k110-panel-frame-h: var(--k110-panel-available-h) !important;
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
padding-right: 0 !important;
overflow: hidden !important;
}
.k110-panel.is-active > .k110-panel-frame {
height: var(--k110-panel-frame-h) !important;
max-height: var(--k110-panel-frame-h) !important;
flex: 0 0 var(--k110-panel-frame-h) !important;
}
body.k110-layout-portrait .k110-panel.is-active {
margin-top: 0 !important;
}
#translatePanel {
--k110-translate-action-row-h: 52px;
--k110-translate-action-h: calc(
var(--k110-translate-action-row-h)
+ var(--k110-button-inset)
+ var(--k110-button-inset)
+ var(--k110-panel-line-w)
+ var(--k110-panel-line-w)
);
/*
* V0.2 요구사항 2-1: 번역 실행 버튼 행 높이의 최종 권위.
*
* 실행 버튼도 액션바 버튼과 같은 `.k110-c-button` 이므로 1행 높이 권위를 그대로 참조한다.
* CSS-50 블록은 이 변수가 없어 리터럴 `52px` 로 두었고, 여기서 참조로 덮어 값이 한 곳에서
* 정해지게 한다.
*
* 액션바와 달리 `--k110-button-inset`·`--k110-panel-line-w` 를 더하지 않는다. 실행 버튼은
* `.k110-c-control-slot` 안에 들어가지 않는 단독 그리드 아이템이라 슬롯 여백과 테두리가
* 없다. `.k110-c-button` 의 `min-height: 2.75rem`(44px)이 52px 보다 작아 행 안에 들어간다.
*/
--k110-translate-exec-h: var(--k110-translate-action-row-h);
--k110-translate-gap-h: calc(var(--k110-button-cluster-gap) * 2);
--k110-translate-status-h: var(--k110-bar-h, calc(52px * 2 / 3));
--k110-translate-main-h: max(180px, calc(var(--k110-panel-frame-h) - var(--k110-bar-h, calc(52px * 2 / 3))));
--k110-translate-field-h: clamp(64px, calc((var(--k110-translate-main-h) - var(--k110-translate-action-h) - var(--k110-translate-exec-h) - var(--k110-translate-status-h) - (var(--k110-translate-gap-h) * 2)) / 2), 52svh);
}
@media (max-width: 640px) {
#translatePanel {
--k110-translate-action-h: calc(
var(--k110-translate-action-row-h)
+ var(--k110-translate-action-row-h)
+ var(--k110-button-cluster-gap)
+ var(--k110-button-inset)
+ var(--k110-button-inset)
+ var(--k110-panel-line-w)
+ var(--k110-panel-line-w)
);
}
}
#translatePanel > .k110-panel-frame {
height: var(--k110-panel-frame-h) !important;
max-height: var(--k110-panel-frame-h) !important;
overflow: hidden !important;
}
#translatePanel .k110-panel-main {
height: var(--k110-translate-main-h) !important;
min-height: 0 !important;
max-height: var(--k110-translate-main-h) !important;
display: grid !important;
grid-template-rows:
var(--k110-translate-gap-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-exec-h)
var(--k110-translate-status-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-gap-h)
var(--k110-translate-action-h) !important;
align-content: stretch !important;
overflow: hidden !important;
}
#translatePanel .k110-translate-field-group {
display: grid !important;
grid-template-rows:
var(--k110-translate-gap-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-exec-h)
var(--k110-translate-status-h)
minmax(0, var(--k110-translate-field-h))
var(--k110-translate-gap-h)
var(--k110-translate-action-h) !important;
}
#translatePanel .k110-box {
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
}
#translatePanel .k110-translate-cell {
position: relative !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#translatePanel .k110-translate-cell-output {
display: flex !important;
flex-direction: column !important;
}
#translatePanel .k110-translate-input-wrap,
#translatePanel #normalInput,
#translatePanel #alienOutput {
min-height: 0 !important;
height: 100% !important;
max-height: none !important;
}
#translatePanel #normalInput {
resize: none !important;
overflow: auto !important;
}
#translatePanel .k110-action-row {
flex: 0 0 var(--k110-translate-action-h) !important;
min-height: var(--k110-translate-action-h) !important;
height: var(--k110-translate-action-h) !important;
padding: var(--k110-button-inset) !important;
gap: var(--k110-button-cluster-gap) !important;
border: var(--k110-panel-line-w) solid rgba(124, 255, 0, 0.42) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#translatePanel .k110-action-row > button {
min-height: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
}
#translatePanel #alienOutput.k110-c-output-grid-bg {
--output-accent: var(--k110-panel-primary);
--grid-accent: var(--output-accent);
--grid-size: 24px;
--grid-line-alpha-x: 30%;
--grid-line-alpha-y: 26%;
--grid-glow-alpha: 16%;
--grid-bg: rgba(0,0,0,0.66);
--grid-shadow:
inset 0 -24px 48px color-mix(in srgb, var(--grid-accent) 15%, transparent),
0 0 22px color-mix(in srgb, var(--grid-accent) 22%, transparent),
0 0 48px color-mix(in srgb, var(--grid-accent) 9%, transparent);
border: 0 !important;
outline: 0 !important;
}
/* K110 SECTION CSS-99 VISIBLE VIEWPORT FOOTER OVERRIDE
Standard mobile rule: no browser-specific footer branches. The second page
owns the tab footer as its bottom row, and visible viewport metrics drive
the height. */
:root {
--k110-visible-w: 100vw;
--k110-visible-h: 100dvh;
--k110-visual-offset-top: 0px;
--k110-visual-offset-left: 0px;
}
@supports not (height: 100dvh) {
:root {
--k110-visible-h: 100svh;
}
}
body.k110-layout-portrait {
--k110-screen-h: var(--k110-visible-h);
--k110-mobile-visual-h: var(--k110-visible-h);
--k110-mobile-browser-bottom: 0px;
--k110-mobile-footer-tail: 0px;
--k110-mobile-footer-visible-gap: 0px;
--k110-mobile-bottom-reserve: 0px;
--k110-layout-footer-tail: 0px;
--k110-layout-footer-reserve: calc(var(--k110-tab-footer-h, 54px) + var(--k110-tab-footer-gap, 10px));
--k110-panel-available-h: max(260px, calc(var(--k110-visible-h) - var(--k110-layout-header-bottom) - var(--k110-layout-footer-reserve)));
--k110-panel-frame-h: var(--k110-panel-available-h);
}
@media (max-width: 767px) and (orientation: portrait) {
html,
body {
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
overscroll-behavior-y: none;
}
body {
padding-bottom: 0 !important;
}
.k110-hero {
min-height: var(--k110-visible-h) !important;
padding-bottom: 0 !important;
}
.k110-ui,
.k110-ui.is-design-mode {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: var(--k110-panel-w) !important;
max-width: var(--k110-panel-w) !important;
height: var(--k110-visible-h) !important;
min-height: var(--k110-visible-h) !important;
max-height: var(--k110-visible-h) !important;
margin: var(--k110-portrait-page-gap) auto 0 !important;
padding-top: var(--k110-layout-header-bottom) !important;
padding-bottom: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, var(--k110-panel-available-h)) var(--k110-tab-footer-h, 54px) !important;
row-gap: var(--k110-tab-footer-gap, 10px) !important;
align-content: start !important;
overflow: hidden !important;
box-sizing: border-box !important;
scroll-margin-top: 0 !important;
}
.k110-ui > .k110-panel {
grid-column: 1 !important;
grid-row: 1 !important;
min-width: 0 !important;
min-height: 0 !important;
}
.k110-panel.is-active {
height: var(--k110-panel-available-h) !important;
max-height: var(--k110-panel-available-h) !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.k110-panel.is-active > .k110-panel-frame {
height: 100% !important;
max-height: 100% !important;
flex: 1 1 auto !important;
}
.k110-global-tab-footer {
grid-column: 1 !important;
grid-row: 2 !important;
align-self: stretch !important;
justify-self: stretch !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
height: var(--k110-tab-footer-h, 54px) !important;
min-height: var(--k110-tab-footer-h, 54px) !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1300 !important;
}
/*
* A-4: 폰 세로 탭 푸터 하단 11.8px 영구 잘림 수정.
*
* `.k110-ui` 는 이 블록에서 `height/min-height/max-height: var(--k110-visible-h)` +
* `box-sizing: border-box` 로 높이가 고정된 2행 그리드다. 그 안의 세로 예산이
* `padding-top + 1행 + row-gap + 푸터 margin-top + 2행` 인데, `row-gap`(위 `.k110-ui` 규칙)과
* 푸터 `margin-top`(`body.k110-layout-portrait .k110-global-tab-footer`)이 **같은 토큰**
* `--k110-tab-footer-gap` 을 중복 적용해 고정 높이를 정확히 그 토큰 값만큼 넘긴다.
* 실측(390×844): 106.632 + 667.547 + 11.816 + 11.816 + 58 = 855.811 > 844 → 11.811px 초과.
* 초과분은 문서 최대 스크롤에서도 도달할 수 없어 푸터 하단이 영구적으로 잘렸다.
*
* 그래서 간격 담당을 `row-gap` 하나로 모으고 푸터 `margin-top` 만 죽인다. 위 14382행의
* `margin: 0 !important` 로는 부족하다. 값의 권위는 `body.k110-layout-portrait
* .k110-global-tab-footer`(0,2,1) 가 갖고 있고 이 블록의 `.k110-global-tab-footer`(0,1,0) 는
* `!important` 여도 특이도에서 진다(문서 순서상 뒤에 있어도 진다 — 실측 계산값 11.816px).
* 그래서 ID 를 써서 (1,1,0) 으로 올렸다. ID 1개가 클래스 2개를 이기므로 (1,1,0) > (0,2,1).
*
* 대안으로 `body.k110-layout-portrait .k110-global-tab-footer` 의 `margin` 을 직접 고치는
* 길이 있으나 그 규칙은 미디어쿼리 밖 전역이라 `768×1024` 태블릿 세로까지 함께 바뀐다.
* 태블릿 세로는 기획 확인 대기(범위 밖)이므로 채택하지 않았다.
* 푸터는 `K110App.tsx` 에서 `` 의 직계 자식으로만 렌더되므로
* 자식 결합자는 구조적으로 항상 성립한다.
*/
.k110-ui > #k110GlobalTabFooter {
margin-top: 0 !important;
}
.k110-global-tab-footer .k110-feature-btn,
.k110-global-tab-footer .k110-back-btn {
height: 100% !important;
min-height: 100% !important;
}
}
/* K110 SECTION CSS-99 DISCOVERY FRAME WIDTH GUARD
Discovery must measure from the panel frame, not from status text or inner
content. Random glyph, status row, list, and controls all share the same
frame width. */
#discoverPanel .k110-panel-frame,
#discoverPanel .k110-panel-frame > .k110-panel-main,
#discoverPanel .k110-discover-box,
#discoverPanel .k110-discover-stage,
#discoverPanel .k110-discover-card,
#discoverPanel .k110-discover-random-module,
#discoverPanel .k110-discover-head,
#discoverPanel .k110-discover-existing-list,
#discoverPanel .k110-discover-bottom {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
#discoverPanel .k110-discover-box {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) var(--k110-discover-control-h);
}
#discoverPanel .k110-discover-card {
grid-template-columns: minmax(0, 1fr);
grid-template-rows:
minmax(var(--k110-discover-random-min-h, 150px), var(--k110-discover-random-h, 1fr))
var(--k110-bar-h)
calc(var(--k110-button-cluster-gap) * 2)
var(--k110-panel-line-w)
var(--k110-discover-list-h, calc(var(--k110-discover-row-h) * 2))
var(--k110-discover-after-list-gap, calc(var(--k110-button-cluster-gap) * 2));
justify-content: stretch;
justify-items: stretch;
align-content: stretch;
}
#discoverPanel .k110-discover-card > * {
width: 100%;
min-width: 0;
max-width: 100%;
justify-self: stretch;
}
#discoverPanel .k110-discover-random-module {
display: grid;
grid-template-columns: minmax(0, 1fr);
place-items: center;
position: relative;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-glyph {
font-size: var(--k110-discover-display-size);
justify-self: center;
align-self: center;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-glyph-meta {
right: 0;
align-items: flex-end;
text-align: right;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
clip-path: none;
}
#discoverPanel .k110-discover-glyph-meta,
#discoverPanel .k110-discover-meta-row,
#discoverPanel .k110-discover-meta-unicode-line,
#discoverPanel .k110-discover-meta-group-line,
#discoverPanel .k110-discover-meta-subgroup-line,
#discoverPanel .k110-discover-meta-pill {
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-glyph-meta {
justify-content: flex-end !important;
}
#discoverPanel .k110-discover-meta-row {
margin-left: auto !important;
justify-content: flex-end !important;
align-items: flex-end !important;
}
#discoverPanel .k110-discover-meta-group-line,
#discoverPanel .k110-discover-meta-unicode-line {
margin-left: auto !important;
justify-content: flex-end !important;
}
#discoverPanel .k110-discover-meta-subgroup-line {
margin-left: auto !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
justify-content: flex-end !important;
column-gap: 0 !important;
row-gap: var(--k110-button-cluster-gap) !important;
}
#discoverPanel .k110-discover-meta-subgroup-item {
max-width: 100% !important;
width: auto !important;
min-width: 0 !important;
}
#discoverPanel .k110-discover-meta-subgroup-btn {
max-width: min(220px, 42vw) !important;
min-width: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
}
#discoverPanel .k110-discover-meta-subgroup-btn .k110-c-capsule-roll-current {
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
}
#discoverPanel .k110-discover-meta-group-cluster {
justify-content: flex-end !important;
max-width: 100% !important;
}
#discoverPanel .k110-discover-meta-group-btn {
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-meta-group-btn .k110-c-capsule-switch-text {
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-meta-group-btn .k110-c-capsule-roll-current,
#discoverPanel .k110-discover-meta-group-btn .k110-c-capsule-roll-prev,
#discoverPanel .k110-discover-meta-group-btn .k110-c-capsule-roll-next {
max-width: 100% !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-head {
grid-template-columns: minmax(0, var(--k110-discover-bar-w)) calc(var(--k110-button-cluster-gap) * 2) minmax(0, 1fr);
}
#discoverPanel .k110-discover-status {
min-width: 0;
width: 100%;
max-width: 100%;
}
#discoverPanel .k110-discover-existing-list {
align-self: stretch;
justify-self: stretch;
}
#discoverPanel .k110-discover-existing-row {
--discover-status-w: 3.8em;
--discover-votes-w: calc((var(--k110-discover-vote-size) * 2) + var(--k110-button-cluster-gap));
grid-template-columns:
minmax(0, 1.3fr)
minmax(var(--discover-status-w), max-content)
minmax(0, 0.9fr)
var(--discover-votes-w);
padding-left: var(--k110-panel-content-x);
}
#discoverPanel .k110-discover-existing-korean {
color: #fff;
font-size: var(--k110-type-heading);
}
#discoverPanel .k110-discover-bottom {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--k110-button-cluster-gap);
margin: 0;
padding: var(--k110-button-inset);
border-color: rgba(255,238,0,0.58);
border-style: solid;
border-width: var(--k110-panel-line-w) var(--k110-panel-line-w) var(--k110-panel-line-w) var(--k110-panel-line-w);
box-sizing: border-box;
align-self: stretch;
overflow: hidden;
}
#discoverPanel .k110-discover-input-box,
#discoverPanel .k110-discover-button-stack,
#discoverPanel .k110-discover-register,
#discoverPanel .k110-discover-next {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
box-sizing: border-box !important;
}
#discoverPanel .k110-discover-input-box {
--discover-input-line-height: 1.18;
--discover-input-text-y: 0px;
--discover-input-text-safe-x: 12px;
--discover-input-text-safe-y: 0.14em;
align-items: center !important;
justify-items: center !important;
}
#discoverPanel .k110-discover-input-visual {
align-self: center !important;
justify-self: center !important;
overflow: visible !important;
max-height: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-button-stack {
gap: var(--k110-button-cluster-gap) !important;
align-items: stretch !important;
overflow: hidden !important;
}
#discoverPanel .k110-discover-register,
#discoverPanel .k110-discover-next {
--btn-accent: #FFEE00;
--btn-bg: rgba(0, 0, 0, 0.18);
--btn-fg: #FFEE00;
--btn-border: color-mix(in srgb, #FFEE00 58%, transparent);
--fx-color: #FFEE00;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: var(--k110-button-line-w) solid var(--btn-border) !important;
background: var(--btn-bg) !important;
color: var(--btn-fg) !important;
overflow: hidden !important;
isolation: isolate;
font-size: var(--k110-type-body) !important;
line-height: 1 !important;
text-align: center !important;
text-shadow: 0 0 8px color-mix(in srgb, #FFEE00 26%, transparent);
transform: none !important;
}
#discoverPanel .k110-discover-register::before,
#discoverPanel .k110-discover-register::after,
#discoverPanel .k110-discover-next::before,
#discoverPanel .k110-discover-next::after {
content: none !important;
display: none !important;
}
#discoverPanel .k110-discover-register {
--btn-fg: color-mix(in srgb, #FFEE00 22%, #777 78%);
--btn-border: color-mix(in srgb, #FFEE00 16%, #777 84%);
cursor: not-allowed;
text-shadow: none;
}
/*
누를 수 있을 때만 검지 커서를 준다.
이 버튼의 커서를 지배하던 규칙은 바로 위 `#discoverPanel .k110-discover-register`(1,1,0)
의 `not-allowed` 였다. 원래 활성 커서를 맡기로 한 규칙은 아래 `.has-register` 변형인데,
그 클래스를 붙이는 DOM 이 없어 도달하지 못한다. 그래서 활성 상태에서도 금지 커서가 나왔다.
`.has-register` 를 붙이는 대신 이 규칙을 두는 이유: 그 클래스는 커서 외에 노란 채움과
breathe 애니메이션까지 함께 켜서 버튼 외형이 바뀐다. 이번에 바꾸려는 것은 커서뿐이다.
`:enabled` 가 필요한 이유: 이 셀렉터를 조건 없이 두면 명시도가 (1,2,0) 으로
`.k110-c-button:disabled`(0,2,0) 를 이겨 비활성에서도 검지 커서가 된다. 비활성의
`not-allowed` 는 그 규칙이 담당하므로 여기서는 활성만 집는다.
*/
#discoverPanel .k110-discover-register:enabled {
cursor: pointer;
}
#discoverPanel .k110-discover-bottom.has-register .k110-discover-register {
--btn-fg: #000;
--btn-bg: #FFEE00;
--btn-border: #FFEE00;
cursor: pointer;
animation: k110-ui-glow-breathe 2.3s ease-in-out infinite;
}
#discoverPanel .k110-discover-next:hover,
#discoverPanel .k110-discover-bottom.has-register .k110-discover-register:hover {
background: #FFEE00 !important;
border-color: #FFEE00 !important;
color: #000 !important;
text-shadow: none !important;
box-shadow: 0 0 18px color-mix(in srgb, #FFEE00 42%, transparent) !important;
}
@media (min-width: 768px) {
#discoverPanel .k110-discover-box {
--k110-discover-glyph-y: 0px;
}
}
@media (max-width: 767px) and (orientation: portrait) {
#discoverPanel .k110-discover-box {
--k110-discover-slot-size: var(--k110-type-display);
--k110-discover-display-size: clamp(92px, 25vw, 142px);
--k110-discover-random-min-h: clamp(210px, 40svh, 360px);
--k110-discover-random-h: clamp(230px, 46svh, 420px);
--k110-discover-list-min-h: calc(var(--k110-discover-row-h) * 2);
--k110-discover-glow-blur-a: 5px;
--k110-discover-glow-blur-b: 12px;
--k110-discover-glow-blur-c: 24px;
--k110-discover-glow-blur-d: 38px;
--k110-discover-glow-alpha-a: 0.5;
--k110-discover-glow-alpha-b: 0.34;
--k110-discover-glow-alpha-c: 0.2;
--k110-discover-glow-alpha-d: 0.1;
--k110-discover-glow-saturate: 1.12;
--k110-discover-glow-brightness: 1.03;
}
#discoverPanel .k110-discover-glyph-meta {
top: 50%;
justify-content: center;
transform: translateY(-50%);
}
#discoverPanel .k110-discover-existing-row {
--discover-korean-w: 5em;
--discover-votes-w: calc((var(--k110-discover-vote-size) * 2) + var(--k110-button-cluster-gap));
grid-template-columns: minmax(0, var(--discover-korean-w)) max-content minmax(0, 1fr) var(--discover-votes-w);
column-gap: var(--k110-button-cluster-gap);
}
#discoverPanel .k110-discover-existing-votes {
margin-left: calc(var(--k110-button-cluster-gap) * 2) !important;
}
}
/* K110 MODULE: DISABLED BUTTON STATE */
.k110-c-button {
--btn-disabled-color: color-mix(in srgb, var(--btn-accent, currentColor) 50%, transparent);
--btn-disabled-pressed-color: color-mix(in srgb, var(--btn-accent, currentColor) 18%, #000 82%);
--btn-disabled-shadow: rgba(0,0,0,0.64);
--btn-disabled-x-color: var(--btn-disabled-color);
}
.k110-c-button.is-disabled,
.k110-c-button:disabled,
.k110-c-button[aria-disabled="true"] {
opacity: 1 !important;
filter: none !important;
pointer-events: auto;
cursor: not-allowed;
border-color: var(--btn-disabled-color) !important;
background:
linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.66)),
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent, currentColor) 10%, transparent), transparent 58%),
#000 !important;
color: var(--btn-disabled-color) !important;
box-shadow:
inset 0 -12px 24px color-mix(in srgb, var(--btn-accent, currentColor) 8%, transparent),
0 0 0 transparent !important;
text-shadow:
0 -0.42em 0 var(--btn-disabled-shadow),
0 0 4px color-mix(in srgb, var(--btn-accent, currentColor) 14%, transparent) !important;
}
.k110-c-button.is-disabled > *,
.k110-c-button:disabled > *,
.k110-c-button[aria-disabled="true"] > * {
position: relative;
}
.k110-c-button.is-disabled > *::after,
.k110-c-button:disabled > *::after,
.k110-c-button[aria-disabled="true"] > *::after {
content: "";
position: absolute;
inset: -0.08em;
z-index: 6;
pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 44%, rgba(0,0,0,0) 74%);
opacity: 1;
}
.k110-c-button.is-disabled *,
.k110-c-button:disabled *,
.k110-c-button[aria-disabled="true"] * {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
border-color: currentColor !important;
text-shadow: inherit !important;
filter: none !important;
transition: opacity 90ms ease;
}
#authMainBtn.k110-c-button:disabled .k110-front-text {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: inherit !important;
}
.k110-c-button.is-disabled::after,
.k110-c-button:disabled::after,
.k110-c-button[aria-disabled="true"]::after {
content: none !important;
display: none !important;
}
.k110-c-button.is-disabled:active,
.k110-c-button:disabled:active,
.k110-c-button[aria-disabled="true"]:active,
.k110-c-button.is-disabled-pressing {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
text-shadow: none !important;
transform: none !important;
box-shadow:
inset 0 0 0 calc(var(--btn-line-w, var(--k110-line-1)) * 3) var(--btn-disabled-color),
0 0 0 transparent !important;
}
.k110-c-button.is-disabled:active::before,
.k110-c-button:disabled:active::before,
.k110-c-button[aria-disabled="true"]:active::before,
.k110-c-button.is-disabled-pressing::before,
.k110-c-button.is-disabled:active::after,
.k110-c-button:disabled:active::after,
.k110-c-button[aria-disabled="true"]:active::after,
.k110-c-button.is-disabled-pressing::after {
content: none !important;
display: none !important;
}
.k110-c-button.is-disabled:active::before,
.k110-c-button:disabled:active::before,
.k110-c-button[aria-disabled="true"]:active::before,
.k110-c-button.is-disabled-pressing::before {
content: none !important;
display: none !important;
}
.k110-c-button.is-disabled:active *,
.k110-c-button:disabled:active *,
.k110-c-button[aria-disabled="true"]:active *,
.k110-c-button.is-disabled-pressing * {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
border-color: transparent !important;
text-shadow: none !important;
opacity: 0 !important;
}
.k110-disabled-x-overlay {
position: absolute !important;
inset: 0 !important;
z-index: 20 !important;
display: block !important;
pointer-events: none !important;
overflow: visible !important;
color: var(--btn-disabled-x-color) !important;
-webkit-text-fill-color: currentColor !important;
opacity: 0 !important;
filter: none !important;
text-shadow: none !important;
border: 0 !important;
transition: opacity 45ms linear !important;
}
.k110-disabled-x-overlay::before,
.k110-disabled-x-overlay::after {
content: none !important;
display: none !important;
}
.k110-disabled-x-overlay svg {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
.k110-disabled-x-overlay line {
stroke: currentColor !important;
stroke-width: var(--k110-line-1) !important;
vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;
stroke-linecap: butt;
opacity: 1 !important;
}
.k110-c-button.is-disabled-pressing .k110-disabled-x-overlay,
.k110-c-button.is-disabled:active .k110-disabled-x-overlay,
.k110-c-button:disabled:active .k110-disabled-x-overlay,
.k110-c-button[aria-disabled="true"]:active .k110-disabled-x-overlay {
opacity: 1 !important;
color: var(--btn-disabled-x-color) !important;
-webkit-text-fill-color: currentColor !important;
border-color: transparent !important;
}
.k110-c-button.is-disabled-pressing .k110-disabled-x-overlay *,
.k110-c-button.is-disabled:active .k110-disabled-x-overlay *,
.k110-c-button:disabled:active .k110-disabled-x-overlay *,
.k110-c-button[aria-disabled="true"]:active .k110-disabled-x-overlay * {
opacity: 1 !important;
color: currentColor !important;
-webkit-text-fill-color: currentColor !important;
border-color: transparent !important;
}
.k110-c-button.is-disabled .k110-c-capsule,
.k110-c-button:disabled .k110-c-capsule,
.k110-c-button[aria-disabled="true"] .k110-c-capsule {
--capsule-accent: currentColor !important;
--capsule-bg: transparent !important;
--capsule-fg: currentColor !important;
opacity: 1 !important;
filter: none !important;
pointer-events: none;
background: transparent !important;
border-color: currentColor !important;
color: inherit !important;
box-shadow: none !important;
}
.k110-c-button.is-disabled .k110-c-capsule *,
.k110-c-button:disabled .k110-c-capsule *,
.k110-c-button[aria-disabled="true"] .k110-c-capsule * {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
}
#translatePanel #randomizeBtn.k110-c-button:disabled .k110-translate-shuffle-group,
#translatePanel #randomizeBtn.k110-c-button.is-disabled .k110-translate-shuffle-group,
#translatePanel #randomizeBtn.k110-c-button[aria-disabled="true"] .k110-translate-shuffle-group {
color: inherit !important;
line-height: 1 !important;
}
#translatePanel .k110-translate-shuffle-group,
#translatePanel .k110-translate-shuffle-label {
line-height: 1 !important;
}
.k110-c-button.is-enabled-flash {
animation: k110ButtonEnableFlash 520ms ease-out 1;
}
/* K110 MODULE: DESIGN GLYPH RAIL REBUILD
Final authority for design glyph groups. Vertical scroll belongs to the
grid, horizontal scroll belongs to each glyph rail. */
#designPanel #glyphGrid.k110-glyph-grid {
--k110-glyph-scroll-gutter: clamp(18px, 2vw, 28px);
--k110-design-glyph-button-h: 64px;
--k110-design-glyph-button-r: 8px;
--k110-design-glyph-unit-w: 42px;
--k110-design-glyph-button-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-head-gap: calc(var(--k110-gap, 2px) * 6);
--k110-design-glyph-group-gap: calc(var(--k110-gap, 2px) * 8);
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-content: start !important;
column-gap: calc(var(--k110-gap, 2px) * 8) !important;
row-gap: var(--k110-design-glyph-group-gap) !important;
min-width: 0 !important;
width: 100% !important;
padding: calc(var(--k110-gap, 2px) * 3) var(--k110-glyph-scroll-gutter) 38px 0 !important;
margin: 0 calc(var(--k110-glyph-scroll-gutter) * -1) 0 0 !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
outline: 0 !important;
background: rgba(0,0,0,0.75) !important;
box-shadow: none !important;
overflow-x: visible !important;
overflow-y: auto !important;
touch-action: pan-y !important;
scrollbar-gutter: stable !important;
scrollbar-width: thin !important;
scrollbar-color: color-mix(in srgb, var(--k110-panel-primary) 78%, transparent) transparent !important;
}
#designPanel #glyphGrid.k110-glyph-grid::-webkit-scrollbar {
width: 4px !important;
height: 0 !important;
}
#designPanel #glyphGrid.k110-glyph-grid::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none !important;
}
#designPanel #glyphGrid.k110-glyph-grid::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: color-mix(in srgb, var(--k110-panel-primary) 82%, transparent) !important;
box-shadow:
0 0 8px color-mix(in srgb, var(--k110-panel-primary) 58%, transparent),
0 0 18px color-mix(in srgb, var(--k110-panel-primary) 24%, transparent) !important;
}
#designPanel .glyph-group {
display: grid !important;
grid-template-columns: var(--k110-design-glyph-button-h) minmax(0, 1fr) !important;
column-gap: var(--k110-design-glyph-head-gap) !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
outline: 0 !important;
}
#designPanel .glyph-group.has-left::before,
#designPanel .glyph-group.has-right::after {
content: none !important;
display: none !important;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
width: var(--k110-design-glyph-button-h) !important;
height: var(--k110-design-glyph-button-h) !important;
min-width: var(--k110-design-glyph-button-h) !important;
min-height: var(--k110-design-glyph-button-h) !important;
align-self: center !important;
justify-self: stretch !important;
box-sizing: border-box !important;
overflow: visible !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
align-self: center !important;
gap: var(--k110-design-glyph-button-gap) !important;
row-gap: var(--k110-design-glyph-button-gap) !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: calc(var(--k110-design-glyph-button-h) + 32px) !important;
box-sizing: border-box !important;
padding: 16px 34px 22px calc(var(--k110-gap, 2px) * 2) !important;
margin: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
outline: 0 !important;
background: transparent !important;
overflow-x: auto !important;
overflow-y: visible !important;
touch-action: pan-x pan-y !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
overscroll-behavior-y: auto !important;
scroll-snap-type: x proximity !important;
scroll-behavior: smooth !important;
scrollbar-width: none !important;
cursor: grab !important;
user-select: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#designPanel .glyph-scroll::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
#designPanel .glyph-scroll.is-dragging {
cursor: grabbing !important;
scroll-behavior: auto !important;
}
#designPanel .glyph-item {
flex: 0 0 auto !important;
align-self: center !important;
width: var(--glyph-button-w, max(var(--k110-design-glyph-button-h), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w)))) !important;
min-width: var(--glyph-button-w, max(var(--k110-design-glyph-button-h), calc(var(--glyph-units, 1) * var(--k110-design-glyph-unit-w)))) !important;
max-width: none !important;
height: var(--k110-design-glyph-button-h) !important;
min-height: var(--k110-design-glyph-button-h) !important;
border-radius: var(--k110-design-glyph-button-r) !important;
overflow: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
scroll-snap-align: start !important;
}
#designPanel .glyph-item.is-square-glyph {
width: var(--k110-design-glyph-button-h) !important;
min-width: var(--k110-design-glyph-button-h) !important;
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel #glyphGrid.k110-glyph-grid {
--k110-design-glyph-button-h: clamp(48px, 14.8vw, 64px);
--k110-design-glyph-unit-w: calc(var(--k110-design-glyph-button-h) * 0.72);
--k110-design-glyph-button-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-head-gap: calc(var(--k110-gap, 2px) * 5);
--k110-design-glyph-group-gap: calc(var(--k110-gap, 2px) * 5);
--k110-glyph-scroll-gutter: 18px;
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
row-gap: var(--k110-design-glyph-group-gap) !important;
padding-top: calc(var(--k110-gap, 2px) * 3) !important;
padding-right: var(--k110-glyph-scroll-gutter) !important;
padding-bottom: 32px !important;
margin-right: calc(var(--k110-glyph-scroll-gutter) * -1) !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
min-height: calc(var(--k110-design-glyph-button-h) + 28px) !important;
padding-top: 12px !important;
padding-right: 24px !important;
padding-bottom: 18px !important;
padding-left: calc(var(--k110-gap, 2px) * 2) !important;
}
}
/* K110 MODULE: TERMINAL STATUS FINAL AUTHORITY
Status windows use one parameterized background pattern layer. Pattern
choice lives in k110-c-pattern-* classes; glow is a separate effect layer. */
.k110-panel .k110-c-terminal-status,
#translatePanel .k110-translate-status-line,
#reviewCard #reviewStatus,
#designPanel #designStatus,
#discoverPanel .k110-discover-status {
--status-accent: var(--k110-panel-primary, currentColor);
--status-bg: #000;
--status-fg: var(--status-accent);
--status-pattern-accent: var(--status-accent);
--status-pattern-alpha: 16%;
--status-pattern-gap: var(--k110-status-pattern-gap, 4px);
--status-pattern-flow-x: calc(var(--status-pattern-gap) * 5);
--status-pattern-flow-y: calc(var(--status-pattern-gap) * 3);
--status-effect-image: none;
--status-effect-opacity: 0;
--status-effect-animation: none;
--status-pattern-left: 0px;
--status-pattern-right: 0px;
--status-justify: flex-start;
--status-text-align: left;
--status-font-size: var(--k110-bar-font-size, var(--k110-type-caption));
--status-lines: 1;
--status-line-height: 1.28;
--status-pad-y: 0px;
position: relative !important;
overflow: hidden !important;
isolation: isolate;
background: var(--status-bg) !important;
background-color: var(--status-bg) !important;
background-image: none !important;
background-size: auto !important;
background-position: 0 0;
animation: none !important;
border-radius: 0 !important;
color: var(--status-fg) !important;
font-size: var(--status-font-size) !important;
font-weight: 900 !important;
line-height: var(--status-line-height) !important;
min-height: calc((var(--status-font-size) * var(--status-line-height) * var(--status-lines)) + (var(--status-pad-y) * 2)) !important;
text-shadow: 0 0 7px color-mix(in srgb, var(--status-accent) 34%, transparent) !important;
}
.k110-panel .k110-c-terminal-status.k110-c-pattern-diagonal,
.k110-panel .k110-c-terminal-status.k110-c-pattern-dots,
.k110-panel .k110-c-terminal-status.k110-c-pattern-none,
#translatePanel .k110-translate-status-line.k110-c-pattern-diagonal,
#translatePanel .k110-translate-status-line.k110-c-pattern-dots,
#translatePanel .k110-translate-status-line.k110-c-pattern-none,
#reviewCard #reviewStatus.k110-c-pattern-diagonal,
#reviewCard #reviewStatus.k110-c-pattern-dots,
#reviewCard #reviewStatus.k110-c-pattern-none,
#designPanel #designStatus.k110-c-pattern-diagonal,
#designPanel #designStatus.k110-c-pattern-dots,
#designPanel #designStatus.k110-c-pattern-none,
#discoverPanel .k110-discover-status.k110-c-pattern-diagonal,
#discoverPanel .k110-discover-status.k110-c-pattern-dots,
#discoverPanel .k110-discover-status.k110-c-pattern-none {
background-image: none !important;
background-size: auto !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
animation: none !important;
}
.k110-panel .k110-c-terminal-status > .k110-c-cell-bg,
.k110-panel .k110-c-terminal-status > .k110-c-pattern,
#translatePanel .k110-translate-status-line > .k110-c-cell-bg,
#translatePanel .k110-translate-status-line > .k110-c-pattern,
#reviewCard #reviewStatus > .k110-c-cell-bg,
#reviewCard #reviewStatus > .k110-c-pattern,
#designPanel #designStatus > .k110-c-cell-bg,
#designPanel #designStatus > .k110-c-pattern,
#discoverPanel .k110-discover-status > .k110-c-cell-bg,
#discoverPanel .k110-discover-status > .k110-c-pattern {
display: none !important;
content: none !important;
background: none !important;
animation: none !important;
}
.k110-panel .k110-c-terminal-status::before,
#translatePanel .k110-translate-status-line::before,
#reviewCard #reviewStatus::before,
#designPanel #designStatus::before,
#discoverPanel .k110-discover-status::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset:
calc(var(--status-pattern-gap) * -2)
calc((var(--status-pattern-gap) * -2) + var(--status-pattern-right, 0px))
calc(var(--status-pattern-gap) * -2)
calc((var(--status-pattern-gap) * -2) + var(--status-pattern-left, 0px)) !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: var(--status-pattern-image) !important;
background-size: var(--status-pattern-size) !important;
background-position: 0 0;
background-repeat: repeat !important;
animation: var(--status-pattern-animation) !important;
opacity: 1 !important;
will-change: background-position;
transform: none !important;
}
.k110-panel .k110-c-terminal-status::after,
#translatePanel .k110-translate-status-line::after,
#reviewCard #reviewStatus::after,
#designPanel #designStatus::after,
#discoverPanel .k110-discover-status::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
background: var(--status-effect-image) !important;
opacity: var(--status-effect-opacity) !important;
animation: var(--status-effect-animation) !important;
transform: none;
}
.k110-panel .k110-c-terminal-status.is-status-active,
#translatePanel .k110-translate-status-line.is-status-active,
#reviewCard #reviewStatus.is-status-active,
#designPanel #designStatus.is-status-active,
#discoverPanel .k110-discover-status.is-status-active {
--status-effect-image:
linear-gradient(
0deg,
color-mix(in srgb, var(--status-accent) 34%, transparent) 0%,
color-mix(in srgb, var(--status-accent) 18%, transparent) 24%,
color-mix(in srgb, var(--status-accent) 7%, transparent) 58%,
rgba(0,0,0,0) 100%
);
--status-effect-opacity: 1;
--status-effect-animation: k110StatusEffectGlow 1.15s ease-out both;
}
.k110-panel .k110-c-terminal-status > *,
#translatePanel .k110-translate-status-line > *,
#reviewCard #reviewStatus > *,
#designPanel #designStatus > *,
#discoverPanel .k110-discover-status > * {
position: relative;
z-index: 1;
}
#reviewCard #reviewStatus {
--status-lines: var(--k110-review-status-lines, 3);
--status-pad-y: var(--k110-review-status-pad-y, 8px);
--status-justify: flex-end;
--status-text-align: right;
align-items: flex-end !important;
justify-content: flex-end !important;
text-align: right !important;
padding: var(--k110-review-status-pad-y, 8px) 12px !important;
}
#reviewCard.is-multi.is-rank-status-compact #reviewStatus {
justify-content: center !important;
padding-top: calc(var(--k110-gap, 2px) * 2) !important;
padding-bottom: calc(var(--k110-gap, 2px) * 2) !important;
overflow: hidden !important;
}
#reviewCard #reviewStatus .k110-review-status-line,
#reviewCard #reviewStatus .k110-review-status-typed,
#reviewCard #reviewStatus .k110-review-status-tip-body {
font-size: var(--status-font-size) !important;
line-height: 1.28 !important;
}
#designPanel #designStatus,
#discoverPanel .k110-discover-status,
#translatePanel .k110-translate-status-line {
font-size: var(--status-font-size) !important;
}
#designPanel #designStatus .k110-design-status-typed,
#discoverPanel .k110-discover-status-text,
#translatePanel .k110-translate-status-text {
font-size: inherit !important;
line-height: 1.28 !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#translatePanel .k110-translate-status-text.is-typing::after {
content: none !important;
display: none !important;
}
.k110-c-terminal-status__line {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: var(--status-justify, flex-start);
text-align: var(--status-text-align, left);
max-width: 100%;
min-width: 0;
line-height: var(--status-line-height, 1.28);
}
.k110-c-terminal-status__typed {
min-width: 0;
max-width: 100%;
overflow: visible;
white-space: inherit;
}
.k110-c-terminal-status__cursor {
display: inline-block;
flex: 0 0 auto;
width: max(3px, 0.18em);
height: 1em;
margin-left: 0.18em;
background: currentColor;
box-shadow: 0 0 8px color-mix(in srgb, currentColor 56%, transparent);
animation-name: k110StatusCursorBlink !important;
animation-duration: 720ms !important;
animation-timing-function: steps(1, end) !important;
animation-iteration-count: infinite !important;
animation-fill-mode: none !important;
animation-play-state: running !important;
}
.k110-c-terminal-status__cursor.is-hidden {
display: none;
}
.k110-hide-status-cursors .k110-c-terminal-status__cursor,
.k110-hide-status-cursors .k110-review-status-cursor,
.k110-hide-status-cursors .k110-design-status-cursor,
.k110-hide-status-cursors .k110-discover-status-cursor {
display: none !important;
}
#reviewCard #reviewStatus .k110-review-status-cursor,
#designPanel #designStatus .k110-design-status-cursor,
#discoverPanel .k110-discover-status-cursor {
display: inline-block !important;
flex: 0 0 auto !important;
width: max(3px, 0.18em) !important;
height: 1em !important;
margin-left: 0.18em !important;
background: currentColor !important;
box-shadow: 0 0 8px color-mix(in srgb, currentColor 56%, transparent) !important;
animation-name: k110StatusCursorBlink !important;
animation-duration: 720ms !important;
animation-timing-function: steps(1, end) !important;
animation-iteration-count: infinite !important;
animation-fill-mode: none !important;
animation-play-state: running !important;
opacity: 1 !important;
visibility: visible !important;
}
#reviewCard #reviewStatus .k110-review-status-typed {
animation: none !important;
clip-path: none !important;
}
#reviewCard #reviewStatus .k110-review-status-line,
#reviewCard #reviewStatus .k110-review-status-typed,
#reviewCard #reviewStatus .k110-review-status-tip-body {
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
#reviewCard #reviewStatus .k110-review-status-line {
align-self: flex-end !important;
justify-content: flex-end !important;
text-align: right !important;
}
#reviewCard.is-multi.is-rank-status-compact #reviewStatus .k110-review-status-line,
#reviewCard.is-multi.is-rank-status-compact #reviewStatus .k110-review-status-typed {
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: clip !important;
}
.k110-panel .k110-c-terminal-status .k110-c-terminal-status__track::before,
.k110-panel .k110-c-terminal-status .k110-c-terminal-status__track::after,
#translatePanel .k110-translate-status-line .k110-c-terminal-status__track::before,
#translatePanel .k110-translate-status-line .k110-c-terminal-status__track::after,
#reviewCard #reviewStatus .k110-c-terminal-status__track::before,
#reviewCard #reviewStatus .k110-c-terminal-status__track::after,
#designPanel #designStatus .k110-c-terminal-status__track::before,
#designPanel #designStatus .k110-c-terminal-status__track::after,
#discoverPanel .k110-discover-status .k110-discover-status-track::before,
#discoverPanel .k110-discover-status .k110-discover-status-track::after {
content: none !important;
display: none !important;
background: none !important;
animation: none !important;
}
#discoverPanel .k110-discover-status .k110-discover-status-track {
justify-content: flex-start !important;
}
#discoverPanel .k110-discover-status .k110-discover-status-text {
flex: 0 1 auto !important;
width: auto !important;
max-width: calc(100% - 2em) !important;
}
.k110-c-terminal-status.is-status-complete {
animation: k110StatusCompleteFlash 520ms ease-out 1;
}
#translatePanel .k110-translate-status-line {
--status-pattern-right: calc(25% + var(--k110-button-cluster-gap));
--status-lines: 1;
}
.k110-hide-status-cursors .k110-c-terminal-status__cursor,
.k110-hide-status-cursors .k110-review-status-cursor,
.k110-hide-status-cursors .k110-design-status-cursor,
.k110-hide-status-cursors .k110-discover-status-cursor {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
animation: none !important;
}
.k110-c-cell > .k110-c-cell-bg,
.k110-c-cell > .k110-c-pattern,
.k110-panel-bar > .k110-panel-bar-dots {
inset: var(--cell-pattern-top, 0px) var(--cell-pattern-right, 0px) var(--cell-pattern-bottom, 0px) var(--cell-pattern-left, 0px) !important;
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
box-sizing: border-box !important;
background-origin: border-box !important;
background-clip: border-box !important;
clip-path: inset(0) !important;
}
.k110-panel-bar > .k110-panel-bar-dots {
inset: var(--cell-pattern-top, 0px) var(--k110-bar-pattern-right, var(--cell-pattern-right, 0px)) var(--cell-pattern-bottom, 0px) var(--cell-pattern-left, 0px) !important;
}
@keyframes k110StatusCursorBlink {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0; }
}
@keyframes k110StatusEffectGlow {
0% {
opacity: 0;
transform: translateY(18%);
filter: blur(10px);
}
22% {
opacity: 0.92;
transform: translateY(4%);
filter: blur(7px);
}
58% {
opacity: 0.54;
transform: translateY(0);
filter: blur(9px);
}
100% {
opacity: 0;
transform: translateY(-4%);
filter: blur(13px);
}
}
@keyframes k110StatusCompleteFlash {
0% {
box-shadow: inset 0 0 0 color-mix(in srgb, var(--status-accent) 0%, transparent);
filter: brightness(1);
}
28% {
box-shadow:
inset 0 0 18px color-mix(in srgb, var(--status-accent) 24%, transparent),
0 0 14px color-mix(in srgb, var(--status-accent) 16%, transparent);
filter: brightness(1.18);
}
100% {
box-shadow: inset 0 0 0 color-mix(in srgb, var(--status-accent) 0%, transparent);
filter: brightness(1);
}
}
/* K110 FEATURE: DISCOVERY BUTTON MODULE ALIGNMENT
Discovery reuses the common button, disabled, burst, and red-action
modules. Layout-specific rules only define slot sizing and color tokens. */
#discoverPanel .k110-discover-existing-votes {
width: var(--discover-votes-w) !important;
margin-left: 0 !important;
gap: var(--k110-button-cluster-gap) !important;
justify-self: end !important;
justify-content: flex-end !important;
align-items: center !important;
}
#discoverPanel .k110-discover-vote.k110-c-red-action {
--red-action-size: var(--k110-discover-vote-size);
--red-action-overlap: 0px;
--red-action-icon-font-size: calc(var(--red-action-size) * 0.68);
--red-action-icon-scale: 1;
--red-action-icon-shift-y: -0.01em;
position: relative !important;
top: auto !important;
right: auto !important;
flex: 0 0 var(--k110-discover-vote-size) !important;
width: var(--k110-discover-vote-size) !important;
height: var(--k110-discover-vote-size) !important;
min-width: var(--k110-discover-vote-size) !important;
min-height: var(--k110-discover-vote-size) !important;
max-width: var(--k110-discover-vote-size) !important;
max-height: var(--k110-discover-vote-size) !important;
border: var(--k110-line-1) solid var(--red-action-color) !important;
background: var(--k110-bg-black) !important;
color: var(--red-action-color) !important;
box-shadow:
inset 0 -10px 18px color-mix(in srgb, var(--red-action-color) 18%, transparent),
0 0 9px color-mix(in srgb, var(--red-action-color) 18%, transparent) !important;
opacity: 1 !important;
filter: none !important;
}
#discoverPanel .k110-discover-vote.k110-vote-up {
--red-action-color: var(--k110-color-green);
}
#discoverPanel .k110-discover-vote.k110-vote-down {
--red-action-color: var(--k110-color-red);
}
#discoverPanel .k110-discover-vote.k110-c-red-action::before {
color: currentColor !important;
text-shadow:
0 0 7px color-mix(in srgb, var(--red-action-color) 54%, transparent),
0 0 15px color-mix(in srgb, var(--red-action-color) 28%, transparent) !important;
}
#discoverPanel .k110-discover-vote.k110-c-red-action:hover {
background: var(--red-action-color) !important;
border-color: var(--red-action-color) !important;
color: var(--k110-bg-black) !important;
box-shadow:
0 0 14px color-mix(in srgb, var(--red-action-color) 46%, transparent),
0 0 28px color-mix(in srgb, var(--red-action-color) 22%, transparent) !important;
}
#discoverPanel .k110-discover-vote.k110-c-red-action:hover::before {
color: var(--k110-bg-black) !important;
text-shadow: none !important;
}
#discoverPanel .k110-discover-vote.k110-c-red-action.is-disabled,
#discoverPanel .k110-discover-vote.k110-c-red-action:disabled,
#discoverPanel .k110-discover-vote.k110-c-red-action[aria-disabled="true"] {
color: color-mix(in srgb, var(--red-action-color) 34%, #777 66%) !important;
border-color: currentColor !important;
background:
linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.7)),
#000 !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
#discoverPanel .k110-discover-register,
#discoverPanel .k110-discover-next {
--btn-accent: #FFEE00;
--btn-bg: rgba(0,0,0,0.88);
--btn-fg: #FFEE00;
--btn-border: color-mix(in srgb, #FFEE00 76%, transparent);
--fx-color: #FFEE00;
--fx-burst-color: #FFEE00;
--k110-command-fill: #FFEE00;
--k110-command-glow-soft: rgba(255,238,0,0.2);
--k110-command-glow-strong: rgba(255,238,0,0.52);
--k110-glow-dim:
inset 0 -14px 24px rgba(255,238,0,0.14),
0 0 8px rgba(255,238,0,0.16);
--k110-glow-bright:
inset 0 -22px 34px rgba(255,238,0,0.28),
0 0 22px rgba(255,238,0,0.42),
0 0 44px rgba(255,238,0,0.18);
border: var(--k110-button-line-w) solid var(--btn-border) !important;
background:
linear-gradient(0deg, rgba(255,238,0,0.08), rgba(0,0,0,0) 62%),
var(--btn-bg) !important;
color: var(--btn-fg) !important;
box-shadow: var(--k110-glow-dim) !important;
overflow: hidden !important;
transform: none !important;
animation: k110-ui-glow-breathe var(--k110-breathe-speed, 3.1s) ease-in-out infinite;
}
#discoverPanel .k110-discover-register.is-disabled,
#discoverPanel .k110-discover-register[aria-disabled="true"] {
animation: none !important;
border-color: var(--btn-disabled-color) !important;
background:
linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.66)),
linear-gradient(0deg, color-mix(in srgb, #FFEE00 10%, transparent), transparent 58%),
#000 !important;
color: var(--btn-disabled-color) !important;
box-shadow:
inset 0 -12px 24px color-mix(in srgb, #FFEE00 8%, transparent),
0 0 0 transparent !important;
text-shadow:
0 -0.42em 0 rgba(0,0,0,0.64),
0 0 4px color-mix(in srgb, #FFEE00 14%, transparent) !important;
}
#discoverPanel .k110-discover-next.is-command-burst,
#discoverPanel .k110-discover-register.is-command-burst {
animation: none !important;
}
#discoverPanel .k110-discover-register.k110-fx-burst-vars.is-command-burst::after,
#discoverPanel .k110-discover-next.k110-fx-burst-vars.is-command-burst::after {
content: "" !important;
display: block !important;
animation: k110FxBurstScale var(--fx-burst-duration, 520ms) ease-out both !important;
}
#discoverPanel .k110-discover-bottom.has-register .k110-discover-register:not(.is-disabled) {
background:
linear-gradient(0deg, rgba(255,255,255,0.22), rgba(255,238,0,0.96) 48%, rgba(255,238,0,0.72)),
#FFEE00 !important;
color: #000 !important;
border-color: #FFEE00 !important;
}
@keyframes k110ButtonEnableFlash {
0% {
box-shadow:
inset 0 -12px 24px color-mix(in srgb, var(--btn-accent, currentColor) 16%, transparent),
0 0 0 color-mix(in srgb, var(--btn-accent, currentColor) 0%, transparent);
}
38% {
box-shadow:
inset 0 -18px 34px color-mix(in srgb, var(--btn-accent, currentColor) 38%, transparent),
0 0 24px color-mix(in srgb, var(--btn-accent, currentColor) 58%, transparent);
}
100% {
box-shadow:
inset 0 -12px 24px color-mix(in srgb, var(--btn-accent, currentColor) 14%, transparent),
0 0 8px color-mix(in srgb, var(--btn-accent, currentColor) var(--k110-button-glow-alpha), transparent);
}
}
/* K110 MODULE: MOBILE CUSTOM PASTE BUBBLE
Mobile paste is handled by this panel-colored bubble because the keyboard
scroll lock intentionally prevents native long-press browser UI drift. */
.k110-custom-paste-bubble {
--paste-accent: var(--k110-panel-primary, var(--k110-color-green));
--paste-gap: 4px;
position: fixed;
left: 0;
top: 0;
z-index: 32000;
display: none;
transform: translate(-50%, calc(-100% - var(--paste-gap)));
pointer-events: none;
touch-action: none;
user-select: none;
-webkit-user-select: none;
isolation: isolate;
filter:
drop-shadow(0 0 8px color-mix(in srgb, var(--paste-accent) 46%, transparent))
drop-shadow(0 0 18px color-mix(in srgb, var(--paste-accent) 22%, transparent));
}
.k110-custom-paste-bubble.is-active {
display: block;
pointer-events: auto;
animation: k110PasteBubbleIn 150ms ease-out both;
}
.k110-custom-paste-bubble::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 10px;
height: 10px;
transform: translateX(-50%) rotate(45deg);
background: rgba(0,0,0,0.92);
border-right: var(--k110-line-1, 1px) solid var(--paste-accent);
border-bottom: var(--k110-line-1, 1px) solid var(--paste-accent);
box-shadow: none;
z-index: 0;
}
.k110-custom-paste-bubble__button.k110-c-button {
--btn-accent: var(--paste-accent);
--btn-bg: rgba(0,0,0,0.92);
--btn-fg: var(--paste-accent);
--btn-border: var(--paste-accent);
--fx-color: var(--paste-accent);
min-height: 34px;
padding: 7px 14px;
border-width: var(--k110-line-1, 1px) !important;
border-radius: 10px !important;
background:
linear-gradient(0deg, color-mix(in srgb, var(--paste-accent) 12%, transparent), rgba(0,0,0,0) 62%),
var(--btn-bg) !important;
color: var(--btn-fg) !important;
font-size: var(--k110-font-caption, 14px);
font-weight: 800;
line-height: 1;
position: relative;
z-index: 1;
box-shadow:
inset 0 -10px 18px color-mix(in srgb, var(--paste-accent) 12%, transparent),
0 0 0 transparent !important;
}
.k110-custom-paste-bubble__button .k110-front-text {
position: relative;
z-index: 3;
color: inherit;
-webkit-text-fill-color: currentColor;
}
.k110-custom-paste-bubble__button:hover,
.k110-custom-paste-bubble__button:focus-visible {
background:
linear-gradient(0deg, color-mix(in srgb, var(--paste-accent) 32%, transparent), color-mix(in srgb, var(--paste-accent) 16%, transparent)),
rgba(0,0,0,0.92) !important;
box-shadow:
inset 0 -12px 24px color-mix(in srgb, var(--paste-accent) 24%, transparent),
0 0 14px color-mix(in srgb, var(--paste-accent) 42%, transparent) !important;
}
@keyframes k110PasteBubbleIn {
0% {
opacity: 0;
transform: translate(-50%, calc(-100% - 1px)) scale(0.96);
}
100% {
opacity: 1;
transform: translate(-50%, calc(-100% - var(--paste-gap))) scale(1);
}
}
/* K110 SECTION CSS-99 PANEL ROW EDGE AUTHORITY
Design glyph rail and discovery list use the shared transparent-row rule:
no left/right panel edge is drawn in the row itself. Edged rows above and
below remain responsible for their horizontal dividers. */
#designPanel > .k110-panel-frame,
#designPanel > .k110-panel-frame > .k110-panel-main,
#designPanel > .k110-panel-frame > .k110-panel-main > .k110-box,
#designPanel .k110-design-body {
overflow: visible !important;
}
#designPanel > .k110-panel-frame > .k110-panel-main {
border-left-width: 0 !important;
border-right-width: 0 !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}
#designPanel .k110-design-output-wrap.k110-c-panel-row-edge {
--panel-row-line-color: rgba(0,229,255,0.42);
border-left: var(--k110-panel-line-w) solid var(--panel-row-line-color) !important;
border-right: var(--k110-panel-line-w) solid var(--panel-row-line-color) !important;
border-bottom: var(--k110-panel-line-w) solid rgba(0,229,255,0.62) !important;
z-index: var(--k110-panel-row-edge-z, 2);
}
#designPanel #glyphGrid.k110-c-panel-row-transparent {
border-left-width: 0 !important;
border-right-width: 0 !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
outline: 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
z-index: var(--k110-panel-row-transparent-z, 1);
}
#designPanel #glyphGrid.k110-c-panel-row-transparent .glyph-scroll,
#designPanel #glyphGrid.k110-c-panel-row-transparent .glyph-group,
#designPanel #glyphGrid.k110-c-panel-row-transparent .glyph-button,
#designPanel #glyphGrid.k110-c-panel-row-transparent .glyph-group-header {
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#designPanel #designStatus,
#designPanel .k110-input-col {
z-index: var(--k110-panel-row-edge-z, 2);
}
#discoverPanel #discoverExistingList.k110-c-panel-row-transparent {
border-left-width: 0 !important;
border-right-width: 0 !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent {
align-self: stretch;
justify-self: stretch;
width: 100%;
height: 100%;
overflow: visible !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent .k110-discover-glyph {
font-size: var(--k110-discover-display-size) !important;
z-index: 8 !important;
white-space: nowrap !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
contain: none !important;
}
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent .k110-discover-glyph-grid {
z-index: 1 !important;
overflow: visible !important;
}
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent .k110-grid-label-width {
min-width: max-content;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
color: rgba(210,210,210,0.78) !important;
z-index: 4 !important;
}
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent .k110-grid-label-baseline {
z-index: 4 !important;
}
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent .k110-discover-glyph-meta {
z-index: 9 !important;
right: 0 !important;
top: 50%;
transform: translateY(-50%);
max-height: calc(100% - (var(--k110-button-cluster-gap, 2px) * 2));
overflow-x: visible !important;
align-items: flex-end !important;
justify-content: center !important;
}
#discoverPanel .k110-discover-stage,
#discoverPanel .k110-discover-card,
#discoverPanel .k110-discover-random-module,
#discoverPanel .k110-discover-glyph,
#discoverPanel .k110-discover-glyph-grid {
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
}
/* K110 SECTION CSS-99 DISCOVERY RANDOM GLYPH NO-MASK AUTHORITY
Random alien glyphs are a Discover-only transparent row. The glyph and its
metric grid may overflow the row while still using the measured position and
width. Keep this scoped to Discover so shared panel/grid modules are not
changed for other tabs. */
#discoverPanel.k110-panel.is-active,
#discoverPanel > .k110-panel-frame,
#discoverPanel > .k110-panel-frame > .k110-panel-main,
#discoverPanel > .k110-panel-frame > .k110-panel-main > .k110-discover-box,
#discoverPanel .k110-discover-stage,
#discoverPanel .k110-discover-card,
#discoverPanel .k110-discover-random-module,
#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent {
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
contain: none !important;
}
#discoverPanel .k110-discover-random-module .k110-discover-glyph,
#discoverPanel .k110-discover-random-module .k110-discover-glyph-grid,
#discoverPanel .k110-discover-random-module .k110-grid-label-width,
#discoverPanel .k110-discover-random-module .k110-grid-label-baseline {
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
clip-path: none !important;
contain: none !important;
}
#discoverPanel .k110-discover-random-module .k110-discover-glyph {
z-index: 8 !important;
white-space: nowrap !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
animation:
discoverGlyphArrive 0.72s cubic-bezier(0.15, 0.95, 0.26, 1.15) both,
k110DiscoverGlyphColorRoll var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-3)) linear infinite !important;
}
#discoverPanel .k110-discover-random-module .k110-discover-glyph-grid {
z-index: 1 !important;
}
#discoverPanel .k110-discover-stage.is-glow-white .k110-discover-random-module .k110-discover-glyph {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background-image: none !important;
animation: discoverGlyphArrive 0.72s cubic-bezier(0.15, 0.95, 0.26, 1.15) both !important;
}
#discoverPanel .k110-discover-stage.is-exiting .k110-discover-random-module .k110-discover-glyph {
animation: discoverGlyphExitLeft 0.34s cubic-bezier(0.72, 0.02, 1, 0.48) forwards !important;
}
#discoverPanel .k110-discover-stage.is-exiting-reverse .k110-discover-random-module .k110-discover-glyph {
animation: discoverGlyphExitRight 0.34s cubic-bezier(0.72, 0.02, 1, 0.48) forwards !important;
}
@keyframes k110DiscoverGlyphColorRoll {
0% {
color: var(--k110-neon-roll-c1);
}
18% {
color: color-mix(in srgb, var(--k110-neon-roll-c1) 38%, var(--k110-neon-roll-c2) 62%);
}
36% {
color: var(--k110-neon-roll-c2);
}
54% {
color: color-mix(in srgb, var(--k110-neon-roll-c2) 34%, var(--k110-neon-roll-c3) 66%);
}
70% {
color: var(--k110-neon-roll-c3);
}
86% {
color: color-mix(in srgb, var(--k110-neon-roll-c3) 34%, var(--k110-neon-roll-c1) 66%);
}
100% {
color: var(--k110-neon-roll-c1);
}
}
#discoverPanel .k110-discover-meta-subgroup-line {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
}
/* K110 SECTION CSS-99 STATUS PATTERN AUTHORITY
Status cells draw exactly one background pattern: the pseudo-element below.
Feature-specific direct backgrounds and injected cell-pattern children are
suppressed so diagonal status stripes cannot overlap with dot/bar patterns. */
@keyframes k110StatusDiagonalPatternFlow {
0% {
background-position: 0 0;
}
100% {
background-position: 37px 23px;
}
}
.k110-c-terminal-status.k110-c-pattern-diagonal,
.k110-c-terminal-status.k110-c-pattern-dots,
.k110-c-terminal-status.k110-c-pattern-none {
background-image: none !important;
animation: none !important;
}
.k110-c-terminal-status > .k110-c-cell-bg,
.k110-c-terminal-status > .k110-c-pattern,
.k110-c-terminal-status > .k110-panel-bar-dots {
display: none !important;
}
.k110-panel .k110-c-terminal-status.k110-c-pattern-diagonal::before,
#translatePanel .k110-translate-status-line.k110-c-pattern-diagonal::before,
#reviewCard #reviewStatus.k110-c-pattern-diagonal::before,
#designPanel #designStatus.k110-c-pattern-diagonal::before,
#discoverPanel .k110-discover-status.k110-c-pattern-diagonal::before,
.k110-c-terminal-status.k110-c-pattern-diagonal::before {
content: "" !important;
position: absolute !important;
inset: calc(var(--status-pattern-gap, 4px) * -6) !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: repeating-linear-gradient(
135deg,
transparent 0 calc(var(--status-pattern-gap, 4px) * 2.15),
color-mix(in srgb, var(--status-accent, currentColor) 34%, transparent) calc(var(--status-pattern-gap, 4px) * 2.15) calc((var(--status-pattern-gap, 4px) * 2.15) + 1.5px),
transparent calc((var(--status-pattern-gap, 4px) * 2.15) + 1.5px) calc(var(--status-pattern-gap, 4px) * 4.3)
) !important;
background-size: calc(var(--status-pattern-gap, 4px) * 12) calc(var(--status-pattern-gap, 4px) * 12) !important;
background-repeat: repeat !important;
background-position: 0 0 !important;
animation: k110StatusDiagonalPatternFlow var(--k110-pattern-flow-speed, 9s) linear infinite !important;
opacity: 1 !important;
transform: translateZ(0) !important;
will-change: background-position;
}
.k110-panel .k110-c-terminal-status.k110-c-pattern-dots::before,
#translatePanel .k110-translate-status-line.k110-c-pattern-dots::before,
#reviewCard #reviewStatus.k110-c-pattern-dots::before,
#designPanel #designStatus.k110-c-pattern-dots::before,
#discoverPanel .k110-discover-status.k110-c-pattern-dots::before,
.k110-c-terminal-status.k110-c-pattern-dots::before {
content: "" !important;
position: absolute !important;
inset: calc(var(--status-pattern-gap, 4px) * -4) !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: var(--status-pattern-image) !important;
background-size: var(--status-pattern-size) !important;
background-repeat: repeat !important;
background-position: 0 0 !important;
animation: var(--status-pattern-animation) !important;
opacity: 1 !important;
transform: translateZ(0) !important;
will-change: background-position;
}
.k110-panel .k110-c-terminal-status.k110-c-pattern-none::before,
#translatePanel .k110-translate-status-line.k110-c-pattern-none::before,
#reviewCard #reviewStatus.k110-c-pattern-none::before,
#designPanel #designStatus.k110-c-pattern-none::before,
#discoverPanel .k110-discover-status.k110-c-pattern-none::before,
.k110-c-terminal-status.k110-c-pattern-none::before {
content: none !important;
display: none !important;
}
.k110-c-terminal-status > * {
position: relative;
z-index: 1;
}
/* K110 FEATURE: DESIGN COMMAND AND GLYPH FINAL AUTHORITY
Design BAR commands size from their visible text/icon contents. Glyph
buttons use the shared neon rolling tokens only when more than one color
is assigned; solid glyphs remain solid with soft glow. */
#designPanel {
--k110-design-command-pad-x: var(--k110-bar-text-inset, var(--k110-panel-content-x, 14px));
--k110-design-command-gap: var(--k110-button-cluster-gap, var(--k110-gap, 2px));
--k110-design-glyph-soft-glow-a: 9px;
--k110-design-glyph-soft-glow-b: 20px;
--k110-design-glyph-soft-glow-c: 34px;
}
#designPanel .k110-design-panel-bar-top {
--k110-bar-pattern-right: 0px;
overflow: hidden !important;
}
#designPanel .k110-design-panel-bar-top .k110-panel-title {
padding-right: calc(var(--k110-design-command-pad-x) * 2) !important;
}
#designPanel .k110-design-bar-actions {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: auto !important;
min-width: max-content !important;
max-width: calc(100% - (var(--k110-design-command-pad-x) * 2)) !important;
display: flex !important;
align-items: stretch !important;
justify-content: flex-end !important;
gap: var(--k110-design-command-gap) !important;
padding: 0 !important;
background: transparent !important;
z-index: 8 !important;
}
#designPanel #designClearBtn,
#designPanel #designRegisterBtn,
#designPanel #designCopyBtn {
--btn-accent: var(--k110-panel-primary, #00e5ff);
--btn-bg: rgba(0,0,0,0.9);
--btn-fg: var(--btn-accent);
--btn-border: color-mix(in srgb, var(--btn-accent) 78%, transparent);
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
--btn-line-w: var(--k110-panel-line-w, 1px);
flex: 0 0 auto !important;
width: auto !important;
min-width: max-content !important;
max-width: none !important;
height: 100% !important;
padding-left: var(--k110-design-command-pad-x) !important;
padding-right: var(--k110-design-command-pad-x) !important;
white-space: nowrap !important;
gap: var(--k110-design-command-gap) !important;
border-width: var(--btn-line-w) !important;
border-color: var(--btn-border) !important;
background:
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent) var(--k110-button-fill-alpha, 10%), transparent), transparent 58%),
var(--btn-bg) !important;
color: var(--btn-fg) !important;
box-shadow:
inset 0 0 0 var(--btn-line-w) color-mix(in srgb, var(--btn-accent) 28%, transparent),
inset 0 -12px 24px color-mix(in srgb, var(--btn-accent) 14%, transparent),
0 0 8px color-mix(in srgb, var(--btn-accent) var(--k110-button-glow-alpha, 16%), transparent) !important;
transform: none !important;
overflow: hidden !important;
}
#designPanel #designClearBtn::before,
#designPanel #designClearBtn::after,
#designPanel #designRegisterBtn::before,
#designPanel #designRegisterBtn::after,
#designPanel #designCopyBtn::before,
#designPanel #designCopyBtn::after {
content: none !important;
display: none !important;
}
#designPanel #designClearBtn .k110-front-text,
#designPanel #designRegisterBtn .k110-front-text,
#designPanel #designCopyBtn .k110-front-text {
color: currentColor !important;
-webkit-text-fill-color: currentColor !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
filter: none !important;
text-shadow: inherit !important;
}
#designPanel #designCopyBtn .k110-copy-icon {
position: relative !important;
z-index: 4 !important;
display: inline-block !important;
width: 0.82em !important;
height: 0.92em !important;
min-width: 0.82em !important;
flex: 0 0 auto !important;
color: currentColor !important;
-webkit-text-fill-color: currentColor !important;
background: none !important;
background-image: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
filter: none !important;
}
#designPanel #designCopyBtn .k110-copy-icon::before,
#designPanel #designCopyBtn .k110-copy-icon::after {
content: "" !important;
position: absolute !important;
display: block !important;
box-sizing: border-box !important;
width: 0.55em !important;
height: 0.68em !important;
border: var(--btn-line-w, 1px) solid currentColor !important;
border-radius: 0 !important;
background: transparent !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
box-shadow: none !important;
}
#designPanel #designCopyBtn .k110-copy-icon::before {
left: 0.22em !important;
top: 0 !important;
}
#designPanel #designCopyBtn .k110-copy-icon::after {
left: 0 !important;
top: 0.22em !important;
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):hover,
#designPanel #designRegisterBtn:not(:disabled):not(.is-disabled):hover,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover {
border-color: var(--btn-accent) !important;
color: #000 !important;
background:
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent) var(--k110-button-fill-hover-alpha, 72%), transparent), color-mix(in srgb, var(--btn-accent) 12%, transparent) 72%),
var(--btn-bg) !important;
box-shadow:
inset 0 -18px 36px color-mix(in srgb, var(--btn-accent) 22%, transparent),
0 0 14px color-mix(in srgb, var(--btn-accent) var(--k110-button-glow-hover-alpha, 42%), transparent),
0 0 32px color-mix(in srgb, var(--btn-accent) 24%, transparent) !important;
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):hover .k110-front-text,
#designPanel #designRegisterBtn:not(:disabled):not(.is-disabled):hover .k110-front-text,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover .k110-front-text,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):hover .k110-copy-icon {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
text-shadow: none !important;
}
#designPanel #designClearBtn:not(:disabled):not(.is-disabled):active,
#designPanel #designRegisterBtn:not(:disabled):not(.is-disabled):active,
#designPanel #designCopyBtn:not(:disabled):not(.is-disabled):active {
transform: scale(0.985) !important;
color: #000 !important;
background:
linear-gradient(0deg, color-mix(in srgb, var(--btn-accent) var(--k110-button-fill-active-alpha, 86%), white 12%), color-mix(in srgb, var(--btn-accent) 28%, transparent) 78%),
var(--btn-bg) !important;
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel {
--k110-design-command-pad-x: var(--k110-bar-text-inset, var(--k110-panel-content-x, 14px));
}
#designPanel .k110-design-bar-actions {
max-width: calc(100% - (var(--k110-design-command-pad-x) * 1.5)) !important;
}
#designPanel #designClearBtn,
#designPanel #designRegisterBtn,
#designPanel #designCopyBtn {
padding-left: var(--k110-design-command-pad-x) !important;
padding-right: var(--k110-design-command-pad-x) !important;
font-size: var(--k110-type-caption) !important;
}
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner {
--k110-design-backspace-h: clamp(34px, calc(var(--k110-design-output-h, 170px) / 5), 76px);
--k110-design-backspace-w: calc(var(--k110-design-backspace-h) * 1.28);
--k110-design-backspace-notch: 27%;
--k110-design-backspace-line: var(--k110-panel-line-w, 1px);
position: absolute !important;
top: 50% !important;
right: calc(var(--k110-gap, 2px) * 2) !important;
bottom: auto !important;
width: var(--k110-design-backspace-w) !important;
height: var(--k110-design-backspace-h) !important;
min-width: var(--k110-design-backspace-w) !important;
min-height: var(--k110-design-backspace-h) !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--k110-panel-primary) !important;
background: transparent !important;
box-shadow:
inset 0 -12px 22px color-mix(in srgb, var(--k110-panel-primary) 12%, transparent),
0 0 9px color-mix(in srgb, var(--k110-panel-primary) 22%, transparent) !important;
clip-path: none !important;
overflow: visible !important;
transform: translateY(-50%) !important;
z-index: 12 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
opacity: 0 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before {
background: var(--k110-panel-primary) !important;
clip-path: polygon(var(--k110-design-backspace-notch) 0, 100% 0, 100% 100%, var(--k110-design-backspace-notch) 100%, 0 50%) !important;
z-index: 0 !important;
transition: opacity 140ms ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
box-shadow: 0 0 22px color-mix(in srgb, var(--k110-panel-primary) 58%, transparent) !important;
animation: none !important;
z-index: 0 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: auto !important;
height: auto !important;
background: rgba(0,0,0,0.96) !important;
clip-path: polygon(var(--k110-design-backspace-notch) 0, 100% 0, 100% 100%, var(--k110-design-backspace-notch) 100%, 0 50%) !important;
filter:
drop-shadow(0 0 7px color-mix(in srgb, var(--k110-panel-primary) 50%, transparent))
drop-shadow(0 0 15px color-mix(in srgb, var(--k110-panel-primary) 22%, transparent)) !important;
z-index: 2 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::before {
content: "" !important;
position: absolute !important;
background: currentColor !important;
inset: 0 !important;
padding: var(--k110-design-backspace-line) !important;
box-sizing: border-box !important;
clip-path: polygon(var(--k110-design-backspace-notch) 0, 100% 0, 100% 100%, var(--k110-design-backspace-notch) 100%, 0 50%) !important;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::after {
content: "" !important;
position: absolute !important;
left: 46% !important;
top: 22% !important;
width: 43% !important;
height: 56% !important;
background:
linear-gradient(45deg, transparent calc(50% - var(--k110-design-backspace-line-half)), currentColor calc(50% - var(--k110-design-backspace-line-half)) calc(50% + var(--k110-design-backspace-line-half)), transparent calc(50% + var(--k110-design-backspace-line-half))),
linear-gradient(-45deg, transparent calc(50% - var(--k110-design-backspace-line-half)), currentColor calc(50% - var(--k110-design-backspace-line-half)) calc(50% + var(--k110-design-backspace-line-half)), transparent calc(50% + var(--k110-design-backspace-line-half))) !important;
pointer-events: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover {
color: #000 !important;
box-shadow:
0 0 14px color-mix(in srgb, var(--k110-panel-primary) 48%, transparent),
0 0 28px color-mix(in srgb, var(--k110-panel-primary) 22%, transparent) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover::before {
opacity: 1 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-icon {
background: var(--k110-panel-primary) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active {
color: #000 !important;
transform: translateY(-50%) scale(0.92) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-icon {
filter:
drop-shadow(0 0 7px color-mix(in srgb, var(--btn-accent) 58%, transparent))
drop-shadow(0 0 18px color-mix(in srgb, var(--btn-accent) 24%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-shape {
fill: color-mix(in srgb, var(--btn-accent) 86%, #fff 14%) !important;
stroke: #000 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-x {
stroke: #000 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active::after {
opacity: 1 !important;
animation: k110DesignButtonReleaseGlow 0.34s ease-out !important;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
color: var(--glyph-color) !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: calc(var(--k110-gap, 2px) * 1) !important;
padding: calc(var(--k110-gap, 2px) * 2) !important;
}
#designPanel .glyph-group-label::before,
#designPanel .k110-glyph-group-head::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
display: block !important;
pointer-events: none !important;
background:
linear-gradient(currentColor, currentColor) left top / var(--k110-panel-line-w, 1px) 100% no-repeat,
linear-gradient(currentColor, currentColor) right top / var(--k110-panel-line-w, 1px) 100% no-repeat,
linear-gradient(currentColor, currentColor) left top / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat,
linear-gradient(currentColor, currentColor) left bottom / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat,
linear-gradient(currentColor, currentColor) right top / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat,
linear-gradient(currentColor, currentColor) right bottom / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat !important;
animation: none !important;
}
#designPanel .glyph-group-label-pill,
#designPanel .k110-glyph-group-head-glyph,
#designPanel .glyph-group-count,
#designPanel .k110-glyph-group-head-count {
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: currentColor !important;
-webkit-text-fill-color: currentColor !important;
text-shadow:
0 0 8px color-mix(in srgb, currentColor 55%, transparent),
0 0 18px color-mix(in srgb, currentColor 22%, transparent) !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
white-space: nowrap !important;
line-height: 1 !important;
}
#designPanel .glyph-group-label-pill.k110-fx-neon-roll-text,
#designPanel .k110-glyph-group-head-glyph.k110-fx-neon-roll-text,
#designPanel .glyph-group-count.k110-fx-neon-roll-text,
#designPanel .k110-glyph-group-head-count.k110-fx-neon-roll-text {
-webkit-text-fill-color: transparent !important;
background-image: var(--k110-neon-roll-gradient) !important;
background-size: 620% 100% !important;
background-position: 0% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
animation: k110FxNeonRollText var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
}
#designPanel .glyph-group-label.is-glyph-color-roll-head,
#designPanel .k110-glyph-group-head.is-glyph-color-roll-head {
color: var(--k110-neon-roll-c1, var(--glyph-color)) !important;
}
#designPanel .glyph-group-label.is-glyph-color-roll-head::before,
#designPanel .k110-glyph-group-head.is-glyph-color-roll-head::before {
background:
var(--k110-neon-roll-gradient) left top / var(--k110-panel-line-w, 1px) 100% no-repeat,
var(--k110-neon-roll-gradient) right top / var(--k110-panel-line-w, 1px) 100% no-repeat,
var(--k110-neon-roll-gradient) left top / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat,
var(--k110-neon-roll-gradient) left bottom / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat,
var(--k110-neon-roll-gradient) right top / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat,
var(--k110-neon-roll-gradient) right bottom / calc(var(--k110-gap, 2px) * 3) var(--k110-panel-line-w, 1px) no-repeat !important;
background-size:
620% 100%,
620% 100%,
620% 100%,
620% 100%,
620% 100%,
620% 100% !important;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
}
#designPanel .glyph-group-label-pill,
#designPanel .k110-glyph-group-head-glyph,
#designPanel .k110-design-glyph-head-source {
font-size: var(--k110-type-body) !important;
font-weight: 900 !important;
}
#designPanel .glyph-group-count,
#designPanel .k110-glyph-group-head-count,
#designPanel .k110-design-glyph-head-count {
font-size: var(--k110-type-micro) !important;
font-weight: 900 !important;
opacity: 0.94 !important;
}
#designPanel #glyphGrid.k110-glyph-grid {
--k110-glyph-scroll-gutter: 0px;
padding-right: 0 !important;
margin-right: 0 !important;
overflow-x: visible !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
padding-right: calc(var(--k110-gap, 2px) * 2) !important;
padding-left: calc(var(--k110-gap, 2px) * 2) !important;
scrollbar-width: none !important;
}
#designPanel .glyph-item {
border-radius: var(--k110-design-glyph-button-r, 8px) !important;
background-color: var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) !important;
color: #000 !important;
overflow: visible !important;
filter: saturate(1.18) brightness(1.03) !important;
box-shadow:
0 0 var(--k110-design-glyph-soft-glow-a) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 54%, transparent),
0 0 var(--k110-design-glyph-soft-glow-b) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 28%, transparent),
0 0 var(--k110-design-glyph-soft-glow-c) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 12%, transparent) !important;
}
#designPanel .glyph-item[data-glyph-units="1"],
#designPanel .glyph-item.is-square-glyph {
width: var(--k110-design-glyph-button-h) !important;
min-width: var(--k110-design-glyph-button-h) !important;
flex-basis: var(--k110-design-glyph-button-h) !important;
padding-left: calc(var(--k110-gap, 2px) * 3) !important;
padding-right: calc(var(--k110-gap, 2px) * 3) !important;
}
#designPanel .glyph-item.is-color-solid {
background: var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) !important;
background-image: none !important;
animation: none !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
background-color: var(--k110-neon-roll-c1) !important;
background-image: var(--k110-neon-roll-gradient) !important;
background-size: 620% 100% !important;
background-position: 0% 50%;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
box-shadow:
0 0 var(--k110-design-glyph-soft-glow-a) color-mix(in srgb, var(--k110-neon-roll-c1) 56%, transparent),
0 0 var(--k110-design-glyph-soft-glow-b) color-mix(in srgb, var(--k110-neon-roll-c2) 32%, transparent),
0 0 var(--k110-design-glyph-soft-glow-c) color-mix(in srgb, var(--k110-neon-roll-c3) 16%, transparent) !important;
}
#designPanel .glyph-item.is-color-mixed {
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1);
}
#designPanel .glyph-item.is-color-solid.k110-fx-neon-roll-fill {
background-image: none !important;
animation: none !important;
}
/* K110 MODULE: DESIGN GLYPH SMART LAYOUT FINAL
Last-mile authority for the glyph button rail. The grid owns vertical
scroll; each non-single group rail owns horizontal scroll. */
#designPanel #glyphGrid.k110-glyph-grid {
--k110-glyph-scroll-gutter: calc(var(--k110-gap, 2px) * 4);
--k110-design-glyph-button-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-head-gap: calc(var(--k110-design-glyph-button-gap) * 2);
--k110-design-glyph-group-gap: calc(var(--k110-design-glyph-button-gap) * 3);
--k110-design-glyph-scrollbar: 5px;
--k110-design-glyph-soft-glow-a: 5px;
--k110-design-glyph-soft-glow-b: 12px;
--k110-design-glyph-soft-glow-c: 22px;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--k110-design-glyph-group-gap) !important;
row-gap: var(--k110-design-glyph-group-gap) !important;
padding-top: calc(var(--k110-gap, 2px) * 3) !important;
padding-right: var(--k110-glyph-scroll-gutter) !important;
padding-bottom: calc(var(--k110-gap, 2px) * 6) !important;
padding-left: 0 !important;
margin-right: calc(var(--k110-glyph-scroll-gutter) * -1) !important;
overflow-x: visible !important;
overflow-y: auto !important;
scrollbar-gutter: stable !important;
scrollbar-width: thin !important;
scrollbar-color: color-mix(in srgb, var(--k110-panel-primary) 72%, transparent) transparent !important;
}
#designPanel #glyphGrid.k110-glyph-grid::-webkit-scrollbar {
width: var(--k110-design-glyph-scrollbar) !important;
height: var(--k110-design-glyph-scrollbar) !important;
display: block !important;
}
#designPanel #glyphGrid.k110-glyph-grid::-webkit-scrollbar-track {
background: transparent !important;
}
#designPanel #glyphGrid.k110-glyph-grid::-webkit-scrollbar-thumb {
border-radius: 999px !important;
background: color-mix(in srgb, var(--k110-panel-primary) 78%, transparent) !important;
box-shadow: 0 0 8px color-mix(in srgb, var(--k110-panel-primary) 34%, transparent) !important;
}
#designPanel #glyphGrid.k110-glyph-grid.is-one-group {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 0 !important;
}
#designPanel #glyphGrid.k110-glyph-grid.is-two-groups {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#designPanel .glyph-group {
grid-template-columns: var(--k110-design-glyph-button-h) minmax(0, 1fr) !important;
column-gap: var(--k110-design-glyph-head-gap) !important;
align-items: center !important;
}
#designPanel #glyphGrid.k110-glyph-grid.is-one-group .glyph-group {
align-items: start !important;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
align-self: center !important;
justify-self: center !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
align-items: center !important;
align-self: center !important;
gap: var(--k110-design-glyph-button-gap) !important;
row-gap: var(--k110-design-glyph-button-gap) !important;
min-height: calc(var(--k110-design-glyph-button-h) + (var(--k110-gap, 2px) * 6)) !important;
padding:
calc(var(--k110-gap, 2px) * 3)
calc(var(--k110-gap, 2px) * 2)
calc(var(--k110-gap, 2px) * 3)
calc(var(--k110-gap, 2px) * 2) !important;
overflow-x: auto !important;
overflow-y: visible !important;
scrollbar-width: thin !important;
scrollbar-color: color-mix(in srgb, var(--glyph-color, var(--k110-panel-primary)) 82%, transparent) transparent !important;
}
#designPanel .glyph-scroll::-webkit-scrollbar {
width: var(--k110-design-glyph-scrollbar) !important;
height: var(--k110-design-glyph-scrollbar) !important;
display: block !important;
}
#designPanel .glyph-scroll::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--glyph-color, var(--k110-panel-primary)) 12%, transparent) !important;
border-radius: 999px !important;
}
#designPanel .glyph-scroll::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--glyph-color, var(--k110-panel-primary)) 88%, transparent) !important;
border-radius: 999px !important;
box-shadow: 0 0 7px color-mix(in srgb, var(--glyph-color, var(--k110-panel-primary)) 36%, transparent) !important;
}
#designPanel .glyph-scroll.is-vertical-flow {
flex-wrap: wrap !important;
align-content: flex-start !important;
overflow-x: hidden !important;
overflow-y: visible !important;
scroll-snap-type: none !important;
scrollbar-width: none !important;
}
#designPanel .glyph-scroll.is-vertical-flow::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
#designPanel .glyph-scroll.is-horizontal-flow {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
#designPanel .glyph-item {
align-self: center !important;
filter: saturate(1.08) brightness(1.01) !important;
box-shadow:
0 0 var(--k110-design-glyph-soft-glow-a) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 34%, transparent),
0 0 var(--k110-design-glyph-soft-glow-b) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 16%, transparent),
0 0 var(--k110-design-glyph-soft-glow-c) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 7%, transparent) !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
background-image: var(--k110-neon-roll-gradient) !important;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
box-shadow:
0 0 var(--k110-design-glyph-soft-glow-a) color-mix(in srgb, var(--k110-neon-roll-c1) 38%, transparent),
0 0 var(--k110-design-glyph-soft-glow-b) color-mix(in srgb, var(--k110-neon-roll-c2) 20%, transparent),
0 0 var(--k110-design-glyph-soft-glow-c) color-mix(in srgb, var(--k110-neon-roll-c3) 9%, transparent) !important;
}
@media (max-width: 767px) and (orientation: portrait) {
#designPanel #glyphGrid.k110-glyph-grid,
#designPanel #glyphGrid.k110-glyph-grid.is-two-groups,
#designPanel #glyphGrid.k110-glyph-grid.is-many-groups {
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
}
#designPanel #glyphGrid.k110-glyph-grid {
--k110-glyph-scroll-gutter: calc(var(--k110-gap, 2px) * 5);
--k110-design-glyph-group-gap: calc(var(--k110-design-glyph-button-gap) * 3);
padding-bottom: calc(var(--k110-gap, 2px) * 5) !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
padding-top: calc(var(--k110-gap, 2px) * 3) !important;
padding-bottom: calc(var(--k110-gap, 2px) * 3) !important;
}
}
/* K110 MODULE: DESIGN GLYPH CONTROL OVERRIDE
Single authority for glyph button width, group-head color, rail gutters,
and the design output backspace icon. Keep this block after legacy glyph
and backspace rules so old masks/fills cannot reassert themselves. */
#designPanel #glyphGrid.k110-glyph-grid {
--k110-design-glyph-soft-glow-a: 1.5px;
--k110-design-glyph-soft-glow-b: 4px;
--k110-design-glyph-soft-glow-c: 8px;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
position: relative !important;
padding:
calc(var(--k110-gap, 2px) * 3)
calc(var(--k110-gap, 2px) * 7)
calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 5))
calc(var(--k110-gap, 2px) * 7) !important;
min-height: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 8)) !important;
overflow-x: auto !important;
overflow-y: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
overflow: visible !important;
isolation: isolate !important;
border: 0 !important;
outline: 0 !important;
min-height: var(--k110-design-glyph-button-h, 64px) !important;
height: var(--k110-design-glyph-button-h, 64px) !important;
align-self: center !important;
justify-self: center !important;
color: var(--glyph-color, var(--k110-panel-primary)) !important;
}
#designPanel .glyph-group-label::before,
#designPanel .glyph-group-label::after,
#designPanel .k110-glyph-group-head::before,
#designPanel .k110-glyph-group-head::after {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel .glyph-group-label.is-glyph-color-roll-head,
#designPanel .glyph-group-label.is-glyph-color-roll-head::before,
#designPanel .k110-glyph-group-head.is-glyph-color-roll-head,
#designPanel .k110-glyph-group-head.is-glyph-color-roll-head::before {
color: var(--k110-neon-roll-c1, var(--glyph-color, var(--k110-panel-primary))) !important;
animation: k110FxNeonRollText var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
}
#designPanel .glyph-group-label-pill,
#designPanel .glyph-group-count,
#designPanel .k110-design-glyph-head-source,
#designPanel .k110-design-glyph-head-count {
color: currentColor !important;
background: transparent !important;
text-shadow:
0 0 4px color-mix(in srgb, currentColor 42%, transparent),
0 0 10px color-mix(in srgb, currentColor 18%, transparent) !important;
}
#designPanel .glyph-scroll::before,
#designPanel .glyph-scroll::after,
#designPanel .glyph-scroll.is-wrap::before,
#designPanel .glyph-scroll.is-wrap::after,
#designPanel .glyph-scroll.is-grid-wrap::before,
#designPanel .glyph-scroll.is-grid-wrap::after,
#designPanel .glyph-scroll.is-smart-fit::before,
#designPanel .glyph-scroll.is-smart-fit::after,
#designPanel .glyph-scroll.is-smart-scroll::before,
#designPanel .glyph-scroll.is-smart-scroll::after,
#designPanel .glyph-scroll.is-glyph-rail-scroll::before,
#designPanel .glyph-scroll.is-glyph-rail-scroll::after {
content: "" !important;
position: absolute !important;
top: calc(var(--k110-gap, 2px) * 3) !important;
bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 5)) !important;
width: calc(var(--k110-gap, 2px) * 4) !important;
color: var(--glyph-color, var(--k110-panel-primary)) !important;
pointer-events: none !important;
z-index: 4 !important;
background:
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-panel-line-w, 1px) 100% no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / 100% var(--k110-panel-line-w, 1px) no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 100% var(--k110-panel-line-w, 1px) no-repeat !important;
box-shadow:
0 0 3px color-mix(in srgb, currentColor 24%, transparent),
0 0 6px color-mix(in srgb, currentColor 10%, transparent) !important;
}
#designPanel .glyph-scroll::before,
#designPanel .glyph-scroll.is-wrap::before,
#designPanel .glyph-scroll.is-grid-wrap::before,
#designPanel .glyph-scroll.is-smart-fit::before,
#designPanel .glyph-scroll.is-smart-scroll::before,
#designPanel .glyph-scroll.is-glyph-rail-scroll::before {
left: 0 !important;
}
#designPanel .glyph-scroll::after,
#designPanel .glyph-scroll.is-wrap::after,
#designPanel .glyph-scroll.is-grid-wrap::after,
#designPanel .glyph-scroll.is-smart-fit::after,
#designPanel .glyph-scroll.is-smart-scroll::after,
#designPanel .glyph-scroll.is-glyph-rail-scroll::after {
right: 0 !important;
transform: scaleX(-1) !important;
}
#designPanel .glyph-item {
width: var(--glyph-button-w, var(--k110-design-glyph-button-h, 64px)) !important;
min-width: var(--glyph-button-w, var(--k110-design-glyph-button-h, 64px)) !important;
flex: 0 0 var(--glyph-button-w, var(--k110-design-glyph-button-h, 64px)) !important;
max-width: var(--glyph-button-w, var(--k110-design-glyph-button-h, 64px)) !important;
overflow: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
box-shadow:
0 0 var(--k110-design-glyph-soft-glow-a) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 20%, transparent),
0 0 var(--k110-design-glyph-soft-glow-b) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 8%, transparent),
0 0 var(--k110-design-glyph-soft-glow-c) color-mix(in srgb, var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) 3%, transparent) !important;
}
#designPanel .glyph-item.is-square-glyph,
#designPanel .glyph-item[data-glyph-units="1"] {
width: var(--k110-design-glyph-button-h, 64px) !important;
min-width: var(--k110-design-glyph-button-h, 64px) !important;
flex-basis: var(--k110-design-glyph-button-h, 64px) !important;
max-width: var(--k110-design-glyph-button-h, 64px) !important;
}
#designPanel .glyph-item[data-glyph-units="2"] {
font-size: calc(var(--k110-design-glyph-button-h, 64px) * 0.36) !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
box-shadow:
0 0 var(--k110-design-glyph-soft-glow-a) color-mix(in srgb, var(--k110-neon-roll-c1) 20%, transparent),
0 0 var(--k110-design-glyph-soft-glow-b) color-mix(in srgb, var(--k110-neon-roll-c2) 9%, transparent),
0 0 var(--k110-design-glyph-soft-glow-c) color-mix(in srgb, var(--k110-neon-roll-c3) 4%, transparent) !important;
}
/* K110 MODULE: DESIGN GLYPH RAIL BRACKETS
Brackets belong to the glyph group, outside the scrollable rail. */
#designPanel .glyph-group {
--k110-design-glyph-bracket-zone: calc(var(--k110-gap, 2px) * 5);
--k110-design-glyph-bracket-gap: calc(var(--k110-gap, 2px) * 2);
--k110-design-glyph-bracket-top: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-bracket-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 5));
position: relative !important;
overflow: visible !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
padding-left: var(--k110-design-glyph-bracket-gap) !important;
padding-right: var(--k110-design-glyph-bracket-gap) !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll {
width: var(--k110-design-rail-available-w, auto) !important;
max-width: var(--k110-design-rail-available-w, 100%) !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap)) !important;
margin-right: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap)) !important;
padding-left: var(--k110-design-glyph-bracket-gap) !important;
padding-right: var(--k110-design-glyph-bracket-gap) !important;
}
#designPanel .glyph-scroll::before,
#designPanel .glyph-scroll::after,
#designPanel .glyph-scroll.is-wrap::before,
#designPanel .glyph-scroll.is-wrap::after,
#designPanel .glyph-scroll.is-grid-wrap::before,
#designPanel .glyph-scroll.is-grid-wrap::after,
#designPanel .glyph-scroll.is-smart-fit::before,
#designPanel .glyph-scroll.is-smart-fit::after,
#designPanel .glyph-scroll.is-smart-scroll::before,
#designPanel .glyph-scroll.is-smart-scroll::after,
#designPanel .glyph-scroll.is-glyph-rail-scroll::before,
#designPanel .glyph-scroll.is-glyph-rail-scroll::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
}
#designPanel .glyph-group::before,
#designPanel .glyph-group::after {
content: none !important;
display: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-rail-scrollable::after {
content: "" !important;
display: block !important;
width: var(--k110-design-glyph-bracket-zone) !important;
position: absolute !important;
top: var(--k110-design-glyph-bracket-top) !important;
bottom: var(--k110-design-glyph-bracket-bottom) !important;
color: var(--glyph-button-color, var(--glyph-color, var(--k110-panel-primary))) !important;
pointer-events: none !important;
z-index: 9 !important;
background:
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-panel-line-w, 1px) 100% no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / 100% var(--k110-panel-line-w, 1px) no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 100% var(--k110-panel-line-w, 1px) no-repeat !important;
box-shadow:
0 0 3px color-mix(in srgb, currentColor 24%, transparent),
0 0 6px color-mix(in srgb, currentColor 10%, transparent) !important;
}
#designPanel .glyph-group.is-rail-scrollable::before {
left: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-head-gap, calc(var(--k110-gap, 2px) * 6))) !important;
}
#designPanel .glyph-group.is-rail-scrollable::after {
right: 0 !important;
transform: scaleX(-1) !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::after {
background:
var(--k110-neon-roll-gradient) 0 0 / var(--k110-panel-line-w, 1px) 100% no-repeat,
var(--k110-neon-roll-gradient) 0 0 / 100% var(--k110-panel-line-w, 1px) no-repeat,
var(--k110-neon-roll-gradient) 0 100% / 100% var(--k110-panel-line-w, 1px) no-repeat !important;
background-size:
var(--k110-panel-line-w, 1px) 100%,
620% var(--k110-panel-line-w, 1px),
620% var(--k110-panel-line-w, 1px) !important;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
}
/* K110 MODULE: DESIGN BACKSPACE BUTTON - SVG is the single source of truth. */
#designPanel #designBackspaceBtn.k110-design-backspace-corner {
--btn-accent: var(--k110-panel-primary, #00e5ff);
--btn-border: var(--btn-accent);
--btn-bg: transparent;
--btn-fg: var(--btn-accent);
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
--k110-design-backspace-h: clamp(42px, calc(var(--k110-design-output-h, 170px) / 4), 96px);
--k110-design-backspace-w: calc(var(--k110-design-backspace-h) * 1.42);
--k110-design-backspace-line: var(--k110-panel-line-w, 1px);
position: absolute !important;
top: 50% !important;
right: calc(var(--k110-gap, 2px) * 3) !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: var(--k110-design-backspace-w) !important;
height: var(--k110-design-backspace-h) !important;
min-width: var(--k110-design-backspace-w) !important;
min-height: var(--k110-design-backspace-h) !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--btn-fg) !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
isolation: isolate !important;
z-index: 22 !important;
transition:
color var(--k110-motion-fast, 120ms) ease,
filter var(--k110-motion-fast, 120ms) ease,
transform var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
border: 0 !important;
border-radius: 0 !important;
clip-path: polygon(31.667% 8.75%, 94.167% 8.75%, 94.167% 91.25%, 31.667% 91.25%, 5.833% 50%) !important;
opacity: 0 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before {
z-index: 0 !important;
background:
linear-gradient(
0deg,
color-mix(in srgb, var(--btn-accent) 30%, transparent) 0%,
color-mix(in srgb, var(--btn-accent) 10%, transparent) 48%,
transparent 78%
) !important;
box-shadow:
inset 0 -14px 24px color-mix(in srgb, var(--btn-accent) 18%, transparent),
0 0 8px color-mix(in srgb, var(--btn-accent) 18%, transparent) !important;
opacity: 0.42 !important;
transition:
opacity var(--k110-motion-fast, 120ms) ease,
background var(--k110-motion-fast, 120ms) ease,
box-shadow var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
z-index: 1 !important;
inset: calc(var(--k110-design-backspace-line) * -1) !important;
background: color-mix(in srgb, var(--btn-accent) 52%, transparent) !important;
box-shadow:
0 0 18px color-mix(in srgb, var(--btn-accent) 54%, transparent),
0 0 52px color-mix(in srgb, var(--btn-accent) 24%, transparent) !important;
transform: scale(0.985) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon {
display: block !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
color: currentColor !important;
fill: none !important;
background: none !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
transform-origin: center !important;
filter:
drop-shadow(0 0 3px color-mix(in srgb, currentColor 34%, transparent))
drop-shadow(0 0 8px color-mix(in srgb, currentColor 12%, transparent)) !important;
transition:
filter var(--k110-motion-fast, 120ms) ease,
transform var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon::after {
content: none !important;
display: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-shape {
fill: rgba(0, 0, 0, 0.96) !important;
stroke: currentColor !important;
stroke-width: var(--k110-design-backspace-line) !important;
vector-effect: non-scaling-stroke !important;
stroke-linejoin: round !important;
stroke-linecap: round !important;
transition:
fill var(--k110-motion-fast, 120ms) ease,
stroke var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-x {
fill: none !important;
stroke: currentColor !important;
stroke-width: calc(var(--k110-design-backspace-line) * 1.65) !important;
vector-effect: non-scaling-stroke !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: stroke var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover {
color: var(--btn-accent) !important;
filter:
drop-shadow(0 0 5px color-mix(in srgb, var(--btn-accent) 58%, transparent))
drop-shadow(0 0 14px color-mix(in srgb, var(--btn-accent) 22%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover::before {
background:
linear-gradient(
0deg,
color-mix(in srgb, var(--btn-accent) 82%, #fff 18%) 0%,
color-mix(in srgb, var(--btn-accent) 72%, transparent) 54%,
color-mix(in srgb, var(--btn-accent) 22%, transparent) 100%
) !important;
box-shadow:
inset 0 0 0 var(--k110-design-backspace-line) var(--btn-accent),
inset 0 -18px 34px color-mix(in srgb, #fff 22%, transparent),
0 0 12px color-mix(in srgb, var(--btn-accent) 42%, transparent),
0 0 30px color-mix(in srgb, var(--btn-accent) 18%, transparent) !important;
opacity: 1 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-shape {
fill: var(--btn-accent) !important;
stroke: var(--btn-accent) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-x {
stroke: #000 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active {
transform: translateY(-50%) scale(0.92) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-icon {
transform: scale(0.96) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-shape {
fill: color-mix(in srgb, var(--btn-accent) 82%, #fff 18%) !important;
stroke: var(--btn-accent) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-x {
stroke: #000 !important;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.72)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-command-burst::after {
animation: k110FxBurstScale var(--fx-burst-duration, 520ms) ease-out both !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:disabled,
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-disabled {
color: color-mix(in srgb, var(--btn-accent) 50%, transparent) !important;
opacity: 0.72 !important;
filter: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:disabled::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:disabled::after,
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-disabled::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-disabled::after {
opacity: 0 !important;
animation: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:disabled .k110-design-backspace-shape,
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-disabled .k110-design-backspace-shape {
fill: rgba(0, 0, 0, 0.96) !important;
}
/* K110 MODULE: DESIGN BACKSPACE PENTAGON EFFECT AUTHORITY
Hover and burst layers must follow the pentagon footprint, never a rectangle. */
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
inset: 0 !important;
clip-path: polygon(31.667% 8.75%, 94.167% 8.75%, 94.167% 91.25%, 31.667% 91.25%, 5.833% 50%) !important;
box-shadow: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before {
filter:
drop-shadow(0 0 5px color-mix(in srgb, var(--btn-accent) 22%, transparent))
drop-shadow(0 0 12px color-mix(in srgb, var(--btn-accent) 10%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
filter:
drop-shadow(0 0 9px color-mix(in srgb, var(--btn-accent) 44%, transparent))
drop-shadow(0 0 22px color-mix(in srgb, var(--btn-accent) 18%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover {
filter: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover::before {
box-shadow: none !important;
filter:
drop-shadow(0 0 8px color-mix(in srgb, var(--btn-accent) 46%, transparent))
drop-shadow(0 0 18px color-mix(in srgb, var(--btn-accent) 18%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-command-burst::after {
inset: 0 !important;
box-shadow: none !important;
filter:
drop-shadow(0 0 12px color-mix(in srgb, var(--btn-accent) 60%, transparent))
drop-shadow(0 0 30px color-mix(in srgb, var(--btn-accent) 22%, transparent)) !important;
}
/* K110 MODULE: DESIGN GLYPH RAIL ISOLATION PATCH
Common PC/mobile authority. Each glyph group owns its own scroll state;
multi-color glyphs use the rolling-color module without legacy white fills. */
#designPanel #glyphGrid.k110-glyph-grid,
#designPanel #glyphGrid.k110-glyph-grid.is-two-groups,
#designPanel #glyphGrid.k110-glyph-grid.is-many-groups {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)) !important;
}
#designPanel #glyphGrid.k110-glyph-grid.is-one-group {
grid-template-columns: minmax(0, 1fr) !important;
}
#designPanel #glyphGrid.k110-glyph-grid {
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
#designPanel .glyph-group {
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
#designPanel .glyph-scroll,
#designPanel .glyph-scroll.is-wrap,
#designPanel .glyph-scroll.is-grid-wrap,
#designPanel .glyph-scroll.is-smart-fit,
#designPanel .glyph-scroll.is-smart-scroll,
#designPanel .glyph-scroll.is-glyph-rail-scroll {
width: var(--k110-design-rail-available-w, 100%) !important;
max-width: var(--k110-design-rail-available-w, 100%) !important;
min-width: 0 !important;
flex: 0 1 var(--k110-design-rail-available-w, auto) !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: visible !important;
overscroll-behavior-x: contain !important;
touch-action: pan-x pan-y !important;
transform: none !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
background: var(--k110-neon-roll-gradient, var(--glyph-button-color, var(--glyph-color))) !important;
background-color: var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) !important;
background-image: var(--k110-neon-roll-gradient, none) !important;
background-size: 620% 100% !important;
background-position: 0% 50% !important;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
color: #000 !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-label,
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-label-pill,
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-count,
#designPanel .glyph-group.is-glyph-color-roll-group .k110-design-glyph-head-source,
#designPanel .glyph-group.is-glyph-color-roll-group .k110-design-glyph-head-count {
color: var(--k110-neon-roll-c1, var(--glyph-color, var(--k110-panel-primary))) !important;
animation: k110FxNeonRollText var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::after {
color: var(--k110-neon-roll-c1, var(--glyph-color, var(--k110-panel-primary))) !important;
background:
var(--k110-neon-roll-gradient, linear-gradient(currentColor, currentColor)) 0 0 / var(--k110-panel-line-w, 1px) 100% no-repeat,
var(--k110-neon-roll-gradient, linear-gradient(currentColor, currentColor)) 0 0 / 100% var(--k110-panel-line-w, 1px) no-repeat,
var(--k110-neon-roll-gradient, linear-gradient(currentColor, currentColor)) 0 100% / 100% var(--k110-panel-line-w, 1px) no-repeat !important;
background-size:
var(--k110-panel-line-w, 1px) 100%,
620% var(--k110-panel-line-w, 1px),
620% var(--k110-panel-line-w, 1px) !important;
animation: k110FxNeonRollFill var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1)) linear infinite !important;
}
/* K110 MODULE: DESIGN OUTPUT / GLYPH RAIL FINAL SHAPE AUTHORITY
The rail brackets and backspace button use their own shape assets;
layout fades are separated from glow so effects do not get clipped. */
@keyframes k110DesignGlyphSmoothColorRoll {
0% {
background-position: 0% 50%;
filter: saturate(1.12) brightness(1.02);
}
50% {
background-position: 100% 50%;
filter: saturate(1.24) brightness(1.06);
}
100% {
background-position: 0% 50%;
filter: saturate(1.12) brightness(1.02);
}
}
@keyframes k110DesignGlyphSoftColorPulse {
0%, 100% {
box-shadow:
0 0 3px color-mix(in srgb, var(--k110-neon-roll-c1, currentColor) 44%, transparent),
0 0 9px color-mix(in srgb, var(--k110-neon-roll-c2, currentColor) 22%, transparent),
0 0 16px color-mix(in srgb, var(--k110-neon-roll-c3, currentColor) 12%, transparent);
}
50% {
box-shadow:
0 0 4px color-mix(in srgb, var(--k110-neon-roll-c2, currentColor) 52%, transparent),
0 0 12px color-mix(in srgb, var(--k110-neon-roll-c3, currentColor) 28%, transparent),
0 0 20px color-mix(in srgb, var(--k110-neon-roll-c4, currentColor) 14%, transparent);
}
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner {
--btn-accent: var(--k110-panel-primary, #00e5ff);
--k110-design-backspace-line: 2px;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
clip-path: none !important;
overflow: visible !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after {
content: none !important;
display: none !important;
opacity: 0 !important;
animation: none !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-icon {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
color: currentColor !important;
background: none !important;
clip-path: none !important;
pointer-events: none !important;
overflow: visible !important;
filter:
drop-shadow(0 0 4px color-mix(in srgb, currentColor 40%, transparent))
drop-shadow(0 0 10px color-mix(in srgb, currentColor 16%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-shape {
fill: rgba(0, 0, 0, 0.96) !important;
stroke: currentColor !important;
stroke-width: var(--k110-design-backspace-line, 2px) !important;
vector-effect: non-scaling-stroke !important;
transition:
fill var(--k110-motion-fast, 120ms) ease,
stroke var(--k110-motion-fast, 120ms) ease,
filter var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner .k110-design-backspace-x {
stroke: currentColor !important;
stroke-width: calc(var(--k110-design-backspace-line, 2px) * 1.55) !important;
vector-effect: non-scaling-stroke !important;
transition:
stroke var(--k110-motion-fast, 120ms) ease,
filter var(--k110-motion-fast, 120ms) ease !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover {
color: var(--btn-accent) !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-shape {
fill: var(--btn-accent) !important;
stroke: var(--btn-accent) !important;
filter:
drop-shadow(0 0 8px color-mix(in srgb, var(--btn-accent) 60%, transparent))
drop-shadow(0 0 18px color-mix(in srgb, var(--btn-accent) 22%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-x,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-x {
stroke: #000 !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-command-burst .k110-design-backspace-shape {
filter:
drop-shadow(0 0 10px color-mix(in srgb, var(--btn-accent) 72%, transparent))
drop-shadow(0 0 26px color-mix(in srgb, var(--btn-accent) 28%, transparent)) !important;
}
/* K110 MODULE: DESIGN BACKSPACE HOVER SHAPE FINAL
Hover inversion is owned only by the SVG pentagon path. Older button/icon
hover fills must not leak a rectangular background behind the shape. */
#designPanel #designBackspaceBtn.k110-design-backspace-corner {
background: transparent !important;
background-image: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
overflow: visible !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner::after,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover::after,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active::after,
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-command-burst::before,
#designPanel #designBackspaceBtn.k110-design-backspace-corner.is-command-burst::after {
content: none !important;
display: none !important;
opacity: 0 !important;
animation: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-icon,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-icon {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-shape,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-shape {
fill: var(--btn-accent) !important;
stroke: var(--btn-accent) !important;
filter:
drop-shadow(0 0 7px color-mix(in srgb, var(--btn-accent) 58%, transparent))
drop-shadow(0 0 16px color-mix(in srgb, var(--btn-accent) 20%, transparent)) !important;
}
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):hover .k110-design-backspace-x,
#designPanel #designBackspaceBtn.k110-design-backspace-corner:not(:disabled):not(.is-disabled):active .k110-design-backspace-x {
stroke: #000 !important;
}
#designPanel .glyph-group {
--k110-design-glyph-bracket-line: 2px;
--k110-design-glyph-bracket-zone: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-arm: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-bracket-top: calc(var(--k110-gap, 2px) * 2);
--k110-design-glyph-bracket-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 4));
--k110-design-rail-fade-w: calc(var(--k110-gap, 2px) * 9);
overflow: visible !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll {
margin-left: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap)) !important;
margin-right: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap)) !important;
padding-top: calc(var(--k110-gap, 2px) * 4) !important;
padding-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 7)) !important;
padding-left: var(--k110-design-rail-fade-w) !important;
padding-right: var(--k110-design-rail-fade-w) !important;
min-height: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 13)) !important;
overflow-x: auto !important;
overflow-y: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-rail-scrollable::after {
width: var(--k110-design-glyph-bracket-zone) !important;
top: var(--k110-design-glyph-bracket-top) !important;
bottom: var(--k110-design-glyph-bracket-bottom) !important;
color: var(--glyph-button-color, var(--glyph-color, var(--k110-panel-primary))) !important;
background:
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
box-shadow:
0 0 4px color-mix(in srgb, currentColor 34%, transparent),
0 0 9px color-mix(in srgb, currentColor 14%, transparent) !important;
}
#designPanel .glyph-group.is-rail-scrollable::before {
left: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-head-gap, calc(var(--k110-gap, 2px) * 6)) + var(--k110-design-glyph-bracket-gap) + var(--k110-design-rail-fade-w) - var(--k110-gap, 2px)) !important;
}
#designPanel .glyph-group.is-rail-scrollable::after {
right: var(--k110-design-glyph-bracket-gap) !important;
transform: scaleX(-1) !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: calc(var(--k110-gap, 2px) * 4) !important;
bottom: auto !important;
flex: 0 0 0 !important;
width: var(--k110-design-rail-fade-w) !important;
height: var(--k110-design-glyph-button-h, 64px) !important;
pointer-events: none !important;
z-index: 6 !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll::before {
left: 0 !important;
margin-left: 0 !important;
background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.78) 34%, transparent 100%) !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll::after {
right: 0 !important;
margin-right: 0 !important;
background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.78) 34%, transparent 100%) !important;
transform: none !important;
}
#designPanel .k110-design-glyph-head-source {
font-size: var(--k110-type-heading, 24px) !important;
line-height: 0.96 !important;
}
#designPanel .k110-design-glyph-head-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: calc(var(--k110-gap, 2px) * 9) !important;
padding: 0 calc(var(--k110-gap, 2px) * 4) !important;
border: var(--k110-panel-line-w, 1px) solid color-mix(in srgb, currentColor 74%, transparent) !important;
border-radius: 999px !important;
background: rgba(0, 0, 0, 0.58) !important;
box-shadow:
inset 0 0 8px color-mix(in srgb, currentColor 16%, transparent),
0 0 8px color-mix(in srgb, currentColor 20%, transparent) !important;
font-size: var(--k110-type-caption, 12px) !important;
line-height: 1 !important;
}
#designPanel .glyph-item {
overflow: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-item.is-color-solid {
box-shadow:
0 0 2px color-mix(in srgb, var(--glyph-button-color, var(--glyph-color)) 34%, transparent),
0 0 8px color-mix(in srgb, var(--glyph-button-color, var(--glyph-color)) 17%, transparent),
0 0 14px color-mix(in srgb, var(--glyph-button-color, var(--glyph-color)) 8%, transparent) !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1, 8.4s);
background-color: var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) !important;
background-image: var(--k110-neon-roll-gradient, linear-gradient(90deg, var(--glyph-button-color, var(--glyph-color)), var(--glyph-button-color, var(--glyph-color)))) !important;
background-size: 520% 100% !important;
background-position: 0% 50% !important;
animation:
k110DesignGlyphSmoothColorRoll var(--k110-neon-roll-duration, 8.4s) ease-in-out infinite,
k110DesignGlyphSoftColorPulse var(--k110-neon-roll-duration, 8.4s) ease-in-out infinite !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-label,
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-label-pill,
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-count,
#designPanel .glyph-group.is-glyph-color-roll-group .k110-design-glyph-head-source,
#designPanel .glyph-group.is-glyph-color-roll-group .k110-design-glyph-head-count,
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::after {
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1, 8.4s);
animation: k110FxNeonRollText var(--k110-neon-roll-duration, 8.4s) linear infinite !important;
}
/* K110 MODULE: DESIGN GLYPH RAIL MASK REPAIR
Restore the rail edge to an invisible mask, not a visible black layer. */
#designPanel #glyphGrid.k110-glyph-grid {
--k110-design-glyph-group-gap: clamp(
calc(var(--k110-gap, 2px) * 5),
1.25dvh,
calc(var(--k110-gap, 2px) * 12)
);
row-gap: var(--k110-design-glyph-group-gap) !important;
grid-auto-rows: minmax(min-content, max-content) !important;
align-content: start !important;
}
#designPanel .glyph-group {
--k110-design-glyph-bracket-line: 2px;
--k110-design-glyph-bracket-zone: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-arm: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-gap: calc(var(--k110-gap, 2px) * 3);
--k110-design-glyph-bracket-guard: calc(var(--k110-gap, 2px) * 8);
--k110-design-rail-edge-mask: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap));
margin-bottom: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll {
margin-left: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap) + var(--k110-design-glyph-bracket-guard)) !important;
margin-right: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap) + var(--k110-design-glyph-bracket-guard)) !important;
padding-top: calc(var(--k110-gap, 2px) * 3) !important;
padding-right: var(--k110-design-glyph-bracket-gap) !important;
padding-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 5)) !important;
padding-left: var(--k110-design-glyph-bracket-gap) !important;
min-height: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 9)) !important;
overflow-x: auto !important;
overflow-y: visible !important;
clip-path: none !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll::after,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll::before,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel .glyph-group.is-rail-scrollable.has-left.has-right .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable.has-left.has-right .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable.has-left.has-right .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable.has-left.has-right .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable.has-left.has-right .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable.has-left.has-right .glyph-scroll.is-glyph-rail-scroll {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--k110-design-rail-edge-mask), #000 calc(100% - var(--k110-design-rail-edge-mask)), transparent 100%) !important;
mask-image: linear-gradient(90deg, transparent 0, #000 var(--k110-design-rail-edge-mask), #000 calc(100% - var(--k110-design-rail-edge-mask)), transparent 100%) !important;
}
#designPanel .glyph-group.is-rail-scrollable.has-left:not(.has-right) .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable.has-left:not(.has-right) .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable.has-left:not(.has-right) .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable.has-left:not(.has-right) .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable.has-left:not(.has-right) .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable.has-left:not(.has-right) .glyph-scroll.is-glyph-rail-scroll {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--k110-design-rail-edge-mask), #000 100%) !important;
mask-image: linear-gradient(90deg, transparent 0, #000 var(--k110-design-rail-edge-mask), #000 100%) !important;
}
#designPanel .glyph-group.is-rail-scrollable.has-right:not(.has-left) .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable.has-right:not(.has-left) .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable.has-right:not(.has-left) .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable.has-right:not(.has-left) .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable.has-right:not(.has-left) .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable.has-right:not(.has-left) .glyph-scroll.is-glyph-rail-scroll {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--k110-design-rail-edge-mask)), transparent 100%) !important;
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--k110-design-rail-edge-mask)), transparent 100%) !important;
}
#designPanel .glyph-group.is-rail-scrollable:not(.has-left):not(.has-right) .glyph-scroll,
#designPanel .glyph-group.is-rail-static .glyph-scroll {
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before {
left: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-head-gap, calc(var(--k110-gap, 2px) * 6)) + var(--k110-design-glyph-bracket-guard)) !important;
}
#designPanel .glyph-group.is-rail-scrollable::after {
right: calc(var(--k110-design-glyph-bracket-gap) + var(--k110-design-glyph-bracket-guard)) !important;
}
/* K110 MODULE: DESIGN GLYPH RAIL GEOMETRY AUTHORITY
Brackets define the rail boundary; no visible background layer is allowed. */
@keyframes k110DesignBracketColorRoll {
0%, 100% {
color: var(--k110-neon-roll-c1, var(--glyph-color, var(--k110-panel-primary)));
}
50% {
color: var(--k110-neon-roll-c2, var(--k110-neon-roll-c1, var(--glyph-color, var(--k110-panel-primary))));
}
}
#designPanel #glyphGrid.k110-glyph-grid {
--k110-design-glyph-head-gap: calc(var(--k110-gap, 2px) * 3);
overflow-x: hidden !important;
}
#designPanel .glyph-group {
--k110-design-glyph-bracket-line: 2px;
--k110-design-glyph-bracket-zone: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-arm: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-gap: calc(var(--k110-gap, 2px) * 2);
--k110-design-glyph-bracket-guard: 0px;
--k110-design-glyph-bracket-reserve: 0px;
grid-template-columns: var(--k110-design-glyph-button-h, 64px) minmax(0, 1fr) !important;
column-gap: var(--k110-design-glyph-head-gap) !important;
overflow: visible !important;
}
#designPanel .glyph-group-label,
#designPanel .k110-glyph-group-head {
gap: calc(var(--k110-gap, 2px) * 3) !important;
}
#designPanel .k110-design-glyph-head-source {
margin-bottom: calc(var(--k110-gap, 2px) * 1) !important;
}
#designPanel .k110-design-glyph-head-count {
margin-top: calc(var(--k110-gap, 2px) * 1) !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll {
margin-left: 0 !important;
margin-right: 0 !important;
width: var(--k110-design-rail-available-w, 100%) !important;
max-width: var(--k110-design-rail-available-w, 100%) !important;
padding-left: calc(var(--k110-gap, 2px) * 2) !important;
padding-right: calc(var(--k110-gap, 2px) * 2) !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-rail-scrollable::after {
width: var(--k110-design-glyph-bracket-zone) !important;
top: var(--k110-design-glyph-bracket-top, calc(var(--k110-gap, 2px) * 2)) !important;
bottom: var(--k110-design-glyph-bracket-bottom, calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 4))) !important;
color: var(--glyph-color, var(--k110-panel-primary)) !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before {
left: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-head-gap)) !important;
background:
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
}
#designPanel .glyph-group.is-rail-scrollable::after {
right: 0 !important;
background:
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 100% 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::after {
background:
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
background-size:
var(--k110-design-glyph-bracket-line) 100%,
var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line),
var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) !important;
box-shadow: none !important;
filter: none !important;
animation: k110DesignBracketColorRoll var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1, 8.4s)) ease-in-out infinite !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::after {
background:
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 100% 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
}
#designPanel .glyph-item.is-color-solid {
background: var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) !important;
background-image: none !important;
animation: none !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
background: var(--k110-neon-roll-gradient, var(--glyph-button-color, var(--glyph-color))) !important;
background-color: var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) !important;
background-size: 460% 100% !important;
background-position: 0% 50% !important;
color: #000 !important;
box-shadow:
0 0 3px color-mix(in srgb, var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) 36%, transparent),
0 0 9px color-mix(in srgb, var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) 18%, transparent),
0 0 12px color-mix(in srgb, var(--k110-neon-roll-c2, var(--glyph-button-color, var(--glyph-color))) 14%, transparent) !important;
animation: k110DesignGlyphSmoothColorRoll var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1, 8.4s)) ease-in-out infinite !important;
}
/* K110 MODULE: DESIGN OUTPUT SPACE AND COLOR ROLL CLEANUP
Bottom glow belongs to the glyph area spacing, not inside the output pane. */
#designPanel .k110-design-output-wrap {
--grid-glow-opacity: 0;
--grid-shadow:
inset 0 0 0 var(--k110-panel-line-w, 1px) color-mix(in srgb, var(--k110-panel-primary) 42%, transparent),
0 0 14px color-mix(in srgb, var(--k110-panel-primary) 12%, transparent) !important;
box-shadow: var(--grid-shadow) !important;
border-bottom: var(--k110-panel-line-w, 1px) solid color-mix(in srgb, var(--k110-panel-primary) 48%, transparent) !important;
}
#designPanel .k110-design-output-wrap::after {
content: none !important;
display: none !important;
opacity: 0 !important;
background: none !important;
transform: none !important;
}
#designPanel .k110-design-output-wrap.is-has-design-text {
box-shadow: var(--grid-shadow) !important;
}
#designPanel .k110-design-body {
margin-top: 0 !important;
}
#designPanel #glyphGrid.k110-glyph-grid {
--k110-design-glyph-group-gap: clamp(
calc(var(--k110-gap, 2px) * 4),
0.75dvh,
calc(var(--k110-gap, 2px) * 7)
);
padding-top: calc(var(--k110-gap, 2px) * 5) !important;
row-gap: var(--k110-design-glyph-group-gap) !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll {
padding-top: calc(var(--k110-gap, 2px) * 2) !important;
padding-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 2)) !important;
min-height: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 5)) !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1, 8.4s);
background-color: var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) !important;
background-image: var(--k110-neon-roll-gradient, linear-gradient(110deg, var(--glyph-button-color, var(--glyph-color)) 0%, var(--glyph-button-color, var(--glyph-color)) 100%)) !important;
background-size: 340% 100% !important;
background-repeat: repeat-x !important;
background-position: 0% 50% !important;
filter: saturate(1.14) brightness(1.03) !important;
animation: k110DesignGlyphSmoothColorRoll var(--k110-neon-roll-duration, 8.4s) ease-in-out infinite !important;
}
#designPanel .glyph-item.is-color-solid {
background-color: var(--glyph-button-color, var(--glyph-accent-color, var(--glyph-color))) !important;
background-image: none !important;
animation: none !important;
}
/* K110 MODULE: DESIGN GLYPH BRACKET AND ROLL FINAL AUTHORITY
Brackets are geometry only. Composite color groups use only their source glyph colors. */
#designPanel .glyph-group {
--k110-design-glyph-bracket-line: var(--k110-panel-line-w, 1px);
--k110-design-glyph-bracket-zone: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-arm: calc(var(--k110-gap, 2px) * 10);
--k110-design-glyph-bracket-gap: var(--k110-gap, 2px);
--k110-design-glyph-bracket-top: 0px;
--k110-design-glyph-bracket-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 3));
--k110-design-glyph-bracket-reserve: 0px;
min-height: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 5)) !important;
overflow: visible !important;
}
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-grid-wrap,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-fit,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-smart-scroll,
#designPanel .glyph-group.is-rail-scrollable .glyph-scroll.is-glyph-rail-scroll {
margin-left: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap)) !important;
margin-right: calc(var(--k110-design-glyph-bracket-zone) + var(--k110-design-glyph-bracket-gap)) !important;
width: auto !important;
max-width: none !important;
min-height: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 4)) !important;
padding-top: var(--k110-gap, 2px) !important;
padding-right: var(--k110-gap, 2px) !important;
padding-bottom: calc(var(--k110-design-glyph-scrollbar, 5px) + (var(--k110-gap, 2px) * 3)) !important;
padding-left: var(--k110-gap, 2px) !important;
overflow-x: auto !important;
overflow-y: visible !important;
clip-path: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-rail-scrollable::after {
top: var(--k110-design-glyph-bracket-top) !important;
bottom: var(--k110-design-glyph-bracket-bottom) !important;
width: var(--k110-design-glyph-bracket-zone) !important;
color: var(--glyph-color, var(--k110-panel-primary)) !important;
pointer-events: none !important;
z-index: 4 !important;
box-shadow: none !important;
filter: none !important;
}
#designPanel .glyph-group.is-rail-scrollable::before {
left: calc(var(--k110-design-glyph-button-h, 64px) + var(--k110-design-glyph-head-gap)) !important;
background:
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
}
#designPanel .glyph-group.is-rail-scrollable::after {
right: 0 !important;
background:
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-glyph-bracket-line) 100% no-repeat,
linear-gradient(currentColor, currentColor) 100% 0 / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat,
linear-gradient(currentColor, currentColor) 100% 100% / var(--k110-design-glyph-bracket-arm) var(--k110-design-glyph-bracket-line) no-repeat !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::before,
#designPanel .glyph-group.is-glyph-color-roll-group.is-rail-scrollable::after {
color: var(--k110-neon-roll-c1, var(--glyph-color, var(--k110-panel-primary))) !important;
box-shadow: none !important;
filter: none !important;
animation: k110DesignBracketColorRoll var(--k110-neon-roll-duration, var(--k110-neon-roll-speed-1, 8.4s)) ease-in-out infinite !important;
}
#designPanel .glyph-item.is-color-mixed,
#designPanel .glyph-item.is-color-rolling {
--k110-neon-roll-duration: var(--k110-neon-roll-speed-1, 8.4s);
background: var(--k110-neon-roll-gradient, linear-gradient(110deg, var(--glyph-button-color, var(--glyph-color)) 0%, var(--glyph-button-color, var(--glyph-color)) 100%)) !important;
background-color: var(--k110-neon-roll-c1, var(--glyph-button-color, var(--glyph-color))) !important;
background-size: 360% 100% !important;
background-repeat: repeat-x !important;
background-position: 0% 50% !important;
color: #000 !important;
box-shadow: none !important;
filter: saturate(1.08) brightness(1.01) !important;
animation: k110DesignGlyphSmoothColorRoll var(--k110-neon-roll-duration, 8.4s) ease-in-out infinite !important;
}
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-label,
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-label-pill,
#designPanel .glyph-group.is-glyph-color-roll-group .glyph-group-count,
#designPanel .glyph-group.is-glyph-color-roll-group .k110-design-glyph-head-source,
#designPanel .glyph-group.is-glyph-color-roll-group .k110-design-glyph-head-count {
text-shadow: none !important;
filter: none !important;
}
/* K110 FEATURE: DESIGN TAB REDESIGN FINAL AUTHORITY
DOM order is the visual-order source. Keep overrides scoped to the design
panel and contribution modal; do not derive dimensions from the guide. */
#designPanel.k110-panel.is-active > #designStatus {
flex: 0 0 var(--k110-design-bottom-slot-h) !important;
height: var(--k110-design-bottom-slot-h) !important;
min-height: var(--k110-design-bottom-slot-h) !important;
}
#designPanel.k110-panel.is-active > .k110-panel-frame {
flex: 1 1 0 !important;
height: auto !important;
max-height: none !important;
min-height: 0;
}
#designContributionModal .k110-contribution-box.k110-c-popup-contribution {
--k110-contribution-copy-size: max(var(--k110-type-body), 18px);
}
#designContributionModal .k110-contribution-intro,
#designContributionModal #contribKoreanText::placeholder {
font-size: var(--k110-contribution-copy-size);
}
#designContributionModal
.k110-contribution-box.is-side-layout
.k110-contribution-alien-card {
border-left: 0;
}
#designContributionModal
.k110-contribution-box.is-side-layout
.k110-contribution-compare > div + div {
border-left: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
}
@media (max-width: 560px) {
#designContributionModal
.k110-contribution-box.is-side-layout
.k110-contribution-compare > div + div {
border-left: 0;
border-top: var(--k110-line-1) solid color-mix(in srgb, var(--k110-popup-accent) 42%, transparent);
}
}
/* K110 FEATURE: DISCOVER TAB REDESIGN FINAL AUTHORITY
JSX natural order is the visual-order source. Existing layout tokens are
reused; no dimensions are derived from the location guide.
PBGSPQA-1198 요청1: 글리프 → 타이틀바 → 입력창·버튼 → 목록 (모바일 동일).
입력 행(#discoverBottomRow)이 카드 안 타이틀바와 목록 사이로 들어갔으므로 박스는
스테이지 한 행만 갖고, 카드 트랙에 간격 + 입력 행 두 트랙을 더한다.
useK110AutoFit 의 높이 배분도 이 두 트랙만큼을 먼저 뺀 뒤 나눈다. */
#discoverPanel .k110-discover-box {
grid-template-rows: minmax(0, 1fr) !important;
}
#discoverPanel #discoverGlyphStage {
grid-row: 1;
}
#discoverPanel .k110-discover-card {
grid-template-rows:
minmax(var(--k110-discover-random-min-h, 150px), var(--k110-discover-random-h, 1fr))
var(--k110-bar-h)
calc(var(--k110-button-cluster-gap) * 2)
var(--k110-discover-control-h)
calc(var(--k110-button-cluster-gap) * 2)
var(--k110-panel-line-w)
var(--k110-discover-list-h, calc(var(--k110-discover-row-h) * 2))
var(--k110-discover-after-list-gap, calc(var(--k110-button-cluster-gap) * 2));
}
#discoverPanel .k110-discover-control-gap {
height: calc(var(--k110-button-cluster-gap) * 2);
min-height: calc(var(--k110-button-cluster-gap) * 2);
}
/* PBGSPQA-1198 요청1 후속(A안): 모바일 세로 타이핑 압축 모드.
입력 행이 글리프 아래로 내려가 모바일 키보드가 입력창을 덮었다(키보드 락이 스크롤을 .k110-ui
윗변에 고정하므로 브라우저가 입력창을 올려 주지 않는다). 발견하기 입력창에 포커스가 있고 키보드가
열린 동안에만 useDiscoverTypingFit 이 박스에 `is-typing-compact` 와
`--k110-discover-typing-random-h`(키보드 위에 남는 높이)를 건다.
- 글리프 트랙: 하한을 0 으로 내리고 상한을 그 높이로 바꾼다. `--k110-discover-random-h` 에만
`!important` 를 붙인 이유는 useK110AutoFit 이 같은 변수를 박스에 인라인으로 쓰기 때문이다(인라인
일반 선언은 author `!important` 로만 이긴다). 나머지 두 변수는 인라인이 없어 특이도 (1,2,0) 으로
모바일 세로 블록 (1,1,0) 을 이긴다.
- 글리프 크기: 트랙 높이의 0.6 배(32~96px). 글리프 줄 높이 1.16em 이 트랙 안에 들어온다.
- 계측 그리드: 낮아진 트랙에서 계측선이 글리프와 겹치므로 입력 중에만 숨긴다. visibility 가 아니라
opacity 로 숨기는 이유는 width 라벨이 `visibility: visible !important` 라 부모 visibility 로는
숨지 않기 때문이다. */
@media (max-width: 767px) and (orientation: portrait) {
#discoverPanel .k110-discover-box.is-typing-compact {
--k110-discover-random-min-h: 0px;
--k110-discover-random-h: var(--k110-discover-typing-random-h, 96px) !important;
--k110-discover-display-size: clamp(32px, calc(var(--k110-discover-typing-random-h, 96px) * 0.6), 96px);
}
#discoverPanel .k110-discover-box.is-typing-compact #discoverGlyphGrid {
opacity: 0;
}
}
#discoverPanel .k110-discover-head {
grid-template-columns: minmax(0, 1fr) !important;
}
#discoverPanel .k110-discover-head.has-feedback {
/* QA002-2: 첫 트랙 최소폭만 1/3 로 두고 상한을 max-content 로 — 360px 이하에서
`외계어 발견하기`(111px) 가 1/3 칸(111.5px→98.9px)에 두 줄로 접혀 bar 의
overflow: hidden 에 잘렸다. 1/3 이 충분한 폭에서는 종전과 같은 값이 나온다. */
grid-template-columns:
minmax(var(--k110-discover-bar-w), max-content)
minmax(0, 1fr) !important;
column-gap: calc(var(--k110-button-cluster-gap) * 2);
}
#discoverPanel .k110-discover-feedback {
min-width: 0;
width: 100%;
max-width: 100%;
}
#discoverPanel .k110-discover-bar {
width: 100%;
max-width: 100%;
}
#discoverPanel .k110-discover-existing-row {
--discover-alien-w: 3.8em;
grid-template-columns:
minmax(0, 1.3fr)
minmax(var(--discover-alien-w), max-content)
minmax(0, 0.9fr)
var(--discover-votes-w) !important;
}
#discoverPanel .k110-discover-existing-alien {
color: #FFEE00;
font-size: var(--k110-type-heading);
font-weight: 900;
line-height: 1;
text-align: center;
text-shadow: 0 0 11px currentColor;
}
/* PBGSPQA-1196: 발견하기 등록 팝업은 만들기 팝업 규칙(K110 MODULE: POPUP AUTH/REGISTER)을 같이 쓴다.
종전의 발견하기 전용 팝업 규칙(좌우 2열 카드, 노란 가운데 정렬 안내문, 장식 없는 버튼 등)은 이 블록이
문서 뒤에 있어 만들기 규칙을 덮었으므로 지웠다. 마지막까지 남아 있던 오류 영역 규칙도 만들기 팝업에
같은 영역을 붙이면서 공유 블록으로 옮겼다. 발견하기 팝업 모양을 바꿀 때는 여기에 규칙을 다시 늘리지
말고 공유 블록을 고친다. */
/* K110 FEATURE: MY HISTORY FAIL-CLOSED FILTER CONTROLS */
.k110-history-head h3 {
margin-top: 0;
}
button.history-stat-filter {
appearance: none;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
box-shadow: none;
}
button.history-stat-filter:hover,
button.history-stat-filter:focus-visible,
button.history-stat-filter.is-active {
transform: none;
box-shadow: none;
}
button.history-stat-filter.is-active span {
text-decoration: underline;
}
/* K110 FEATURE: PHONE LANDSCAPE (SHORT LANDSCAPE) LAYOUT BUDGET
*
* 대상: 844x390 처럼 **가로가 넓고 세로가 짧은** 뷰포트. 조건은 세 항의 교집합이다.
*
* min-width: 768px -> 390x844 같은 폰 세로를 배제한다(390 < 768).
* orientation: landscape -> 768x1024 태블릿 세로를 배제한다.
* max-height: 520px -> 1280x800 데스크톱을 배제한다(800 > 520).
*
* `max-height: 520px` 상한의 근거: 실측 대상 폰 가로의 단축이 390px 이고, 흔한 폰 가로
* 높이대는 375~430px 이다. 데스크톱 최소 높이대(800px)와 태블릿 가로 높이(768px)를 확실히
* 떨어뜨리면서 폰 가로대를 모두 덮는 구간이 520px 이다. 이 상한이 곧 `1280x800` 무영향의
* 유일한 근거이므로, 데스크톱 화면을 다시 검증하지 않고 이 값을 올리지 마라.
*
* `768x1024` 를 배제하는 의도: 태블릿 세로의 세로 스택은 원래 설계 의도일 수 있어 기획
* 확인 대기 상태다(사용자 결정 1=c). 그래서 `@media (orientation: portrait)`(1043행)과
* `@media (min-width: 1024px) and (orientation: landscape)`(11212행)의 **조건식은 손대지
* 않았고**, 대신 폰 가로만 걸리는 새 조건을 여기 추가했다. `768x1024` 는 orientation 과
* max-height 두 항에서 각각 탈락한다.
*
* 이 위치에 두는 이유: 844x390 에서 위 두 기존 블록이 모두 미적용인 것을 측정으로 확인했고,
* 이 블록이 덮는 규칙(11908·12744·14025·17770~17790행)보다 뒤에 있으면 동일 특이도에서
* 이 블록이 이긴다. 파일 맨 끝이 아니라 `ANONYMOUS PARTICIPATION UI FINAL AUTHORITY`
* **앞**에 둔 이유는 그 가드가 파일 끝까지를 검사 범위로 잡기 때문이다
* (`tests/unit/k110/staticScan.test.ts` 의 `css.lastIndexOf(marker)` 이후 전체를 슬라이스해
* `display: none` 계열을 금지한다). 새 블록을 뒤에 붙이면 무관한 규칙이 그 가드에 걸린다.
*
* 폭 기하는 여기서 공급하지 않는다. `body.k110-layout-landscape`(14029~14033행)의
* `--k110-panel-w: calc(50vw - gutter)` / `--k110-hero-w` 가 이미 폭에 비례하는 식이라
* 844px 폭에서도 좌우 2단이 정확히 맞는다(실측: 히어로 391.6px + 패널 406.8px + 거터 3개).
* 여기서 다시 정의하면 값이 갈릴 자리만 생긴다.
*/
@media (min-width: 768px) and (orientation: landscape) and (max-height: 520px) {
body.k110-layout-landscape {
/*
* `--k110-screen-h` 를 가시 높이로 고정한다.
*
* `body.k110-layout-portrait`(14300행)에는 이미 같은 선언이 있다. 폰 가로를 landscape
* 로 재분류하면서 그 안전망이 이 뷰포트에서 사라지므로 여기에 대응물을 둔다.
* JS(`K110App` 의 `useK110LayoutMetrics`)도 이 계열 뷰포트에서 `--k110-screen-h` 를
* 계속 `visibleHeight` 로 주입하지만, iOS Safari 의 동적 툴바처럼
* `visibleHeight < layoutHeight` 인 상황에서 값이 두 출처로 갈리지 않게 CSS 쪽에서도
* 같은 결론을 못박는다. `--k110-visible-h` 의 CSS 폴백은 `100dvh` 라 JS 가 없어도
* 동적 툴바를 반영한다.
*/
--k110-screen-h: var(--k110-visible-h);
/*
* 히어로 첫 줄 위 잉크 가드. 루트 값은 `clamp(72px, 10svh, 96px)` 이고 390px 뷰포트에서
* clamp 하한 72px 에 걸린다. 뷰포트 높이의 18%를 빈 여백으로 쓰는 셈이어서 히어로
* 타이틀이 첫 화면 아래로 밀려났다(실측: 타이틀 top 153px). 실측 타이틀 크기 54.6px
* 기준으로 필요한 상단 잉크 여유는 30px 안쪽이므로 24px 로도 잘리지 않는다.
*/
--k110-hero-glyph-top-guard: clamp(24px, 6svh, 40px);
/*
* 패널 열의 세로 예산. 루트 식(14025행)과 계산은 같고 **하한만 260px -> 180px** 로
* 내렸다. 390px 뷰포트에서 실제 가용 높이는 `390 - 헤더 71 - 푸터예산 64 = 255px` 인데
* 260px 하한이 그것을 이겨 패널이 푸터 쪽으로 5px 밀려 있었다. 하한을 내리면 식이
* 값을 정하게 되어 패널 하단과 푸터 상단 사이에 의도한 10px 간격이 정확히 남는다.
*
* `--k110-panel-frame-h` 를 같은 요소에서 다시 선언하는 이유: 커스텀 프로퍼티는
* 선언된 요소에서 var() 가 치환된다. 루트의 `--k110-panel-frame-h:
* var(--k110-panel-available-h)` 는 이미 루트 값(260px 하한)으로 굳어 상속되므로,
* body 에서 available-h 만 바꾸면 frame-h 가 따라오지 않는다.
*
* 높이 출처를 `var(--k110-screen-h)` 에서 `100svh` 로 바꾼 이유 (소프트 키보드 감사).
*
* 이 블록의 `--k110-screen-h` 는 `var(--k110-visible-h)` 이고, 그것은 JS 가 주입하는
* `visualViewport.height` 다. 즉 **소프트 키보드가 올라오면 같이 줄어든다.** 폰 가로에서
* 200px 키보드를 올리면 `390 -> 190px` 이 되어 이 식이 `max(180px, 55px) = 180px` 을
* 내놓고, 패널이 255 -> 180px 로 압축된다. 그때 실측된 결과는 예산 절약이 아니라 붕괴였다.
*
* - translate: `.k110-panel-main` 의 `translate-input` / `translate-output` 트랙이
* `0px` 로 무너지고, `height: 0` + `overflow: hidden` 인 `.k110-translate-input-wrap`
* 이 `#normalInput`(20px) 을 전부 잘라낸다. `document.elementFromPoint` 가 입력
* 자리에서 25/25 표본 모두 `#runTranslateBtn` 을 반환했다 — **입력창을 탭할 수 없다.**
* - design: `.k110-design-body` 의 글리프 트랙이 `73.5px -> 0px` 로 무너져
* `#glyphGrid` 가 22px 로 붕괴하고 `.k110-panel-main` 이 23.7px 을 하드 클립한다.
* A-3(3장)과 같은 종류의 결함이 키보드 상태에서 재발한다.
* - discover: `.k110-ui` 의 콘텐츠 손실이 122.7 -> 197.7px 로 늘어난다.
*
* 세 경우 모두 `.k110-ui` 가 `position: fixed` 라 문서 스크롤로 복구되지 않는다
* (실측: `scrollY 365 -> 366` 에서 모든 좌표 불변). 즉 도달 불가 손실이다.
*
* `100svh` 는 **소형 뷰포트 높이**여서 가상 키보드에 반응하지 않고, 브라우저 UI 가 가장
* 클 때의 높이이므로 iOS 동적 툴바 상황에서도 실제 가시 높이보다 크지 않다. 따라서
* 키보드는 패널을 압축하는 대신 패널 하단을 **덮기만** 한다. 이는 모바일 세로가 이미
* 택한 방식과 같다 — `useK110Mobile` 의 키보드 락이 `keyboardLock.visualH` 로 키보드 이전
* 높이를 고정해 세로 레이아웃을 리플로우하지 않는다(실측: 390x844 에서 키보드 260/300/336px
* 전부 `--k110-visible-h: 844px` 유지). 폰 가로에만 그 안전망이 없었다.
*
* 무영향 근거: 키보드가 닫힌 `844x390` 에서 `100svh == var(--k110-screen-h) == 390px`
* 이므로 계산값이 그대로 `255px` 이다(런타임에 이 선언만 켜고 끄며 3개 탭 전수 대조 —
* `.k110-ui` 높이/위치, 모든 요소 히트 판정, 클리핑 손실, 문서 크기가 완전히 동일했다).
* `--k110-screen-h` 자체는 건드리지 않았으므로 9.2 의 결정(높이 출처 판정 분리)도 그대로다.
*
* 이 보호가 성립하는 전제: viewport meta 의 `interactive-widget` 기본값이
* `resizes-visual` 이고, 그 경우 가상 키보드는 visual viewport 만 줄이므로 레이아웃
* 뷰포트와 초기 컨테이닝 블록이 그대로여서 `svh` 가 변하지 않는다. `app/layout.tsx` 의
* `export const viewport` 는 `width` / `initialScale` / `viewportFit` 만 지정하고
* `interactive-widget` 을 설정하지 않으므로 기본값이 적용된다(실측 meta:
* `width=device-width, initial-scale=1, viewport-fit=cover`).
*
* 따라서 `interactive-widget=resizes-content` 를 추가하면 키보드가 레이아웃 뷰포트까지
* 줄여 `svh` 도 함께 작아지고 **이 보호가 무력화된다.** 그 값을 넣으려면 폰 가로 키보드
* 상태를 다시 측정해야 한다.
*/
--k110-panel-available-h: max(
180px,
calc(
100svh - var(--k110-layout-header-bottom) -
var(--k110-layout-footer-reserve)
)
);
--k110-panel-frame-h: var(--k110-panel-available-h);
/*
* `#designPanel` 만 `--k110-panel-max-h` 를 높이 권위로 쓴다
* (`facade:11908`, `@media (min-width: 768px)` 블록. ID 특이도로 14140행의
* `--k110-panel-available-h` 를 이긴다). 그 값은 `100svh - panel-top` 계열이라
* 390px 뷰포트에서 336px 이 되어 패널이 푸터와 뷰포트 아래로 336-255=81px 넘쳤다.
* 두 권위를 같은 예산으로 묶는다.
*/
--k110-panel-max-h: var(--k110-panel-available-h);
}
/*
* A-3: design 탭 글리프 그리드가 화면에서 사라지는 문제.
*
* 원인은 클리핑이 아니라 높이 예산 초과다. 255px 패널 안에서 종전 소요는
* 상태줄 48 + 패널내 서브내비 54 + 상단 커맨드바 34.7 + 입력 78 + 출력 142 = 356.7px 이고,
* 초과분을 `.k110-panel-main` 의 `overflow: hidden`(11913행)이 잘라내 `#glyphGrid` 가
* 클립선 아래 100% 위치에 놓였다. 그래서 **클리핑 규칙은 그대로 두고 예산만 줄인다.**
* 클리핑을 풀면 그리드가 패널 밖으로 새는 새 결함이 생긴다.
*/
#designPanel {
/*
* 세 값 모두 390px 뷰포트에서 루트 clamp 하한에 걸려 고정돼 있었다
* (입력 78px, 상태 48px, 글리프 버튼 64px). svh 기준으로 다시 잡아 낮은 뷰포트에서
* 값이 따라 내려가게 한다. 실측 결과 입력 42.9 / 상태 31.2 / 버튼 31.2px.
*/
--k110-design-top-input-h: clamp(42px, 11svh, 58px);
--k110-design-bottom-slot-h: clamp(30px, 8svh, 40px);
--k110-design-glyph-button-h: clamp(30px, 8svh, 40px);
}
#designPanel .k110-design-output-wrap {
/*
* 출력 표시 글자 크기가 `clamp(72px, 9vw, 150px)` 로 **폭 기준**이었다. 폰 가로는 폭이
* 넓고 세로가 짧아서 9vw = 76px 이 되고, 그 결과 출력 높이 하한 142px 이 그대로 걸렸다.
* 짧은 세로에서는 높이 기준(svh)으로 잡아야 값이 따라 내려간다. 실측 35.1px.
*/
--k110-design-output-display-size: clamp(32px, 9svh, 48px);
--k110-design-output-h: clamp(
56px,
calc(var(--k110-design-output-display-size) + var(--k110-bar-h, 35px)),
92px
);
}
/*
* 빈 하단 트랙을 걷는다.
*
* 12744행의 `grid-template-rows: minmax(0, 1fr) var(--k110-design-bottom-slot-h)` 는
* `#designStatus` 가 `.k110-design-body` 안에 있던 시절의 정의다. design 탭 재설계
* (17765행 주석)에서 `#designStatus` 를 `#designPanel` 직계 자식으로 올렸으므로 2행은
* 지금 **아무 아이템도 없는 빈 트랙**이고, 그만큼을 `#glyphGrid` 에서 빼앗는다.
* 데스크톱에도 같은 낭비가 있으나 그쪽은 여유가 있어 증상이 없다. 승인된 화면의 계산값을
* 바꾸지 않기 위해 12744행은 두고 이 뷰포트에서만 단일 트랙으로 만든다.
*/
#designPanel .k110-design-body {
grid-template-rows: minmax(0, 1fr) !important;
}
/*
* `#glyphGrid` 의 자체 패딩(계산값 위 10px / 아래 12px)은 **여기서 줄이지 않는다.**
*
* 시도했다가 되돌렸다. `#designPanel #glyphGrid`(ID 2개)로는 17647행
* `#designPanel #glyphGrid.k110-glyph-grid { padding-top: ... !important }`(ID 2개 + 클래스)를
* 특이도에서 이기지 못해 선언이 죽는다. 이기려면 클래스를 붙여 특이도를 맞춰야 하는데,
* 이 환경에서는 글리프 데이터셋이 로드되지 않아 그리드가 항상 빈 상태(자식 0개)라
* 패딩 축소의 실효를 실측으로 확인할 수 없었다. 위 예산 축소만으로 A-3 합격 기준
* (`.k110-panel-main` 세로 손실 0, 그리드가 클리핑 박스 안)은 이미 충족한다.
* 글리프가 채워진 상태에서 한 줄이 안 보인다면, 그때 17647행과 함께 다루는 것이 맞다.
*/
/*
* discover 탭: `#discoverGlyphStage` 하단 122.7px 이 도달 불가로 잘리는 문제.
*
* 잘리는 것은 `#discoverExistingList` — **이미 등록된 해석 목록**이다. 버튼을 못 누르는
* 결함이 아니라 판단 근거가 안 보이는 결함이고, 그 결과 사용자가 중복 등록을 시도한다.
* `.k110-ui` 가 `position: fixed` 라 문서 스크롤로 복구되지 않는다.
*
* 원인은 A-3 과 같은 종류다 — 클리핑이 아니라 예산 초과다. `.k110-discover-card` 는
* 6트랙 그리드(14441행)이고 390px 뷰포트에서 실측 트랙 합이
* `150 + 34.66 + 4 + 1 + 98 + 4 = 291.66px` 인데 카드에 주어진 높이는 169px 이다
* (패널 255px 중 `#discoverBottomRow` 컨트롤 86px 를 뺀 값). 초과분을 `.k110-ui` 의
* `overflow: hidden` 이 잘라냈다. **그래서 클리핑은 그대로 두고 예산만 줄인다.**
* `.k110-ui` 의 hidden 을 풀면 패널 밖으로 콘텐츠가 새는 새 결함이 생긴다.
*
* 291.66px 의 내역과 각 값을 고른 근거:
*
* 1) 랜덤 글리프 트랙 150px. `useK110AutoFit` 은 이 뷰포트에서 이미 카드 높이를 보고
* `--k110-discover-random-h: 96px` 을 인라인으로 계산해 넣는다. 그런데 트랙식이
* `minmax(var(--k110-discover-random-min-h), var(--k110-discover-random-h))` 이고
* min 쪽 CSS 값이 `clamp(150px, 22svh, 260px)` = 150px 이라 **min > max 가 되어
* min 이 이긴다.** 즉 JS 의 자동 맞춤이 CSS 하한에 막혀 있었다. 하한을 48px 로
* 내리고 max 를 `1fr` 로 바꿔, 남는 높이를 이 트랙이 흡수하게 한다(실측 62.95px).
* `1fr` 은 목록 트랙이 바뀌어도 합이 저절로 카드 높이에 맞으므로 값이 갈릴 자리가
* 없다. 14444행이 이미 `var(--k110-discover-random-h, 1fr)` 로 같은 의도를 폴백에
* 적어 두었다.
*
* 2) 목록 트랙 98px. `--k110-discover-row-h` 가
* `vote-size 34 + row-pad-y 7*2 + line-w 1 = 49px` 로 **폭·세로 어디에도 반응하지
* 않는 고정식**이어서 390px 뷰포트에서도 49px 두 줄을 요구했다. 행 내용은
* `--k110-type-body` 16px / line-height 1.2 = 19.2px 이므로 svh 기준으로 다시 잡아도
* 글자가 잘리지 않는다(실측 31.2px). 두 줄 유지는 데스크톱과 같은 체감이다.
*
* 3) 글리프 표시 크기. `--k110-discover-display-size` 가 `clamp(72px, 9vw, 150px)` 로
* **폭 기준**이라 폰 가로에서 9vw = 75.96px 이 되고, 62.95px 트랙을 88.1px 글리프가
* 넘겼다. A-3 의 design 출력 크기와 같은 종류의 실수다. svh 기준으로 바꿔
* 실측 39px / 글리프 높이 45.2px 로 트랙 안에 들어온다.
*
* `useK110AutoFit` 에도 글리프를 트랙에 맞춰 줄이는 로직(`glyph.style.fontSize`)이
* 있지만 이 탭에서는 죽어 있다. 15785행
* `#discoverPanel .k110-discover-random-module.k110-c-panel-row-transparent
* .k110-discover-glyph { font-size: var(--k110-discover-display-size) !important }`
* 가 인라인 스타일을 이긴다. 그래서 실제로 듣는 레버는 이 변수뿐이다.
*
* `!important` 를 붙인 이유: 위 세 변수는 `useK110AutoFit` 이 `.k110-discover-box` 에
* **인라인으로** 써 넣는다(row-h 49px / list-h 98px / random-h 96px). 인라인 일반 선언은
* 셀렉터 특이도로는 이길 수 없고 author `!important` 로만 이긴다. 선택자 자체도
* `#discoverPanel .k110-discover-box`(1,1,0)로 두어 원 선언 `.k110-discover-box`(0,1,0,
* 5469~5477행)를 특이도로도 이긴다.
*
* 실측 결과(844x390, DPR 3, mobile+touch+landscape):
* 트랙 `150 34.66 4 1 98 4`(합 291.66) -> `62.95 34.66 4 1 62.39 4`(합 169.0)
* `.k110-ui` 기준 세로 손실 122.7px -> 0px, `#discoverExistingList` 하단이
* `.k110-ui` 하단보다 4px 위. 패널 내 조작 요소 7개 전부 히트 9/9.
*
* 목록이 길어질 때: `.k110-discover-existing-list` 는 이미
* `overflow-y: auto` + `.is-ready { height: var(--k110-discover-list-h) }` 라 트랙 높이에
* 고정된 **내부 스크롤 컨테이너**다. 그래서 항목 수가 늘어도 트랙이 자라지 않는다
* (실측: 더미 3/10/30개에서 clientHeight 62px 고정, scrollHeight 만 증가, 어떤 행도
* `.k110-ui` 밖으로 나가지 않음). 별도 스크롤 컨테이너를 새로 만들지 않은 이유가 이것이다.
*
* 남는 현상 하나: 계측 그리드(`#discoverGlyphGrid`)는 랜덤 모듈보다 32px 아래로 삐져나온다.
* `useK110AutoFit` 이 그리드 높이에 `max(80px, ...)` 하드 하한을 두어 62.95px 트랙에
* 들어올 수 없다. 그대로 둔 이유: 이 요소는 `aria-hidden` + `pointer-events: none` 인
* 장식용 계측 오버레이이고, 15828행 `CSS-99 DISCOVERY RANDOM GLYPH NO-MASK AUTHORITY` 가
* **"글리프와 계측 그리드는 행을 넘칠 수 있다"** 를 명시적으로 허용한다. 조작을 막지
* 않는다(히트 판정 전수 확인). 이걸 없애려면 JS 하한을 건드려야 하고 그건 이 결함의
* 범위가 아니다.
*/
#discoverPanel .k110-discover-box {
--k110-discover-row-h: clamp(28px, 8svh, 38px) !important;
--k110-discover-list-h: calc(var(--k110-discover-row-h) * 2) !important;
--k110-discover-random-min-h: 48px !important;
--k110-discover-random-h: 1fr !important;
--k110-discover-display-size: clamp(30px, 10svh, 48px) !important;
}
}
/* K110 MODULE: DESIGN GLYPH GRID SCROLL CHAINING
*
* design 탭에서 `#glyphGrid` 위의 휠·스와이프가 그 자리에서 사라지던 결함을 고친다.
* 세로 축 한정으로 스크롤 체이닝을 되돌린다. 이 파일에서 이 결함에 대한 변경은 이 한 선언뿐이다.
*
* (a) 7539행이 단축이라 세로 축만 되돌린다
* 7539행 `.k110-glyph-grid { overscroll-behavior: contain }` 은 단축 속성이라 두 축을 함께
* 설정한다. 세로 축에서 그 격리가 하던 일은 「그리드가 소비할 수 없는 입력을 조상에게 넘기지
* 않는 것」인데, 그리드가 비어 있거나(입력 전, 자식 0개) 이미 끝까지 스크롤된 상태에서는 소비할
* 여지가 0 이라 입력이 그 자리에서 사라졌다. 수정 전 실측: 1280x800 에서 문서 여지 205px 이
* 남았는데 휠 3x150 에 문서 / `.k110-root` / `.k110-ui` / `#designPanel` / `#glyphGrid` 의
* `scrollTop` 이 전부 0. 그래서 7539행 원문은 그대로 두고 세로 축 롱핸드만 되돌린다.
*
* (b) 가로 축은 건드리지 않는다
* 14932행 주석이 「세로 스크롤은 그리드, 가로 스크롤은 각 글리프 레일이 갖는다」로 축 소유권을
* 명시한다. 레일의 최종 권한 블록(셀렉터 15011~15016행)이 그 의도대로
* `overscroll-behavior-x: contain`(15039행) / `overscroll-behavior-y: auto`(15040행) 를 선언해
* 가로 축 격리를 유지한다. 여기서 단축을 쓰면 `#glyphGrid` 의 `overscroll-behavior-x` 까지 `auto`
* 로 함께 풀려 가로 레일 입력이 페이지를 가로로 끌 수 있다. 그래서 단축이 아니라 `-y` 롱핸드
* 하나만 쓴다. 이 계약은 `tests/unit/k110/staticScan.test.ts` 의 정적 검사로도 잡는다.
*
* (c) 무엇이 움직이는지는 뷰포트마다 다르고 그것이 의도다
* 가로 화면(1280x800, 844x390)은 문서가 움직이고 세로 화면(768x1024, 390x844, 360x640,
* 320x568)은 `.k110-root` 가 움직인다. 세로 화면에서 `.k110-root` 가 페이지 스크롤러인 것은 이
* 규칙이 만드는 것이 아니다. 수정 전에도 그리드 밖의 모든 영역이 그 스크롤러를 쓴다 — 390x844
* 문서 950 에서 히어로 `.k110-root` +450, `#designStatus` +450, 디자인 패널 바 +300 실측.
* 이 규칙은 그리드만 그 흐름에서 빠져 있던 것을 되돌린다.
*
* (c-대조) 원인은 「여지 0 인 스크롤 컨테이너」가 아니라 「`contain`」이다
* 같은 페이지 translate 탭의 `#normalInput` 이 자연 실험 대조군이다. 계산 `overflow-y: auto` 인
* 스크롤 컨테이너이고 세로 여지 0 이고 휠 히트 대상이 자기 자신이며 중간 노드의 소비 여지도 0 인,
* `#glyphGrid` 와 같은 구조다. 같은 뷰포트 390x844, 같은 문서 위치 950 에서 아래 3x150 을 굴리면
* `.k110-root` 가 +450 움직인다(`#glyphGrid` 는 같은 조건에서 0 이었다). 두 요소의 차이는
* `overscroll-behavior` 하나뿐이다 — `#normalInput` 은 선언이 없어 `auto`, `#glyphGrid` 는 7539행
* 단축으로 `contain`. 그래서 되돌릴 대상이 `overflow-y` 나 높이 예산이 아니라 이 한 속성이다.
*
* (d) `!important` 를 쓰지 않는다
* 7539행 선언이 not important 이고, `#glyphGrid` 에 매치되는 `overscroll-behavior` 선언은 파일
* 전체에 그것 하나뿐이다. 이 위치(마지막 최종 권한 마커 앞)에서 특이도 (0,2,1) 이면 그냥 이긴다.
* 설계 단계 탐침에서 `!important` 를 붙인 형태와 붙이지 않은 형태 모두 계산값이
* `contain -> auto` 로 바뀌었고, 불필요한 `!important` 를 늘리지 않는 쪽을 골랐다. 적용 후
* 1280x800 에서 이 형태의 계산값을 다시 재 `overscroll-behavior-y: auto` /
* `overscroll-behavior-x: contain` 을 확인했다.
*
* TS 는 건드리지 않았다. `useK110Mobile.onTouchMove`(570행)는 임계 미만 스와이프를 이미
* `preventDefault` 없이 브라우저에 위임한다(합성 터치 실측: 첫 `touchmove` 의
* `defaultPrevented === false`). 이 규칙이 고치는 지점이 정확히 「위임받은 브라우저가 `contain`
* 때문에 막혀 있던 것」이다.
*/
#designPanel #glyphGrid.k110-glyph-grid {
overscroll-behavior-y: auto;
}
/* K110 MODULE: PORTRAIT PHANTOM SCROLL — 좁은 세로 팬텀 스크롤 제거와 페이지 스크롤러 단일화
*
* 폭 767px 이하 세로에서 휠을 계속 내리면 `.k110-ui` 가 통째로 화면 위로 밀려나 별 배경만 남던
* 결함을 고친다. 이 파일에서 이 결함에 대한 변경은 아래 세 선언(C1·C2·C3)뿐이다.
*
* (a) 셋이 각각 무엇을 없애는지 — 그리고 셋 중 둘만 배포하면 지금보다 나쁘다
* C1 `--k110-tab-tail-h: 0px` — 탭 푸터 버튼(58px)의 의사요소가 11301행
* `height: calc(100% + var(--k110-tab-tail-h, 120svh))` 로 버튼 아래 120svh 를 뻗던 장식 꼬리를
* 없앤다. 푸터와 `.k110-ui` 가 둘 다 `overflow: visible` 이라 그 꼬리가 `.k110-root` 의 스크롤
* 여지 **전부**였다(390x844 여지 1013 = 844 × 1.2, 490x900 여지 1080 = 900 × 1.2 실측).
* C2 `body { overscroll-behavior-y: auto }` — 14317행 `html, body` 묶음이 `body` 를 「여지 0 인
* 스크롤 컨테이너 + `overscroll-behavior-y: none`」으로 만들어 체인이 거기서 끊겼고, 그래서
* 입력이 `html` 의 여지에 닿지 못했다. 그 장벽만 연다.
* C3 `.k110-root { overflow: clip }` — 팬텀이 사라진 뒤 남는 경쟁 스크롤러를 없앤다.
* `useK110Mobile` 의 스크롤 조작은 전부 `window.scrollY`/`window.scrollTo` 이고
* `.k110-root.scrollTop` 을 읽거나 쓰는 코드는 한 줄도 없다. 즉 JS 는 처음부터 문서를 페이지
* 스크롤러로 가정하며, 여지 0 인 `auto` 컨테이너를 남겨 두면 콘텐츠가 조금이라도 넘치는 순간
* 경쟁 스크롤러가 다시 생겨 화면과 JS 판정이 또 어긋난다.
* **셋을 한 커밋으로 함께 넣는다. 중간 상태가 전부 지금보다 나쁘다**(`design.md` 5장, 실측) —
* C1 단독은 좁은 세로에서 페이지 이동이 **450px → 1px** 로 아예 죽고(팬텀이 유일한 수용처였다),
* C2 단독은 팬텀 1013px 을 먼저 소비하므로 빈 화면 증상이 그대로 남고, C3 은 C1 없이는 그
* 1013px 을 `clip` 으로 잘라 스크롤을 더 죽인다.
*
* (b) `html` 은 건드리지 않는다
* `overscroll-behavior` 는 **루트 요소에 선언된 값만 뷰포트로 전파**되고, 그 전파가 당겨서
* 새로고침(Android Chrome)과 러버밴딩(iOS Safari)을 억제한다. `body` 의 값은 전파되지 않고
* `body` 로 들어오는 체이닝만 지배한다. 실측이 그것을 확증했다 — `body` 만 완화한 형태가
* `html, body` 를 함께 완화한 형태와 **픽셀까지 동일하게** 스크롤을 되살리고(390x844 문서 +304,
* 360x640 +100, 320x568 +100), 그때 `html` 계산값이 세 뷰포트 전부 `none` 으로 남았다
* (`design.md` 3-2). 그래서 14310~14317행 원문과 `html` 의 값은 이 스펙에서 변경 금지다.
*
* (c) C3 이 `overflow: clip` 인 이유 — 그럴듯한 두 형태가 조용히 무동작이다
* 전제부터 적는다. **`.k110-root` 에는 `overflow-y` 선언이 아예 없다.** 매치되는 오버플로 선언은
* 21행 `overflow-x: hidden` 하나뿐이고(파일 전체 정적 스캔으로 확정) 계산값 `overflow-y: auto` 는
* 축 결합의 부수 효과다. 그래서 「`overflow-y` 를 원복한다」는 수가 애초에 존재하지 않는다.
* 기각 1 `overflow-y: visible` — 같은 규칙의 `overflow-x: hidden` 이 축 결합으로 `auto` 를
* **재생성한다.** 계산값이 수정 전과 6뷰포트 전부 바이트 동일하고 `.k110-root.scrollTop = 500`
* 이 여전히 500 을 반환한다. 완전 무동작이다.
* 기각 2 `overflow: hidden clip` — 「가로 가드를 지키며 세로만 막는다」로 리뷰어가 가장 자연히
* 제안하는 형태인데 실패한다. `clip` 은 스크롤 값 옆에서 **`hidden` 으로 계산**되고 `hidden` 은
* 여전히 스크롤 컨테이너다(대입 500 그대로). **판정은 계산값이 아니라 `scrollTop` 대입 후
* 재독으로 한다.**
* 두 축을 함께 `clip` 으로 만들어야 진짜 비-스크롤 컨테이너가 되고, 21행 가로 가드도 유지되고,
* 잔여가 `body` 로 넘어가지 않는다(`overflow: visible` 은 넘긴다 — `768x1024` `body` 여지 0 → 65).
*
* (d) 미디어쿼리 스코핑은 취향이 아니라 필수다
* 스코핑을 빼면 `768x1024` 에서 탭 바가 통째로 잘려 사라진다. C1 적용 상태 실측에서
* `#k110GlobalTabFooter` 가 rect 2100~2154 를 차지하는데 `.k110-root` 콘텐츠 박스 하단이 2090 이다
* — 푸터 전체가 콘텐츠 박스 밖 64px 에 있고 C1 이 그것을 제거하지 않는다. **그 64px 은 팬텀이
* 아니라 실제 UI** 이므로 `clip` 이 닿아선 안 된다. 폭 768 은 `max-width: 767px` 밖이라 이 블록이
* 태블릿 세로를 잡지 않는다. C2 가 이미 같은 미디어쿼리 안이라 C3 에도 같은 가드를 준다.
*
* (e) `!important` 를 쓰지 않는다
* 이길 대상 셋이 전부 not important 다 — `--k110-tab-tail-h: 120svh`(11295행),
* `overscroll-behavior-y: none`(14317행), `overflow-x: hidden`(21행). 특이도가 같거나 낮고 이
* 위치가 문서 순서 뒤라 그냥 이긴다. 바로 위 블록이 세운 「불필요한 `!important` 를 늘리지
* 않는다」를 계승한다.
*
* (f) 이 파일 이 위치여야 한다 — 다른 곳에 넣으면 조용히 무동작이다
* 파사드 `` 는 `` 가 아니라 `` 안에 있다(`K110App.tsx` 153행이 K110App 루트의
* 첫 자식으로 렌더한다). 그래서 같은 특이도 규칙을 `` 나 별도 스타일시트·CSS 모듈에 넣으면
* 문서 순서에서 진다. 설계 단계에서 실제로 당했다 — head 에 삽입한 C1 이 **조용히 무동작**이었고
* `--k110-tab-tail-h` 계산값이 `120svh` 로 남았다. 마지막 최종 권한 마커 **앞**인 이유는
* `tests/unit/k110/staticScan.test.ts` 가 `css.lastIndexOf(marker)` 이후를 슬라이스해 검사하기
* 때문이다(바로 위 블록과 같은 이유).
*
* 3661·3684행의 하드코딩 `calc(100% + 120svh)`(11301행이 같은 셀렉터로 뒤에서 덮으므로 변수 하나로
* 함께 무력화된다), 11333·14015행의 죽은 오버라이드, `.k110-ui` 높이 예산은 건드리지 않았다.
* TS 변경도 없다.
*/
.k110-feature-btn,
.k110-back-btn {
--k110-tab-tail-h: 0px;
}
@media (max-width: 767px) and (orientation: portrait) {
body { overscroll-behavior-y: auto; }
.k110-root { overflow: clip; }
}
/* K110 FIX: `768x1024` 전역 탭 바가 진입 직후 화면 밖에 있던 결함 (후속 3)
*
* (a) 증상
* 태블릿 세로에서 design 탭에 들어가면 `#k110GlobalTabFooter` 가 보이지 않는다. 진입 직후
* 실측이 이렇다 — 문서가 이미 최대(1066/1066)인데 푸터 rect top 1034(뷰포트 1024), 뷰포트
* 교집합 **0**, 탭 버튼 히트 테스트 **실패**. Playwright 와 포트 3000 실브라우저가 같은 값을 낸다.
* `.k110-root` 를 65 내리면(휠 1회) 969 / 교집합 54 / 클릭 가능이 되므로 도달 불가는 아니다.
* 다만 진입 첫 화면에서 주 네비게이션이 사라진다.
*
* (b) 원인 — 푸터 몫을 뺀 박스와 푸터가 든 박스가 다르다
* `--k110-panel-max-h` 의 마지막 항이 `- 0px` 라 **푸터 몫이 빠져 있다**(`768x1024` 에서
* 922.624px). 그 값으로 `.k110-ui` 와 그 안의 활성 패널이 함께 묶이는데, 태블릿 세로는
* `body.k110-layout-portrait` 가 푸터를 `position: relative` 로 되돌려 푸터가 **흐름에 남는다**.
* 푸터가 먹는 흐름 비용은 height 54 + margin-top 10 = **64px** 이고 `--k110-layout-footer-reserve`
* 가 정확히 `calc(54px + 10px)` = 64px 다. 그래서 `.k110-ui` scrollHeight 988 대 clientHeight 923
* = 여지 65 가 생기고, 푸터 전체가 `.k110-root` 콘텐츠 박스 밖 64px 에 놓인다
* (rect 2100~2154 대 콘텐츠 박스 하단 2090). 바로 위 블록 (d) 가 C3 스코핑의 근거로 적어 둔
* 그 64px 이 이것이고, 거기 쓴 대로 **팬텀이 아니라 실제 UI** 라 C1 이 제거하지 않는다.
*
* (c) 왜 선언이 아니라 변수를 고치는가 — 일반 선언은 조용히 무동작이다
* 활성 패널의 높이를 정하는 선언이 **이미 `!important`** 다. `@media (min-width: 768px)` 안
* `#designPanel.k110-panel.is-active` 와 `.k110-panel.is-active` 등 4건이
* `height`/`max-height: var(--k110-panel-max-h) !important` 이고, 1561행이 또
* `var(--k110-panel-available-h) !important` 로 덮는다. `!important` 없는 `max-height` 를 이
* 위치에 넣어 실측했더니 계산값이 **922.624px 그대로**였고 푸터 교집합도 **0 그대로**였다.
* 그래서 선언을 이기려 하지 않고 **그 선언들이 참조하는 변수를 패널 자신에게 재정의**한다.
* 새 `!important` **0개** — 위 두 블록의 「`!important` 를 늘리지 않는다」를 계승한다.
*
* (d) 왜 이름을 갈라 포획하는가
* `--k110-panel-max-h: calc(var(--k110-panel-max-h) - ...)` 는 **자기참조라 순환이고 무효**다.
* 그래서 `.k110-ui` 에서 상속값을 `--k110-panel-max-h-outer` 로 한 번 포획한 뒤 패널에서 그것을
* 뺀다. 헤더 수식(`100svh - clamp(...)`)을 여기 복제하지 않으려는 것이다 — 복제하면 원본이
* 바뀔 때 이 블록이 **조용히 어긋난다.**
*
* (e) 왜 이 스코프인가
* `1280x800` 은 `body.k110-layout-landscape` 라 푸터가 `position: fixed` 이고 흐름 밖이라 이
* 결함이 없다 — `orientation: portrait` 가 거른다. `390x844`·`360x640`·`320x568` 모바일 세로는
* `--k110-panel-max-h` 가 `none` 이고 `.k110-ui` 가 `display: grid` 로 푸터를 제자리에 담는다
* — `min-width: 768px` 가 거른다. 그래서 이 블록은 태블릿 세로만 잡는다.
*
* (f) 기각한 형태 — 푸터를 `position: fixed` 로 되돌리기
* 탭 바는 살아나지만 진입 시 문서 스냅이 동작하지 않아 `.k110-ui` 뷰포트 교집합이 **0** 이 된다
* (3회 반복 전부 동일, 문서 0/1066). 푸터도 인셋 카드(left 19.2 / width 729.6)에서 풀블리드
* (left 0 / width 768)로 바뀐다. **한 결함을 다른 결함으로 바꾸는 것**이라 버렸다.
*
* (g) 실측 (적용 전 → 후, `768x1024`)
* 푸터 뷰포트 교집합 **0 → 54**, 탭 버튼 클릭 **false → true**,
* `.k110-root` 여지 **65 → 1** 이고 `scrollTop = 500` 대입 후 재독도 **65 → 1**,
* `.k110-ui` 여지 65 → 1, 활성 패널 922.6 → **858.6**, `#glyphGrid` 463.7 → **399.7**,
* 문서 최대 스크롤 **1066 불변**. `390x844`·`1280x800`·`360x640`·`320x568`·`844x390` 은
* 측정 18필드 전부 불변이다(변경 0건).
*
* (h) 계약 3(위 블록의 C3 미디어쿼리 스코핑)은 그대로 둔다
* `.k110-root` 여지가 65 → 1 로 줄어 스코핑 해제를 검토할 여지가 생겼지만, 1 이 0 이 아니고
* 별도 검증이 필요해 이번 범위에 넣지 않았다.
*
* (i) 이 파일 이 위치여야 한다
* 파사드 `` 가 `` 가 아니라 `` 안이라(`K110App.tsx` 153행) 같은 특이도 규칙을
* 다른 스타일시트에 넣으면 문서 순서에서 져 **조용히 무동작**이다. 최종 권한 마커 **앞**인 이유는
* `tests/unit/k110/staticScan.test.ts` 가 `css.lastIndexOf(marker)` 이후를 슬라이스해 검사하기
* 때문이다(위 두 블록과 같은 이유).
*/
@media (min-width: 768px) and (orientation: portrait) {
body.k110-layout-portrait .k110-ui {
--k110-panel-max-h-outer: var(--k110-panel-max-h);
}
body.k110-layout-portrait .k110-ui > .k110-panel {
--k110-panel-max-h: calc(var(--k110-panel-max-h-outer) - var(--k110-layout-footer-reserve));
}
}
/* K110 FIX: 데스크톱 가로에서 활성 패널 하단이 잘려 도달 불가이던 결함 (후속 2)
*
* (a) 증상 — 빈 여백이 아니라 실제 콘텐츠가 사라진다
* `1280x800` 에서 글리프를 채우고 **격자를 자기 끝까지 내린 상태**로 실측했다. 격자는
* `scrollTop 86 / room 86` 으로 이미 끝인데 마지막 행이 `.k110-ui` 클립선 아래로 **11.1px
* 잘린다.** `.k110-ui` 가 `overflow: hidden` 이라 스크롤도 안 되고 격자도 이미 끝이라
* **회복 경로가 없다.** 포트 3000 실데이터에서 확인했다.
*
* (b) 범위 — `1280x800` 만이 아니다
* `.k110-ui` 초과 / `#glyphGrid` 잘림이 `1280x800` 74.8 / 23.2, `1440x900` 75.9 / 18.1,
* `1920x1080` 78.1 / 10.1 이다. **데스크톱 가로 전역이고 뷰포트가 커질수록 커진다.**
* `844x390`(폰 가로)은 0 이고 `768x1024` 는 바로 위 후속 3 블록이 이미 닫았다.
*
* (c) 원인 — 두 예산이 엇갈려 있다
* `.k110-ui` 는 `--k110-panel-available-h`(646.4 @`1280x800`)로 묶인다. 푸터 몫
* `--k110-layout-footer-reserve` 가 **차감된** 값이라 화면 하단 고정 푸터를 피한다. 그런데
* 활성 패널은 `--k110-panel-max-h`(720.8)를 받는다. 푸터 몫이 **차감되지 않은** 값이다.
* `@media (min-width: 768px)` 안 `#designPanel.k110-panel.is-active` 가 ID 특이도로 일반 규칙
* (1561행 `.k110-panel.is-active` -> `--k110-panel-available-h !important`)을 이기기 때문이다.
* 그래서 패널이 제 컨테이너보다 74.4~78.1px 크고 그 초과분이 `hidden` 에 잘린다.
*
* (d) 기각 1 — 변수 재정의는 안 된다. 상속이 새어 나간다
* `--k110-panel-max-h` 를 패널에 재정의하면 기하는 맞지만 **그 변수가 패널 subtree 전체로
* 상속된다.** 파사드에서 그 변수를 쓰는 곳이 21군데이고 그중 7315·11087·11250·11483행 등이
* **패널 안쪽 박스의 `min-height` 계산**에 쓴다. 실제로 이 형태를 적용했더니
* `k110-design-empty-area-scroll` 의 「격자 끝에서 페이지가 이어받는다」 케이스가 깨졌다
* (문서 이동 150 -> 0, 3회 반복 동일). **선언을 이기되 변수는 건드리지 않아야 한다.**
*
* (e) 기각 2 — `!important` 없는 형태는 조용히 무동작이다
* 활성 패널의 높이를 정하는 선언이 이미 `!important` 다(`#designPanel.k110-panel.is-active`
* 외 4건). `!important` 없는 `max-height` 를 이 위치에 넣어 실측했더니 계산값이 720.8 그대로였다.
* 또 `body .k110-ui > .k110-panel.is-active` 는 **특이도에서 진다** — 상대가 ID 를 갖는다.
* 그래서 이 블록은 ID 를 포함하고 `!important` 를 쓴다. 위 블록들의 「`!important` 를 늘리지
* 않는다」에서 벗어나는 유일한 지점이고, 그 근거가 (d)·(e) 다.
*
* (f) 왜 `round(down, ..., 1px)` 인가 — **이게 이 수정의 핵심이다**
* `var(--k110-panel-available-h)` 를 그대로 쓰면 646.4px 가 되고 `.k110-ui` 의 `clientHeight`
* 646 에 대해 **0.4px 가 남아 넘친다.** 그 상태에서 격자 끝 체이닝이 깨진다(문서 이동 0).
* 더 파보니 **원인은 이 블록이 아니라 소수점 높이 자체**였다 — 스크롤러의 높이가 소수이면
* Chrome 의 「스크롤 끝」 판정이 어긋나 휠이 조상으로 넘어가지 않는다.
*
* **지금 배포 코드도 같은 증상을 낸다.** 수정 없이 뷰포트 높이만 바꿔 실측한 결과다 —
* 796 통과 / 798 통과 / 800 통과 / 802 통과 / **804 실패** / 806 통과 / 810 통과.
* `804` 에서 격자 높이가 303.188 이고, 인라인으로 303 으로 내림하면 즉시 통과한다.
* 즉 이 속성은 원래부터 소수점 운에 걸려 있었다.
*
* 그래서 예산을 **정수 px 로 내림해서** 넣는다. 잘림을 없애면서 소수점 잔여도 함께 없앤다.
*
* (g) 실측 (적용 전 -> 후, 격자를 끝까지 내린 뒤 휠 150)
* `1280x800` 잘림 23.2 -> **0**, 휠 통과 -> 통과.
* `1280x804` 잘림 22.5 -> **0**, 휠 **실패 -> 통과** (배포 코드의 기존 실패를 함께 고친다).
* `1440x900` 잘림 18.1 -> 0, `1920x1080` 잘림 10.1 -> 0, 둘 다 휠 통과.
* `844x390`·`768x1024`·`390x844` 는 패널 높이·격자 높이·잘림이 **전부 불변**이다.
*
* (h) `round()` 미지원 브라우저
* 선언 전체가 무효가 되어 **수정 전 동작으로 되돌아갈 뿐** 깨지지 않는다(Chrome 112+,
* Safari 15.4+, Firefox 118+ 지원).
*
* (i) 이 파일 이 위치여야 한다
* 파사드 `` 가 `` 안이라(`K110App.tsx` 153행) 다른 스타일시트에 같은 특이도로
* 넣으면 문서 순서에서 져 조용히 무동작이다. 최종 권한 마커 **앞**인 이유는
* `staticScan.test.ts` 가 `css.lastIndexOf(marker)` 이후를 슬라이스해 검사하기 때문이다.
*/
@media (min-width: 768px) and (orientation: landscape) {
body .k110-ui > #designPanel.k110-panel.is-active {
height: round(down, var(--k110-panel-available-h), 1px) !important;
max-height: round(down, var(--k110-panel-available-h), 1px) !important;
}
}
/* K110 FEATURE: HERO GUIDE BUTTONS AND POPUP (PBGSPQA-1207)
*
* 메인 좌측 안내를 버튼 3개와 팝업으로 바꿨다(Figma `247:385`, v0.6). 모양·크기는 기획이 UI
* 레퍼런스로 지정한 studiok110.com 안내 메뉴의 CSS 를 옮겼다. 레퍼런스의 클래스·id 이름은 정적
* 패널 전환 때 제거 식별자로 막아 두었으므로(`staticScan.test.ts`) `k110-hero-guide-*` 로 새로 짓는다.
*
* - 버튼: 공용 독립 버튼(`.k110-c-independent-button`)에 강조색만 준다(초록·하늘·분홍 = 레퍼런스).
* `--independent-btn-accent` 를 직접 주는 이유: 공용 모듈은 이 변수와 `--btn-accent` 가 서로를
* 참조해서, 강조색을 따로 주지 않으면 순환으로 무효가 되어 글자·테두리가 검정이 된다.
* - 무료폰트 버튼은 주소가 승인되기 전 `.is-disabled` 로 그린다. 흐린 모양은 공용 비활성
* 모듈(DISABLED BUTTON STATE)이 맡고, 여기서는 덮지 않는다.
* - 팝업: 버튼 자리에서 열리고, 열려 있는 동안 버튼은 숨는다. 본문 최대 높이는
* `useK110HeroGuide` 가 `--k110-guide-popup-max-h` 로 준다. 내용이 짧으면 내용 높이 그대로다.
* - 긴 팝업(`.is-guide-long`)에서 타이틀·표본 카운터를 숨기는 것은 여기서, 히어로 세로 배치를
* 위로 붙이는 것은 k110-shell-layout.css 에서 한다(그 파일이 히어로 여백을 소유한다).
*
* 최종 권한 마커 앞에 두는 이유는 위 PHONE LANDSCAPE 블록 머리 주석과 같다
* (마커 뒤는 `display: none` 계열을 금지하는 가드의 검사 범위다).
*/
.k110-hero .k110-hero-info {
width: min(100% - 16px, 340px);
margin: clamp(40px, 5vh, 64px) auto 0 0;
gap: var(--k110-button-cluster-gap);
}
.k110-hero .k110-hero-guide-btn {
--guide-accent: #7CFF00;
--independent-btn-accent: var(--guide-accent);
width: 100%;
min-height: 44px;
padding: 10px 14px;
justify-content: flex-start;
font-size: clamp(16px, 1.25vw, 20px);
font-weight: 700;
line-height: 1.15;
text-align: left;
text-decoration: none;
}
.k110-hero .k110-hero-guide-btn[data-guide-open="manual"] {
--guide-accent: #00E5FF;
}
.k110-hero .k110-hero-guide-btn[data-guide-link="font"] {
--guide-accent: #FF38DB;
}
.k110-hero .k110-hero-guide-btn .k110-front-text {
text-align: inherit;
}
.k110-hero .k110-hero-guide-btn:focus-visible {
outline: 2px solid var(--guide-accent);
outline-offset: 3px;
}
body.k110-layout-portrait .k110-hero .k110-hero-info {
margin-left: auto;
margin-right: auto;
}
body.k110-layout-portrait .k110-hero .k110-hero-guide-btn {
justify-content: center;
text-align: center;
}
.k110-hero.is-guide-open .k110-hero-info {
width: min(100%, 620px);
gap: 0;
}
.k110-hero.is-guide-open .k110-hero-guide-btn,
.k110-hero.is-guide-open .k110-mobile-scroll-hint,
.k110-hero.is-guide-long #heroTitle,
.k110-hero.is-guide-long #sampleCounter {
display: none !important;
}
.k110-hero.is-guide-long .k110-hero-info {
margin-top: 0;
}
.k110-hero .k110-hero-guide-popup {
--guide-ink: #7CFF00;
display: block;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--guide-ink);
background: #050505;
box-shadow: none;
color: #E4E4E4;
text-align: left;
pointer-events: auto;
}
.k110-hero .k110-hero-guide-popup[data-guide-popup="manual"] {
--guide-ink: #00E5FF;
}
.k110-hero .k110-hero-guide-popup[hidden] {
display: none !important;
}
.k110-hero .k110-hero-guide-popup * {
text-shadow: none;
}
.k110-hero .k110-hero-guide-bar {
--k110-panel-primary: var(--guide-ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--k110-button-cluster-gap);
padding: 0;
border-top: 0;
border-bottom: var(--k110-panel-line-w) solid var(--guide-ink);
background: #050505;
color: var(--guide-ink);
}
.k110-hero .k110-hero-guide-title {
flex: 1 1 0%;
min-width: 0;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k110-hero .k110-hero-guide-close {
--btn-accent: var(--guide-ink);
--btn-border: color-mix(in srgb, var(--guide-ink) 72%, transparent);
--btn-bg: rgba(0,0,0,0.78);
--btn-fg: var(--guide-ink);
--btn-shadow-x: 0px;
--btn-shadow-y: 0px;
--btn-min-h: 0px;
position: relative;
z-index: var(--k110-cell-content-z);
flex: 0 0 auto;
align-self: stretch;
min-width: 64px;
min-height: 0;
margin: var(--k110-button-inset);
padding: 0 var(--k110-bar-text-inset);
border: var(--k110-button-line-w) solid var(--btn-border);
border-radius: 0;
background:
linear-gradient(0deg, color-mix(in srgb, var(--guide-ink) 12%, transparent), transparent 72%),
rgba(0,0,0,0.78);
color: var(--guide-ink);
font-size: var(--k110-type-caption);
font-weight: 900;
line-height: 1;
transform: none;
cursor: pointer;
}
/* 공용 `.k110-c-button:not(:disabled):not(.is-disabled):hover/:active`(0,4,0)를 이겨야 채움이 바뀐다. */
.k110-hero .k110-hero-guide-close.k110-c-button:not(:disabled):hover,
.k110-hero .k110-hero-guide-close.k110-c-button:not(:disabled):active {
background: var(--guide-ink);
box-shadow: none;
color: #050505;
transform: none;
}
/* 바(`.k110-panel-bar`)가 overflow: hidden 이라 바깥 링은 잘린다. 안쪽에 그린다. */
.k110-hero .k110-hero-guide-close:focus-visible {
outline: 2px solid var(--guide-ink);
outline-offset: -4px;
}
.k110-hero .k110-hero-guide-body {
max-height: var(--k110-guide-popup-max-h, 55dvh);
margin-top: var(--k110-gap);
padding: 22px clamp(16px, 2vw, 28px) 28px;
overflow: auto;
overscroll-behavior: contain;
touch-action: pan-y;
scrollbar-color: var(--guide-ink) #151515;
box-sizing: border-box;
border: 0;
background: #050505;
color: #E4E4E4;
font-size: clamp(18px, 1.35vw, 22px);
font-weight: 300;
line-height: 1.35;
overflow-wrap: anywhere;
}
.k110-hero .k110-hero-guide-body:focus-visible {
outline: 1px solid var(--guide-ink);
outline-offset: -1px;
}
.k110-hero .k110-hero-guide-body p {
margin: 0 0 16px;
color: #E4E4E4;
font-size: inherit;
line-height: inherit;
}
.k110-hero .k110-hero-guide-body p:last-child {
margin-bottom: 0;
}
.k110-hero .k110-hero-guide-body h3 {
margin: 28px 0 10px;
color: var(--guide-ink);
font-size: 1.12em;
font-weight: 700;
line-height: 1.2;
}
.k110-hero .k110-hero-guide-section:first-child h3 {
margin-top: 0;
}
/* K110 FEATURE: PHONE LANDSCAPE ROTATE NOTICE (QA002-3)
*
* 폰 가로(가시 높이 300~412px)에서는 landscape 패널 `.k110-ui` 가 `position: fixed` +
* `overflow: hidden` 이라 번역기 입력창이 3px 로 접혀 탭할 수 없다(실측 780x330: 입력 자리를
* 탭하면 `#runTranslateBtn` 이 눌림). 번역기 패널은 세로 350px+ 가 필요해 위 PHONE LANDSCAPE
* LAYOUT BUDGET 의 예산 조정으로는 담을 수 없다. 그래서 세로로 돌리라는 전면 안내로 막는다.
*
* 조건 세 항의 교집합:
* orientation: landscape -> 세로 화면 제외
* max-height: 520px -> 태블릿 가로(높이 600~768) 제외. 위 폰 가로 블록과 같은 상한
* pointer: coarse -> 터치 기기만. PC 창을 줄인 경우와 Playwright `Desktop Chrome`
* (hasTouch 없음)은 제외되어 기존 e2e 가 그대로 돈다
* `min-width: 768px` 은 쓰지 않는다 — 600x450 같은 작은 폰 가로가 빠진다.
*
* 기본 상태는 `display: none` 이고 마크업(`RotateNotice.tsx`)은 항상 렌더된다. JS 판정이 없어
* `K110App` 훅 순서에 영향이 없다. 이 블록은 아래 최종 권한 마커 **앞**에 있어야 한다 —
* 마커 뒤는 `display: none` 계열이 금지된다(`staticScan.test.ts`). z-index 40000 은 파일 내
* 최고값 30000(레트로 로더) 위다.
*/
.k110-rotate-notice {
display: none;
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
body.k110-page-active .k110-rotate-notice {
display: flex;
position: fixed;
inset: 0;
z-index: 40000;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.94);
color: #7CFF00;
text-align: center;
font-family: "Noto Sans KR", sans-serif;
}
.k110-rotate-notice__box {
display: grid;
gap: 10px;
justify-items: center;
max-width: 420px;
}
.k110-rotate-notice__icon {
font-size: 44px;
line-height: 1;
text-shadow: 0 0 12px rgba(124, 255, 0, 0.55);
animation: k110RotateNoticeTurn 1.8s ease-in-out infinite;
}
.k110-rotate-notice__title {
margin: 0;
font-size: 18px;
font-weight: 900;
line-height: 1.3;
}
.k110-rotate-notice__body {
margin: 0;
font-size: 13px;
line-height: 1.5;
opacity: 0.82;
}
@keyframes k110RotateNoticeTurn {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.k110-rotate-notice__icon {
animation: none;
}
}
}
/* K110 FEATURE: PC SHORT WINDOW SCROLL FALLBACK (QA002-4)
*
* PC 브라우저 창을 낮게 줄인 경우(마우스, 높이 ≤ 520px). 폰 가로와 같은 뷰포트 계열이지만
* 마우스 사용자는 창을 늘릴 수 있으므로 차단 안내 대신 **완만한 붕괴 방지**를 택한다 —
* 일반 웹 관행(창 크기로 막지 않고 넘치면 스크롤)과 같다.
*
* 문제: 위 PHONE LANDSCAPE LAYOUT BUDGET 이 이 뷰포트에도 걸려 패널 예산 하한이 180px 이고,
* `.k110-ui` 가 `position: fixed` + `overflow: hidden` 이라 예산 밖 콘텐츠는 도달 불가다.
* 실측 1100x330: 패널 195px, 번역기 입력 wrap 3px(탭하면 `#runTranslateBtn`), 출력창은 액션 행에
* 가림. 1100x380 은 입력 1줄(28px)로 겨우 동작 — 경계는 약 377px.
*
* 조치 두 가지:
* 1) 패널 예산 하한을 360px 로 올린다. 번역기 패널 자연 최소(바 40 + 입력 64 + 실행 52 +
* 상태 35 + 출력 64 + 간격 8 + 액션 58 ≈ 321px)에 여유를 둔 값. 이 값이면 세 탭 모두
* 트랙이 접히지 않는다(실측: 입력 85px, 만들기 `#charInput` 42px, 발견 입력 78px).
* 2) `.k110-ui` 를 `fixed` → `absolute` 로. 패널이 뷰포트보다 길어지면 `.k110-root` 가
* 스크롤되어 아래를 볼 수 있다(실측 330/495). `padding-bottom` 은 fixed 푸터(54px + 10px)
* 몫 — 이것이 없으면 스크롤 끝에서 마지막 버튼 행이 푸터 아래에 깔린다(실측: 없을 때
* 263~327 vs 푸터 276, 있을 때 마지막 행 하단 263 < 푸터 상단 276). `.k110-ui` 의
* `height` 는 13917행이 `!important` 로 예산값에 고정하므로 `content-box` 로 두어
* 패딩이 높이 밖에 붙게 한다.
*
* 조건에 `pointer: fine` 을 두어 터치 기기는 제외한다 — 터치 폰 가로는 위 ROTATE NOTICE 가
* 담당한다. `max-height: 520px` 은 폰 가로 블록과 같은 상한이라 `1280x800` 은 무영향이다.
* 같은 `body.k110-layout-landscape` 특이도로 17856행의 하한 180px 을 덮으려면 이 블록이 그
* 뒤에 있어야 하고, `position` 은 13917행의 `!important` 를 이기기 위해 `!important` 다.
* 이 블록도 최종 권한 마커 **앞**에 둔다.
*/
@media (min-width: 768px) and (orientation: landscape) and (max-height: 520px) and (pointer: fine) {
body.k110-layout-landscape {
--k110-panel-available-h: max(
360px,
calc(
100svh - var(--k110-layout-header-bottom) -
var(--k110-layout-footer-reserve)
)
);
--k110-panel-frame-h: var(--k110-panel-available-h);
--k110-panel-max-h: var(--k110-panel-available-h);
}
body.k110-layout-landscape .k110-ui {
position: absolute !important;
padding-bottom: var(--k110-layout-footer-reserve) !important;
box-sizing: content-box !important;
}
}
/* K110 FEATURE: TRANSLATE PLACEHOLDER NOTICE FIT (PBGSPQA-1232)
*
* 번역기 입력창 플레이스홀더 = 지시문(첫 줄) + 정방향 전용 개인정보 안내문. 크기는
* useK110TranslatePlaceholderFit 이 칸에 맞춰 두 커스텀 프로퍼티로 넣는다.
* - 지시문: heading(24px) — 입력 글자 크기와 같다. 안내문이 11px 로도 안 들어가는 낮은 칸에서만 줄어든다
* - 안내문: body(16px) 를 상한으로 micro(11px) 까지 줄어든다
* 프로퍼티가 없으면(훅 실행 전·SSR) 토큰 기본값. 일반 인라인 font-size 는 쓰지 않는다.
*/
#translatePanel .k110-translate-placeholder-main {
font-size: var(--k110-translate-placeholder-main-size, var(--k110-type-heading)) !important;
line-height: 1.18 !important;
word-break: keep-all;
overflow-wrap: anywhere;
}
#translatePanel .k110-translate-placeholder-notice {
font-size: var(--k110-translate-placeholder-notice-size, var(--k110-type-body)) !important;
line-height: 1.45 !important;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* K110 FEATURE: ANONYMOUS PARTICIPATION UI FINAL AUTHORITY
*
* 발견 행 칼럼 정의의 최종 권한. 다른 파일에서 이 속성을 다시 덮지 않는다.
*
* 3열 -> 2열: 기여자 이름 칼럼을 걷었다(사용자 결정). 종전 3열은 korean / alien / user 였고,
* 그 앞 4열 규칙(17810행)의 votes 칼럼은 붐업·붐따 제거 때 이미 사라졌다.
*
* 데스크톱은 user 트랙만 지웠다. korean 이 유일한 fr 트랙이라 남은 공간을 모두 먹고 alien 은
* max-content 로 행 끝에 붙는다. 모바일 세로는 korean 이 5em 고정이라 fr 트랙이 사라지면 행이
* 채워지지 않으므로, user 가 갖고 있던 minmax(0, 1fr) 을 alien 으로 옮겼다.
*/
#discoverPanel .k110-discover-existing-row {
grid-template-columns:
minmax(0, 1.3fr)
max-content !important;
}
@media (max-width: 767px) and (orientation: portrait) {
#discoverPanel .k110-discover-existing-row {
grid-template-columns:
minmax(0, var(--discover-korean-w))
minmax(0, 1fr) !important;
}
}