/**
 * 파일명: theme.css
 * 파일 위치: custom/
 * 기능: urlgo.kr 공개 화면 테마 - 시안 B 테크 에메랄드 (WEB/Projects/docs/design/design_system_02-tech-emerald.md)
 *       둥근 모서리(12~16px)·부드러운 그림자·떠오르는 hover, 에메랄드→남색 그라데이션, 어두운 회색(#343541) 바닥글
 *       첫 화면 구역(ug- 로 시작하는 클래스)은 custom/home.php 가 그린다
 *       custom/head.php 가 공개 페이지(첫 화면·약관·방침·신고·안내·소개·가이드)에만 부른다. 관리자·회원 화면은 건드리지 않는다
 *       ⚠️ 시안 원본의 #10a37f 는 흰 바탕 흰 글자 대비가 3.2:1 이라 글자가 올라가는 면·글자색으로 쓰지 않는다
 *          버튼·링크는 대표 색 설정(#0B755C, 흰 글자 5.6:1). 그라데이션 띠는 #0b755c→#1a6c8f (흰 글자 5.6~5.8:1)
 *       고친 뒤에는 이 파일을 먼저 올리고 60초 뒤 custom/bootstrap.php 의 UG_THEME_VERSION 을 올려서 올린다
 * 작성일: 2026-10-10
 */

/* =========================================================
   1. 색·모양·글꼴
   ========================================================= */
body.svc-body {
    --ug-emerald: #10a37f;          /* 장식(아이콘 면·밑줄)에만 - 글자색 금지 */
    --ug-emerald-dark: #0b755c;     /* 글자·버튼 */
    --ug-emerald-deep: #0b5b48;     /* 옅은 초록 면 위 글자 */
    --ug-mint: #a7f3d0;             /* 어두운 띠 위 강조 글자 */
    --ug-indigo: #5664d2;
    --ug-indigo-text: #4451b8;      /* 흰 바탕 남색 글자 (6.2:1) */
    --ug-ink: #343541;
    --ug-sub: #5f6670;              /* 흰 바탕 5.9:1 · 옅은 회색 면 5.6:1 */
    --ug-line: #e9ecef;
    --ug-field: #dfe2e5;
    --ug-soft: #f8f9fa;
    --ug-mint-soft: #e8f7f1;
    --ug-indigo-soft: #eef0fb;
    --ug-hero: linear-gradient(135deg, #0b755c 0%, #1a6c8f 100%);
    --ug-brand: linear-gradient(90deg, #0b755c, #5664d2);
    --ug-shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.05);
    --ug-shadow-md: 0 15px 30px rgba(0, 0, 0, 0.10);
    --ug-shadow-btn: 0 4px 12px rgba(11, 117, 92, 0.18);
    --ug-ease: 0.3s ease;
    --svc-text: #343541;
    --svc-muted: #5f6670;
    --svc-border: #e9ecef;
    --svc-bg-alt: #f8f9fa;
    --svc-radius: 12px;
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ug-ink);
}

body.svc-body a {
    color: var(--ug-emerald-dark);
}

body.svc-body :focus-visible {
    outline: 3px solid rgba(16, 163, 127, 0.45);
    outline-offset: 2px;
}

/* =========================================================
   2. 머리글
   ========================================================= */
body.svc-body .svc-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 var(--ug-line);
}

body.svc-body .svc-header.is-scrolled {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.12);
}

body.svc-body .svc-logo-mark {
    background: var(--ug-brand);
    box-shadow: 0 4px 12px rgba(86, 100, 210, 0.25);
}

body.svc-body .svc-logo,
body.svc-body .svc-logo:hover {
    color: var(--ug-ink);
}

body.svc-body .svc-logo-text {
    letter-spacing: -0.02em;
}

body.svc-body .svc-logo-text em {
    color: var(--ug-indigo-text);
}

body.svc-body .svc-nav-link {
    color: var(--ug-ink);
    border-radius: 6px;
}

body.svc-body .svc-nav-link:hover,
body.svc-body .svc-nav-link.is-active {
    color: var(--ug-emerald-dark);
}

/* =========================================================
   3. 버튼·입력
   ========================================================= */
body.svc-body .svc-btn-primary {
    border-radius: 8px;
    box-shadow: var(--ug-shadow-btn);
    transition: background-color var(--ug-ease), box-shadow var(--ug-ease), transform var(--ug-ease);
}

body.svc-body .svc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 117, 92, 0.28);
}

body.svc-body .form-control,
body.svc-body .form-select {
    border-color: var(--ug-field);
    border-radius: 8px;
}

body.svc-body .form-control:focus,
body.svc-body .form-select:focus {
    border-color: var(--ug-emerald);
    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.15);
}

