/**
 * Linq App Home — 모바일 앱 스타일 SaaS home v0.6 (앱틱 개선)
 *
 * 개선:
 *  - 카드 그림자 다층화 + 모서리 둥글게 (20px)
 *  - 헤더 좌/우 분리 (로고 + 알림/검색 아이콘)
 *  - 작은 카드 아이콘 → 컬러 chip
 *  - AI 상담원 카드 3-stop 그라데이션
 *  - 추천 아이템 카드 살짝 떠있는 느낌
 *  - 하단 nav 백드롭 블러
 *  - 전체 spacing/타이포 균형
 */

/* ==== 컨테이너 (미니멀: 순수 흰 배경) ==== */
.linq-app {
    width: 100%;
    background: #fff;
    min-height: 100vh;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* WordPress block editor가 자식 block에 자동 부여하는 margin-top(=block-gap, ~19px)
       제거. 헤더 위 의도치 않은 여백의 원인. */
    margin-top: 0 !important;
}
/* Twenty Twenty-Five 등 테마가 .is-layout-constrained 자식에 자동 부여하는
   --wp--style--global--content-size (보통 620~660px) max-width 무력화.
   selector specificity는 .entry-content > .linq-app로 충분. */
body.linq-app-page .entry-content > .linq-app,
body.linq-app-page .wp-block-post-content > .linq-app,
body.linq-app-page .is-layout-constrained > .linq-app,
body.linq-app-page .is-layout-flow > .linq-app,
body.linq-app-page .linq-app {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.linq-app__viewport {
    max-width: 460px;
    margin: 0 auto;
    padding: 8px 14px 40px;
}
@media (max-width: 480px) {
    .linq-app__viewport {
        padding: 4px 12px 40px;
    }
}

/* ============================================================
 * 헤더
 * ============================================================ */
.linq-app__header {
    position: relative;  /* drawer absolute가 header 기준 (drawer가 header 자식) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    padding: 4px 4px 10px;
}
.linq-app__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.linq-app__header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.linq-app__logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(91, 107, 255, 0.2);
}
.linq-app__logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--linq-brand, #1a1a1a);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.linq-app__brand {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.linq-app__brand-name { color: #1a1a1a; font-weight: 700; }
.linq-app__brand-sub  { color: var(--linq-brand, #1a1a1a); font-weight: 800; }

.linq-app__icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ECEEF5;
    border-radius: 12px;
    color: #4a4a4a;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, transform 0.12s ease;
    padding: 0;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__icon-btn:hover { border-color: #1a1a1a; color: #1a1a1a; }
}
.linq-app__icon-btn { touch-action: manipulation; }
.linq-app__icon-btn:active { transform: scale(0.94); }
.linq-app__icon-dot {
    position: absolute;
    top: 9px; right: 9px;
    width: 7px; height: 7px;
    background: #FF5757;
    border: 1.5px solid #fff;
    border-radius: 50%;
}

/* ============================================================
 * 햄버거 드로어 (WordPress 메뉴 자동 연동)
 * ============================================================ */
.linq-app__viewport { position: relative; }

.linq-app__drawer {
    position: absolute;
    top: 60px;
    left: 12px;
    right: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.10);
    padding: 8px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 200;
    max-height: 70vh;
    overflow-y: auto;
}
.linq-app__drawer--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.linq-app__drawer-nav ul,
.linq-app__drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.linq-app__drawer-nav li,
.linq-app__drawer-list li {
    border-radius: 10px;
    overflow: hidden;
}
.linq-app__drawer-nav a,
.linq-app__drawer-list a {
    display: block;
    padding: 12px 16px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__drawer-nav a:hover,
    .linq-app__drawer-list a:hover { background: #F8F9FB; }
}
.linq-app__drawer-nav a:active,
.linq-app__drawer-list a:active { background: #F0F2F8; }

/* FSE wp:navigation block 안의 스타일 reset */
.linq-app__drawer-nav .wp-block-navigation { --wp--style--block-gap: 0; }
.linq-app__drawer-nav .wp-block-navigation__container {
    flex-direction: column !important;
    gap: 2px !important;
    align-items: stretch !important;
}
.linq-app__drawer-nav .wp-block-navigation-item {
    width: 100%;
}
.linq-app__drawer-nav .wp-block-navigation-item__content {
    padding: 12px 16px !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px;
    display: block;
}

/* ============================================================
 * Hero 타이틀 (검색바 위 — 무지개 그라데이션 텍스트)
 * 검색바 outline 그라데이션과 동일한 색 + 같은 8s 애니메이션으로 통일감.
 * ============================================================ */
.linq-app__hero {
    margin: 6px 4px 16px;
    padding: 0;
    text-align: center;
}
.linq-app__hero-line {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.03em;
    color: #1a1a1a;
}
@media (max-width: 480px) {
    .linq-app__hero { margin: 4px 4px 16px; }
    .linq-app__hero-line { font-size: 24px; }
}

/* Hero 슬라이드 cycling (3종 슬로건 자동 전환) */
.linq-app__hero--cycling {
    position: relative;
    /* 2줄 슬라이드 + 1줄 슬라이드 혼재 → 최대 높이로 reserve (jitter 방지) */
    min-height: calc(30px * 1.28 * 2 + 4px);
}
@media (max-width: 480px) {
    .linq-app__hero--cycling { min-height: calc(24px * 1.28 * 2 + 4px); }
}
.linq-app__hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.linq-app__hero-slide--active {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .linq-app__hero-slide { transition: opacity 0.2s ease; transform: none; }
    .linq-app__hero-slide--active { transform: none; }
}

/* ============================================================
 * 검색바 (AI 챗봇 트리거 + 그라데이션 보더)
 *   구조: wrap(그라데이션 background) > search(흰 background)
 * ============================================================ */
.linq-app__search-wrap {
    margin-bottom: 14px;
    padding: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        #FF6B9D 0%,    /* 핑크 */
        #C7B0FF 18%,   /* 라벤더 (오렌지 자리) */
        #8FCBFF 35%,   /* 연한 블루 (노랑 자리) */
        #6BCF7F 52%,   /* 민트 그린 */
        #5DB6FF 70%,   /* 블루 */
        #9D7DFF 87%,   /* 퍼플 */
        #FF6B9D 100%   /* 핑크 (loop) */
    );
    background-size: 200% 200%;
    animation: linqSearchHue 8s linear infinite;
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow 0.18s ease;
    outline: none;
}
@keyframes linqSearchHue {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__search-wrap:hover {
        box-shadow: 0 4px 18px rgba(155, 125, 255, 0.20);
    }
}
.linq-app__search-wrap:focus-visible {
    box-shadow: 0 0 0 3px rgba(155, 125, 255, 0.25);
}
/* 사용자가 motion-reduce 선호 시 애니메이션 멈춤 */
@media (prefers-reduced-motion: reduce) {
    .linq-app__search-wrap { animation: none; }
}
.linq-app__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.linq-app__search-wrap:active .linq-app__search {
    background: #F8F9FB;
}
.linq-app__search-icon,
.linq-app__search-mic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: #999;
}
.linq-app__search-placeholder {
    flex: 1;
    font-size: 16px;
    color: #6a6a6a;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: opacity 0.28s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.linq-app__search-placeholder--fading { opacity: 0; }

/* ============================================================
 * 카테고리 칩 (검색바 아래 pill nav — TMAP 스타일)
 * ============================================================ */
.linq-app__chips {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 18px;
    padding: 0 2px;
    overflow-x: auto;            /* 칩이 늘어나면 가로 스크롤 */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.linq-app__chips::-webkit-scrollbar { display: none; }
.linq-app__chip {
    flex: 0 0 auto;
    padding: 9px 18px;
    background: #F2F4F7;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #6a6a6a;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
    line-height: 1;
}
.linq-app__chip:hover { background: #E8EBF1; color: #1a1a1a; }
.linq-app__chip:active { transform: scale(0.96); }
.linq-app__chip--active {
    background: #1a1a1a;
    color: #fff;
}
.linq-app__chip--active:hover { background: #1a1a1a; color: #fff; }
.linq-app__chip {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
@media (max-width: 480px) {
    .linq-app__chips { margin: 10px 0 14px; gap: 6px; }
    .linq-app__chip { padding: 8px 16px; font-size: 13.5px; }
}

/* ============================================================
 * 탭 패널 (서비스 / 회사소개 / 고객센터)
 * ============================================================ */
.linq-app__panel { display: none; }
.linq-app__panel--active { display: block; }
.linq-app__panel[hidden] { display: none !important; }

/* 탭별 visibility (data-tab-only / data-tab-hide) */
.linq-app [data-tab-only] { display: none; }
.linq-app__tab-active--services [data-tab-only="services"],
.linq-app__tab-active--about    [data-tab-only="about"],
.linq-app__tab-active--support  [data-tab-only="support"],
.linq-app__tab-active--magazine [data-tab-only="magazine"] { display: grid; }
.linq-app__tab-active--about [data-tab-hide="about"],
.linq-app__tab-active--services [data-tab-hide="services"],
.linq-app__tab-active--support [data-tab-hide="support"],
.linq-app__tab-active--magazine [data-tab-hide="magazine"] { display: none !important; }

/* 매거진 탭: AI 인사이트 단일 feed는 숨김 (매거진 패널이 자체 카테고리별 슬라이더로 대체) */
.linq-app__tab-active--magazine .linq-app__feed { display: none !important; }

/* 서비스 슬라이드 — 페이지당 4열 2행, 좌우 스와이프 */
.linq-app__slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -4px;          /* 컨테이너 padding 보정 */
    padding: 0 4px;
}
.linq-app__slider::-webkit-scrollbar { display: none; }
.linq-app__slider-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
/* 슬라이드 내부 그리드 — 기존 service-grid 룰 유지 */
.linq-app__service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 4px;
    padding: 4px 0 8px;
}

/* 페이지 dots indicator */
.linq-app__slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 8px;
}
.linq-app__slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D0D5DD;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.linq-app__slider-dot:hover { background: #98A2B3; }
.linq-app__slider-dot--active {
    background: #1a1a1a;
    transform: scale(1.2);
}

/* ============================================================
 * AI 인사이트 (블로그 슬라이더 — TMAP 테마코스 스타일)
 * 첫 화면에 카드 윗부분이 노출되도록 spacing 압축.
 * ============================================================ */
.linq-app__feed {
    margin: 14px 0 4px;
}
.linq-app__feed-header { margin-bottom: 8px; }
.linq-app__feed-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}
.linq-app__feed-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}
.linq-app__feed-more {
    font-size: 13px;
    font-weight: 600;
    color: #6a6a6a;
    text-decoration: none;
}
.linq-app__feed-more:hover { color: #1a1a1a; }
.linq-app__feed-slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;            /* 컨테이너 padding 보정 */
    padding: 2px 12px 6px;
}
.linq-app__feed-slider::-webkit-scrollbar { display: none; }
.linq-app__feed-card {
    flex: 0 0 200px;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #9D7DFF, #5DB6FF);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    scroll-snap-align: start;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.linq-app__feed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.linq-app__feed-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.78) 100%);
}
.linq-app__feed-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
    /* 2줄 ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.linq-app__feed-card-desc {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.linq-app__feed-card--placeholder {
    background: linear-gradient(135deg, #C7B0FF 0%, #8FCBFF 60%, #6BCF7F 100%);
    cursor: default;
}
.linq-app__feed-card--placeholder:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
@media (max-width: 480px) {
    .linq-app__feed-card { flex-basis: 170px; }
}

/* ============================================================
 * AI매거진 패널 — 카테고리별 가로 슬라이더 N줄
 * feed-card 스타일을 그대로 재사용 (slider/card 클래스 공유)
 * ============================================================ */
.linq-app__panel--magazine { padding-top: 4px; }
.linq-app__mag-section {
    margin: 4px 0 16px;
}
.linq-app__mag-section:last-child { margin-bottom: 4px; }
.linq-app__mag-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 2px;
}
.linq-app__mag-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}
.linq-app__mag-more {
    font-size: 12.5px;
    font-weight: 600;
    color: #6a6a6a;
    text-decoration: none;
}
.linq-app__mag-more:hover { color: #1a1a1a; }
/* 매거진 안의 카드는 살짝 작게 (여러 줄 vertical fit) */
.linq-app__mag-slider .linq-app__feed-card { flex-basis: 160px; }
@media (max-width: 480px) {
    .linq-app__mag-slider .linq-app__feed-card { flex-basis: 150px; }
}

.linq-app__service {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    text-decoration: none;
    color: #1a1a1a;
    transition: transform 0.12s ease;
    outline: none;            /* 브라우저 기본 검정 outline 제거 (마우스 클릭 시) */
    border-radius: 10px;
}
.linq-app__service:active { transform: scale(0.96); }
/* 키보드 Tab 네비게이션 시만 outline 표시 (접근성 유지) */
.linq-app__service:focus-visible {
    outline: 2px solid #9D7DFF;
    outline-offset: 2px;
}
.linq-app__service-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #F2F4F7 0%, #E8EBF1 100%);
    color: var(--linq-brand, #1a1a1a);
    transition: background 0.18s ease, transform 0.12s ease;
}
.linq-app__service:hover .linq-app__service-icon {
    background: linear-gradient(135deg, #E8EBF1 0%, #DDE2FF 100%);
    transform: translateY(-2px);
}
/* 3D 이미지 아이콘 — 회색 동그란 배경 제거, 작은 사이즈 */
.linq-app__service--3d .linq-app__service-icon {
    background: transparent;
    width: 42px;
    height: 42px;
}
.linq-app__service--3d:hover .linq-app__service-icon {
    background: transparent;
    transform: translateY(-2px) scale(1.05);
}
.linq-app__service--3d .linq-app__service-icon img {
    width: 100%;
    height: 100%;
}
/* 회사소개 큰 카드 3D 아이콘 */
.linq-app__card--3d .linq-app__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.linq-app__card--3d .linq-app__card-icon img {
    width: 56px;
    height: 56px;
}
.linq-app__service-title {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: #1a1a1a;
    word-break: keep-all;
}
@media (max-width: 480px) {
    .linq-app__service-grid { gap: 12px 2px; }
    .linq-app__service-icon { width: 52px; height: 52px; }
    .linq-app__service-title { font-size: 12.5px; }
}

/* 고객센터 placeholder */
.linq-app__support-empty {
    padding: 40px 16px;
    text-align: center;
    background: #F8F9FB;
    border-radius: 16px;
    color: #6a6a6a;
}
.linq-app__support-empty p:first-child {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}
.linq-app__support-hint { font-size: 13px; margin: 0; }

/* ============================================================
 * 큰 카드 4개
 * ============================================================ */
.linq-app__main-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.linq-app__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1.35 / 1;
    padding: 18px 16px 14px;
    border-radius: 20px;
    text-decoration: none;
    color: #1a1a1a;
    overflow: hidden;
    background: #F8F9FB;
    transition: background 0.15s ease;
    touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__card:hover { background: #F0F2F8; }
}
.linq-app__card:active { background: #E8EBF1; }

/* 카드 좌측 상단 컬러 dot — 카드별 다른 액센트 (각 메뉴 정체성 표현) */
.linq-app__card::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.linq-app__card--about::before,
.linq-app__card--history::before,
.linq-app__card--vision::before,
.linq-app__card--biz::before     { background: var(--linq-brand, #1a1a1a); }

.linq-app__card-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #1a1a1a;
    padding-left: 14px;          /* dot 옆 살짝 들여쓰기 */
    z-index: 2;
}
.linq-app__card-icon {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    line-height: 0;
    z-index: 1;
}

/* ============================================================
 * Welcome 영역 (AI 상담 트리거)
 * ============================================================ */
.linq-app__welcome {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    /* 검색바와 동일한 그라데이션 + 8s 애니메이션 (통일감) */
    background: linear-gradient(135deg,
        #FF6B9D 0%,
        #C7B0FF 18%,
        #8FCBFF 35%,
        #6BCF7F 52%,
        #5DB6FF 70%,
        #9D7DFF 87%,
        #FF6B9D 100%
    );
    background-size: 200% 200%;
    animation: linqSearchHue 8s linear infinite;
    border-radius: 16px;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.12s ease;
    touch-action: manipulation;
    box-shadow: 0 6px 20px rgba(157, 125, 255, 0.22);
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .linq-app__welcome { animation: none; }
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__welcome:hover { filter: brightness(1.04); }
}
.linq-app__welcome:active { transform: scale(0.99); }
.linq-app__welcome-bot {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);          /* 그라데이션 위 반투명 흰 */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 14px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
}
.linq-app__welcome-bot svg { color: #fff; }
.linq-app__welcome-text { flex: 1 1 auto; min-width: 0; }
.linq-app__welcome-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.linq-app__welcome-sub {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* ============================================================
 * 작은 카드 4개 (기업IR / 오시는길 / 공지사항 / 제품소개)
 *  - 아이콘을 컬러 chip 안에
 * ============================================================ */
.linq-app__sub-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.linq-app__subcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 6px 12px;
    background: #F8F9FB;
    border-radius: 14px;
    text-decoration: none;
    color: #1a1a1a;
    transition: background 0.15s ease;
    touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__subcard:hover { background: #F0F2F8; }
}
.linq-app__subcard:active { background: #E8EBF1; }
.linq-app__subcard-icon {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
    background: #fff;
    filter: grayscale(1);
}

.linq-app__subcard-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #4a4a4a;
}

/* ============================================================
 * 액션 카드 2개 (AI 상담원 / 견적상담)
 *   - 3-stop 그라데이션
 * ============================================================ */
.linq-app__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
.linq-app__action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 14px;
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: filter 0.15s ease, background 0.15s ease;
    touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__action:hover { filter: brightness(1.05); }
}
.linq-app__action:active { filter: brightness(0.95); }
.linq-app__action--consult {
    background: linear-gradient(160deg, var(--linq-brand, #1a1a1a), var(--linq-brand-dark, #000));
    color: #fff;
}
.linq-app__action--consult:hover { filter: brightness(1.15); }
.linq-app__action--quote {
    background: #F8F9FB;
    color: #1a1a1a;
}
.linq-app__action--quote:hover { background: #F0F2F8; }

.linq-app__action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    z-index: 2;
}
.linq-app__action-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    white-space: nowrap;
}
.linq-app__action-sub {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.85;
    white-space: nowrap;
}
.linq-app__action-icon {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
    z-index: 1;
}

/* ============================================================
 * 추천 아이템
 * ============================================================ */
.linq-app__featured {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 18px;
    background: #F8F9FB;
    border-radius: 16px;
    text-decoration: none;
    transition: background 0.15s ease;
    touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__featured:hover { background: #F0F2F8; }
}
.linq-app__featured:active { background: #E8EBF1; }
.linq-app__featured-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.linq-app__featured-label {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--linq-brand, #1a1a1a);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.linq-app__featured-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    line-height: 1.5;
}
.linq-app__featured-title strong { color: var(--linq-brand, #1a1a1a); font-weight: 800; margin: 0 2px; }
.linq-app__featured-thumb {
    flex: 0 0 auto;
    font-size: 32px;
    line-height: 1;
}

/* ============================================================
 * 모바일 하단 fixed nav (5개) — 백드롭 블러 + 떠있는 느낌
 * ============================================================ */
.linq-app__bottomnav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 460px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: end;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 4px 6px max(4px, env(safe-area-inset-bottom));
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}
@media (max-width: 480px) {
    .linq-app__bottomnav { max-width: 100%; }
}

.linq-app__navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    text-decoration: none;
    color: #1a1a1a;        /* 비활성도 블랙(선만) */
    transition: color 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
    .linq-app__navitem:hover { color: #000; }
}
.linq-app__navitem { touch-action: manipulation; }
.linq-app__navitem-icon {
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.linq-app__navitem-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}
.linq-app__navitem-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* HOME (active) — 아이콘 블랙 fill로 구분 + 위 작은 dot indicator */
.linq-app__navitem--center { position: relative; }
.linq-app__navitem--center .linq-app__navitem-icon { color: #000; }
.linq-app__navitem--center .linq-app__navitem-icon svg {
    fill: currentColor;   /* 닫힌 path 블랙으로 채움 */
}
.linq-app__navitem--center .linq-app__navitem-title {
    color: #000;
    font-weight: 700;
}
.linq-app__navitem--center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
}

.linq-app__bottom-spacer { height: 64px; }

/* ============================================================
 * 사이트 헤더/푸터/페이지 제목 숨김
 * ============================================================ */
body.linq-app-page header.wp-block-template-part,
body.linq-app-page header.site-header,
body.linq-app-page .wp-block-post-title,
body.linq-app-page .entry-title,
body.linq-app-page .page-title,
body.linq-app-page footer.wp-block-template-part {
    display: none !important;
}
body.linq-app-page .wp-site-blocks,
body.linq-app-page .wp-block-group,
body.linq-app-page .wp-block-post-content,
body.linq-app-page .entry-content,
body.linq-app-page main,
body.linq-app-page article,
body.linq-app-page .is-layout-constrained,
body.linq-app-page .is-layout-flow {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
body.linq-app-page :where(.wp-block-group, .entry-content, .wp-block-post-content) > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==== 인라인 에디터 hover 힌트 (Phase 2: #82) ==== */
[data-editable]:hover {
    outline: 1px dashed transparent;
    cursor: default;
}

/* ==== Preview 모드 — 클릭 비활성화 + cursor 정적 + hover transform 제거 ==== */
.linq-app--preview a {
    cursor: default;
    pointer-events: none;
}
.linq-app--preview a[href]:hover {
    transform: none !important;
}
.linq-app--preview .linq-app__icon-btn {
    cursor: default;
}
/* preview에서 nav 카테고리 등 hover 색 변경도 비활성 */
.linq-app--preview .linq-app__navitem:hover {
    color: #B5B7BD;
}

/* ============================================================
 * v0.7 폰트 일괄 업데이트 — Twenty Twenty-Five 기본 기준
 *   본문 p: 18px / 300
 *   최소: 16px / 300 (검색창 placeholder 기준)
 *   h1: 28~35px / 800
 *   font-weight 300 (Light) 본문 / 700 (Bold) 강조
 * ============================================================ */
.linq-app__welcome-title { font-size: 18px !important; font-weight: 700 !important; color: #fff !important; }
.linq-app__welcome-sub   { font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.88) !important; }

.linq-app__subcard-icon {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1a1a1a !important;
    line-height: 0 !important;
}
.linq-app__subcard-icon svg { display: block; }
.linq-app__subcard-title { font-size: 16px !important; font-weight: 700 !important; }

.linq-app__action-title { font-size: 18px !important; font-weight: 700 !important; }
.linq-app__action-sub   { font-size: 16px !important; font-weight: 300 !important; line-height: 1.4 !important; }
.linq-app__action-icon {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
.linq-app__action-icon svg { display: block; }
.linq-app__action--consult .linq-app__action-icon { color: #fff; }

.linq-app__featured-label { font-size: 16px !important; font-weight: 800 !important; }
.linq-app__featured-title { font-size: 16px !important; font-weight: 500 !important; }
.linq-app__featured-thumb {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    color: var(--linq-brand, #1a1a1a);
}
.linq-app__featured-thumb svg { display: block; }

.linq-app__navitem-title { font-size: 12px !important; font-weight: 600 !important; }

.linq-app__welcome-bot-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--linq-brand, #1a1a1a);
}
.linq-app__welcome-bot-emoji svg { display: block; }

/* 큰 카드 SVG 아이콘 */
.linq-app__card-icon {
    color: #1a1a1a;
}
.linq-app__card-icon svg { display: block; }

/* ============================================================
 * PC / 태블릿 가로 — 모바일 UI를 비율 그대로 PC에 맞게 키움
 * 컨테이너 460px → 700px, 폰트·아이콘·카드도 비례 확대 (약 1.35배)
 * ============================================================ */
@media (min-width: 768px) {
    .linq-app__viewport {
        max-width: 700px;
        padding: 16px 24px 60px;
    }
    .linq-app__bottomnav {
        max-width: 700px;
        padding: 6px 12px max(6px, env(safe-area-inset-bottom));
    }
    .linq-app__bottom-spacer { height: 80px; }

    /* 헤더 */
    .linq-app__header { padding: 8px 4px 16px; }
    .linq-app__brand-logo { width: 44px; height: 44px; font-size: 22px; }
    .linq-app__brand-name { font-size: 19px; }
    .linq-app__brand-sub { font-size: 16px; }
    .linq-app__icon-btn { width: 44px; height: 44px; }

    /* Hero 슬로건 */
    .linq-app__hero { margin: 12px 4px 22px; }
    .linq-app__hero-line { font-size: 40px; line-height: 1.28; }
    .linq-app__hero--cycling { min-height: calc(40px * 1.28 * 2 + 6px); }

    /* 검색바 */
    .linq-app__search { padding: 14px 18px; min-height: 56px; }
    .linq-app__search-placeholder { font-size: 17px; }
    .linq-app__search-icon svg,
    .linq-app__search-mic svg { width: 22px; height: 22px; }

    /* 카테고리 칩 */
    .linq-app__chips { gap: 10px; margin: 18px 0 14px; }
    .linq-app__chip { font-size: 16px; padding: 10px 22px; }

    /* 서비스 grid (4열 유지, 셀 키움) */
    .linq-app__service-grid {
        gap: 18px 12px;
        padding: 6px 4px 12px;
    }
    .linq-app__service-icon { width: 64px; height: 64px; }
    .linq-app__service--3d .linq-app__service-icon { width: 60px; height: 60px; }
    .linq-app__service-title { font-size: 14px; }

    /* slider dots */
    .linq-app__slider-dot { width: 8px; height: 8px; }

    /* Welcome 배너 */
    .linq-app__welcome {
        gap: 16px;
        padding: 16px 22px;
        margin-top: 22px;
    }
    .linq-app__welcome-bot { width: 52px; height: 52px; }
    .linq-app__welcome-title { font-size: 18px; }
    .linq-app__welcome-sub { font-size: 14px; }

    /* AI 인사이트 / 매거진 */
    .linq-app__feed { margin: 22px 0 8px; }
    .linq-app__feed-header { margin-bottom: 12px; }
    .linq-app__feed-title { font-size: 22px; }
    .linq-app__feed-more { font-size: 15px; }
    .linq-app__feed-slider { gap: 14px; margin: 0 -24px; padding: 4px 24px 8px; }
    .linq-app__feed-card { flex: 0 0 260px; }
    .linq-app__feed-card-title { font-size: 17px; }
    .linq-app__feed-card-desc { font-size: 13px; }

    /* 매거진 카테고리 슬라이더 */
    .linq-app__mag-section { margin: 6px 0 24px; }
    .linq-app__mag-title { font-size: 20px; }
    .linq-app__mag-more { font-size: 14px; }
    .linq-app__mag-slider .linq-app__feed-card { flex-basis: 220px; }

    /* 하단 nav 비례 확대 */
    .linq-app__navitem { gap: 4px; padding: 6px 0; }
    .linq-app__navitem-icon svg { width: 24px; height: 24px; }
    .linq-app__navitem-title { font-size: 12px; }
    .linq-app__navitem--center::before { width: 5px; height: 5px; }

    /* 회사소개 큰 카드 */
    .linq-app__main-cards { gap: 14px; }
    .linq-app__card { padding: 18px; }
    .linq-app__card-title { font-size: 17px; }

    /* 회사소개 작은 카드 */
    .linq-app__sub-cards { gap: 10px; }
    .linq-app__subcard { padding: 14px 8px; }
    .linq-app__subcard-icon { font-size: 28px; }
    .linq-app__subcard-title { font-size: 13px; }

    /* ---- 헤더: PC에선 햄버거 숨기고 drawer를 가운데 inline 가로 메뉴로 ---- */
    .linq-app__menu-toggle { display: none !important; }

    .linq-app__header { gap: 16px; }
    /* drawer를 inline static element로 바꾸고 헤더 가운데 끼움 */
    .linq-app__drawer {
        position: static;
        top: auto; left: auto; right: auto;
        flex: 1 1 auto;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
        max-height: none;
        overflow: visible;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
        z-index: auto;
    }
    /* 메뉴 리스트 가로 flex */
    .linq-app__drawer-nav > ul,
    .linq-app__drawer-list,
    .linq-app__drawer-nav .wp-block-navigation__container {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px !important;
    }
    .linq-app__drawer-nav .wp-block-navigation-item { width: auto; }
    .linq-app__drawer-nav a,
    .linq-app__drawer-list a,
    .linq-app__drawer-nav .wp-block-navigation-item__content {
        padding: 8px 14px !important;
        font-size: 15px;
        white-space: nowrap;
        border-radius: 999px;  /* pill */
    }
}