@charset "utf-8";
/* =============================================================
   기능 키워드 SEO 랜딩 전용 스타일 (feature.php)
   - 라이트 전용 / 8배수 그리드 / .feature-* 네임스페이스
   - 좌측 보더 선택강조 금지, 과한 박스/그림자 지양(담백)
   ============================================================= */

.feature-page{
    background:#ffffff;
    color:#1f2937;
    line-height:1.55;
    letter-spacing:-.4px;
}
.feature-page *{box-sizing:border-box;}

.feature-wrap{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
}

.feature-skip{
    position:absolute;left:-9999px;top:0;
    background:#2563eb;color:#fff;padding:8px 16px;z-index:100;border-radius:0 0 8px 0;
}
.feature-skip:focus{left:0;}

/* ---------- 헤더 ---------- */
.feature-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid #eef0f3;
}
.feature-header__inner{
    display:flex;align-items:center;justify-content:space-between;
    min-height:56px;
}
.feature-header__logo{display:inline-flex;align-items:center;}
.feature-header__logo img{height:24px;width:auto;}
.feature-header__nav{display:flex;align-items:center;gap:8px;}
.feature-header__nav a{
    display:inline-flex;align-items:center;
    min-height:40px;padding:0 12px;
    font-size:14px;color:#4b5563;border-radius:8px;
}
.feature-header__nav a:hover{color:#111827;background:#f4f5f7;}
.feature-header__cta{
    color:#fff !important;background:#2563eb !important;font-weight:600;
}
.feature-header__cta:hover{background:#1d4ed8 !important;}

/* ---------- 히어로 ---------- */
.feature-hero{
    background:linear-gradient(180deg,#f0f6ff 0%,#ffffff 100%);
    padding:48px 0 40px;
    overflow:hidden;
}
.feature-hero__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    align-items:center;
}
.feature-eyebrow{
    display:inline-block;
    font-size:13px;font-weight:600;color:#2563eb;
    letter-spacing:0;margin-bottom:16px;
}
.feature-hero__title{
    font-size:34px;line-height:1.25;font-weight:800;color:#111827;
    margin:0 0 16px;
    word-break:keep-all;
}
.feature-hero__sub{
    font-size:17px;line-height:1.6;color:#4b5563;
    margin:0 0 24px;word-break:keep-all;
}
.feature-hero__actions{
    display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;
}
.feature-hero__stores{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.feature-hero__stores img{height:38px;width:auto;max-width:100%;}

/* 버튼 공통 */
.feature-btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;padding:0 24px;
    font-size:16px;font-weight:600;border-radius:10px;
    transition:background .15s ease,border-color .15s ease;
    white-space:nowrap;
}
.feature-btn--primary{background:#2563eb;color:#fff;}
.feature-btn--primary:hover{background:#1d4ed8;}
.feature-btn--ghost{
    background:#fff;color:#374151;border:1px solid #d1d5db;
    min-height:48px;
}
.feature-btn--ghost:hover{border-color:#2563eb;color:#2563eb;}

/* 폰 목업 */
.feature-hero__mockup{display:flex;justify-content:center;}
.feature-mockup{
    position:relative;
    width:236px;max-width:100%;
    aspect-ratio:236/480;
    background:#111827;
    border-radius:32px;
    padding:12px;
    box-shadow:0 20px 48px rgba(37,99,235,.18);
}
.feature-mockup__notch{
    position:absolute;top:12px;left:50%;transform:translateX(-50%);
    width:88px;height:20px;background:#111827;border-radius:0 0 14px 14px;z-index:2;
}
.feature-mockup__screen{
    width:100%;height:100%;
    background:linear-gradient(160deg,#e0ecff 0%,#f4f8ff 100%);
    border-radius:22px;
    display:flex;align-items:center;justify-content:center;
}
.feature-mockup__label{
    font-size:18px;font-weight:700;color:#2563eb;
    padding:0 16px;text-align:center;word-break:keep-all;
}

/* ---------- 섹션 공통 ---------- */
.feature-section{padding:48px 0;}
.feature-section--alt{background:#f7f9fc;}
.feature-label{
    font-size:12px;font-weight:700;color:#2563eb;letter-spacing:1px;
    margin:0 0 8px;
}
.feature-section__title{
    font-size:24px;line-height:1.35;font-weight:800;color:#111827;
    margin:0 0 32px;word-break:keep-all;
}

/* ---------- 이점 ---------- */
.feature-benefits{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
.feature-benefit{
    display:flex;gap:16px;align-items:flex-start;
    padding:24px;
    background:#fff;
    border:1px solid #eef0f3;
    border-radius:16px;
}
.feature-benefit__icon{
    flex:0 0 auto;font-size:28px;line-height:1;margin-top:2px;
}
.feature-benefit__title{
    font-size:17px;font-weight:700;color:#111827;margin:0 0 8px;
    word-break:keep-all;
}
.feature-benefit__desc{
    font-size:15px;line-height:1.6;color:#4b5563;margin:0;word-break:keep-all;
}

/* ---------- 사용법(steps) ---------- */
.feature-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    counter-reset:none;
}
.feature-step{display:flex;flex-direction:column;gap:16px;}
.feature-step__num{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:0 0 auto;
    background:#2563eb;color:#fff;
    font-size:18px;font-weight:800;border-radius:50%;
}
.feature-step__title{
    font-size:17px;font-weight:700;color:#111827;margin:0 0 8px;word-break:keep-all;
}
.feature-step__desc{
    font-size:15px;line-height:1.6;color:#4b5563;margin:0;word-break:keep-all;
}

/* ---------- FAQ (네이티브 details) ---------- */
.feature-faqs{border-top:1px solid #eef0f3;}
.feature-faq{border-bottom:1px solid #eef0f3;}
.feature-faq__q{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:48px;padding:16px 0;
    font-size:16px;font-weight:600;color:#111827;
    word-break:keep-all;
}
.feature-faq__q::-webkit-details-marker{display:none;}
.feature-faq__q::after{
    content:"";flex:0 0 auto;
    width:20px;height:20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:contain;
    transition:transform .2s ease;
}
.feature-faq[open] .feature-faq__q::after{transform:rotate(180deg);}
.feature-faq__a{
    padding:0 0 20px;
    font-size:15px;line-height:1.7;color:#4b5563;word-break:keep-all;
}

/* ---------- 연계 도움말 ---------- */
.feature-help{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    flex-wrap:wrap;
    padding:32px;
    background:#fff;border:1px solid #eef0f3;border-radius:16px;
}
.feature-help__eyebrow{font-size:13px;color:#6b7280;margin:0 0 8px;}
.feature-help__title{font-size:20px;font-weight:700;color:#111827;margin:0;word-break:keep-all;}

/* ---------- 다른 기능 칩 ---------- */
.feature-chips{display:flex;flex-wrap:wrap;gap:8px;}
.feature-chip{
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 20px;
    font-size:15px;font-weight:600;color:#374151;
    background:#f4f5f7;border-radius:999px;
    transition:background .15s ease,color .15s ease;
}
.feature-chip:hover{background:#e0ecff;color:#2563eb;}

/* ---------- 하단 CTA ---------- */
.feature-cta{
    background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
    padding:56px 0;
}
.feature-cta__inner{text-align:center;}
.feature-cta__title{
    font-size:26px;font-weight:800;color:#fff;margin:0 0 16px;word-break:keep-all;
}
.feature-cta__desc{font-size:16px;color:#dbeafe;margin:0 0 24px;word-break:keep-all;}
.feature-cta__stores{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.feature-cta__stores img{height:40px;width:auto;max-width:100%;}

/* ---------- 푸터 ---------- */
.feature-footer{background:#f7f9fc;border-top:1px solid #eef0f3;padding:32px 0;}
.feature-footer__inner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.feature-footer__links{display:flex;flex-wrap:wrap;gap:8px 20px;}
.feature-footer__links a{
    display:inline-flex;align-items:center;min-height:40px;
    font-size:14px;color:#6b7280;
}
.feature-footer__links a:hover{color:#2563eb;}
.feature-footer__copy{font-size:13px;color:#9ca3af;}

/* =============================================================
   반응형 — 데스크톱 확장
   ============================================================= */
@media (min-width:768px){
    .feature-hero{padding:72px 0 64px;}
    .feature-hero__grid{grid-template-columns:1.1fr .9fr;gap:48px;}
    .feature-hero__title{font-size:44px;}
    .feature-mockup{width:280px;}
    .feature-section{padding:64px 0;}
    .feature-section__title{font-size:28px;}
    .feature-benefit__title{font-size:18px;}
}

/* =============================================================
   반응형 — 모바일 (≤767px)
   ============================================================= */
@media (max-width:767px){
    .feature-wrap{padding:0 16px;}
    .feature-header__nav a:not(.feature-header__cta){display:none;}
    .feature-hero__title{font-size:28px;}
    .feature-hero__sub{font-size:16px;}
    .feature-hero__mockup{order:-1;}
    .feature-mockup{width:200px;}
    .feature-benefits{grid-template-columns:1fr;}
    .feature-steps{grid-template-columns:1fr;gap:20px;}
    .feature-step{flex-direction:row;align-items:flex-start;}
    .feature-step__num{width:36px;height:36px;font-size:16px;}
    .feature-btn{flex:1 1 auto;}
    .feature-help{padding:24px;}
    .feature-footer__inner{flex-direction:column;align-items:flex-start;}
}

@media (max-width:359px){
    .feature-hero__title{font-size:24px;}
    .feature-section__title{font-size:21px;}
}