body.svc-body .btn-outline-secondary {
    border-radius: 8px;
}

/* =========================================================
   4. 첫 화면 (custom/home.php)
   ========================================================= */
.ug-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.ug-wrap-narrow {
    max-width: 820px;
}

/* 4-1. 히어로 - 그라데이션 띠 */
/* 오른쪽 위 은은한 빛은 배경 층으로 그린다 - 장식 요소를 구역 밖으로 빼서 자르면 잘림 후보로 잡힌다(web-check) */
.ug-hero {
    background: radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.12), transparent 34%), var(--ug-hero);
    color: #fff;
    padding: 40px 0 44px;
}

.ug-hero .ug-wrap {
    text-align: center;
}

.ug-hero-label {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.ug-hero h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    color: #fff;
}

.ug-hero h1 span {
    color: var(--ug-mint);
}

.ug-hero-sub {
    margin: 0 auto 26px;
    font-size: clamp(15px, 1rem + 0.3vw, 18px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

/* 줄이기 도구 - 흰 카드 하나에 입력·결과·최근 목록을 담는다 */
.ug-tool {
    max-width: 780px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    color: var(--ug-ink);
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.ug-tool .svc-shorten-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.ug-tool .svc-alert {
    max-width: none;
}

.ug-tool .svc-result {
    margin-top: 16px;
}

.ug-tool .svc-recent {
    margin-top: 14px;
}

.ug-hero-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
}

.ug-hero-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 14px;
    font-weight: 600;
}

.ug-hero-chips small {
    font-size: 12px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}

/* 4-2. 공통 구역 */
.ug-sec {
    padding: 56px 0;
    background: #fff;
}

.ug-sec-alt {
    background: var(--ug-soft);
}

.ug-head {
    text-align: center;
    margin-bottom: 32px;
}

.ug-eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ug-emerald-dark);
}

.ug-head h2 {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--ug-ink);
}

.ug-head h2 .svc-hl {
    background: var(--ug-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ug-lead {
    margin: 0 auto;
    font-size: 17px;
    color: var(--ug-sub);
}

.ug-lead a {
    font-weight: 600;
}

.ug-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ug-mint-soft);
    color: var(--ug-emerald-dark);
    font-size: 20px;
}

/* 4-3. 링크 하나로 받는 세 가지 */
.ug-trio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.ug-card {
    padding: 26px 24px;
    border: 1px solid var(--ug-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ug-shadow-sm);
    transition: box-shadow var(--ug-ease), transform var(--ug-ease);
}

.ug-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ug-shadow-md);
}

.ug-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    font-size: 20px;
    font-weight: 700;
}

.ug-card p {
    margin: 0;
    color: var(--ug-sub);
    font-size: 16px;
}

.ug-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--ug-indigo-soft);
    color: var(--ug-indigo-text);
}

/* 4-4. 붙이기 좋은 곳 */
.ug-uses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.ug-uses li {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--ug-line);
    border-radius: 16px;
    background: #fff;
}

.ug-uses h3 {
    margin: 2px 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.ug-uses p {
    margin: 0;
    font-size: 15px;
    color: var(--ug-sub);
}

/* 4-5. 로그인 전후 비교표 - 576px 미만은 최소 폭을 풀어 화면 폭 안에 넣는다(아래 7절)
   overflow-x:auto 만 주면 세로도 auto 가 되어 1px 차이에 세로 스크롤바가 생긴다(2026-10-10 실측 444/445px) - 세로는 숨긴다 */
.ug-compare-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ug-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ug-shadow-sm);
}

.ug-compare {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15px;
}

.ug-compare th,
.ug-compare td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ug-line);
    text-align: center;
    vertical-align: middle;
}

.ug-compare tbody tr:last-child th,
.ug-compare tbody tr:last-child td {
    border-bottom: 0;
}

.ug-compare thead th {
    font-size: 16px;
    font-weight: 700;
    background: var(--ug-soft);
}

.ug-compare thead th small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ug-sub);
}

.ug-compare tbody th {
    text-align: left;
    font-weight: 600;
}

.ug-compare .is-member {
    background: var(--ug-mint-soft);
    color: var(--ug-emerald-deep);
    font-weight: 600;
}

.ug-compare thead .is-member {
    background: #d5f1e6;
}

.ug-compare thead .is-member small {
    color: var(--ug-emerald-deep);
}

.ug-compare .fa-check {
    color: var(--ug-emerald-dark);
}

.ug-no {
    color: #9aa0a6;
}

.ug-plan-cta {
    margin: 22px 0 0;
    text-align: center;
}

/* 4-6. 규칙 띠 */
.ug-rules-band {
    background: var(--ug-indigo-soft);
    padding: 22px 0;
}

.ug-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.ug-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ug-ink);
}

.ug-rules i {
    color: var(--ug-indigo-text);
    width: 18px;
    text-align: center;
}

/* 4-7. 자주 묻는 질문 */
.ug-faq {
    display: grid;
    gap: 10px;
}

.ug-faq details {
    border: 1px solid var(--ug-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color var(--ug-ease), box-shadow var(--ug-ease);
}

.ug-faq details[open] {
    border-color: rgba(16, 163, 127, 0.45);
    box-shadow: var(--ug-shadow-sm);
}

.ug-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.ug-faq summary::-webkit-details-marker {
    display: none;
}

.ug-faq summary::after {
    content: '+';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ug-mint-soft);
    color: var(--ug-emerald-dark);
    font-weight: 700;
}

.ug-faq details[open] summary::after {
    content: '-';
}

.ug-faq details p {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--ug-sub);
    font-size: 16px;
}

/* 4-8. 마무리 */
.ug-cta {
    background: var(--ug-brand);
    color: #fff;
    text-align: center;
    padding: 52px 0;
}

.ug-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800;
    color: #fff;
}

.ug-cta p {
    margin: 0 0 22px;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.92);
}

body.svc-body .ug-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 24px;
    border-radius: 8px;
    background: #fff;
    color: var(--ug-emerald-dark);
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10);
    transition: box-shadow var(--ug-ease), transform var(--ug-ease);
}

body.svc-body .ug-cta-btn:hover {
    color: var(--ug-emerald-deep);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   5. 일반 페이지 · 정책 문서 · 안내
   ========================================================= */
body.svc-body .svc-doc {
    border-radius: 16px;
    border-color: var(--ug-line);
    box-shadow: var(--ug-shadow-sm);
}

body.svc-body .svc-doc::before {
    background: var(--ug-brand);
}

body.svc-body .svc-card {
    border-radius: 16px;
    box-shadow: var(--ug-shadow-sm);
}

/* =========================================================
   6. 바닥글 - 어두운 회색
   ========================================================= */
body.svc-body .svc-footer {
    background: var(--ug-ink);
    border-top: 0;
    color: rgba(255, 255, 255, 0.72);
}

body.svc-body .svc-footer-top {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.svc-body .svc-footer-brand,
body.svc-body .svc-footer-brand .svc-logo-text {
    color: #fff;
}

body.svc-body .svc-footer-brand .svc-logo-text em {
    color: var(--ug-mint);
}

body.svc-body .svc-footer-links a {
    color: rgba(255, 255, 255, 0.85);
}

body.svc-body .svc-footer-links a:hover {
    color: var(--ug-mint);
}

body.svc-body .svc-footer-biz li span,
body.svc-body .svc-footer-copy {
    color: rgba(255, 255, 255, 0.6);
}

body.svc-body .svc-footer-biz .svc-footer-op,
body.svc-body .svc-footer-biz .svc-footer-op a {
    color: #fff;
}

body.svc-body .svc-footer-biz a {
    color: rgba(255, 255, 255, 0.72);
}

body.svc-body .svc-footer-biz a:hover {
    color: var(--ug-mint);
}

/* =========================================================
   7. 휴대폰 - 비교표를 화면 폭 안에 (가로로 밀지 않게)
   ========================================================= */
@media (max-width: 575.98px) {
    .ug-compare {
        min-width: 0;
        table-layout: fixed;
        font-size: 14px;
    }

    .ug-compare col.ug-col-feat { width: 40%; }
    .ug-compare col.ug-col-guest { width: 24%; }
    .ug-compare col.ug-col-member { width: 36%; }

    .ug-compare th,
    .ug-compare td {
        padding: 11px 8px;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .ug-compare thead th {
        font-size: 14px;
        line-height: 1.35;
    }

    .ug-compare thead th small {
        font-size: 12px;
        margin-top: 2px;
    }

    .ug-compare tbody th {
        padding-left: 12px;
        line-height: 1.4;
    }

    .ug-compare td {
        line-height: 1.4;
    }
}

/* =========================================================
   8. 화면이 넓어질 때
   ========================================================= */
@media (min-width: 768px) {
    .ug-hero {
        padding: 64px 0 68px;
    }

    .ug-tool {
        padding: 20px;
    }

    .ug-sec {
        padding: 80px 0;
    }

    .ug-trio {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .ug-uses {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .ug-rules {
        grid-template-columns: repeat(4, auto);
        justify-content: center;
        gap: 12px 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ug-card,
    .ug-card:hover,
    body.svc-body .svc-btn-primary:hover,
    body.svc-body .ug-cta-btn:hover {
        transition: none;
        transform: none;
    }
}