@charset "utf-8";
/* ==================================================================================
   [주소스팟 최신주소 스킨] 다크 네이비 + 오렌지
   색은 아래 .jl, .jw 의 변수 값만 바꾸면 됩니다.
   ================================================================================== */
.jl, .jw{ --o:#FF8A35; --o-hi:#FFB07A; --ink-on:#1A0D02; --bg:#070C17; --card:#0D1529; --card-2:#0F1830; --line:#1F2B47; --line-2:#2A3757;
    --sub:#C9D1E0; --muted:#A9B3C7; --ease:cubic-bezier(.2,.7,.2,1);
    font-family:'Noto Sans KR', sans-serif; color:#E8ECF4; word-break:keep-all; overflow-wrap:anywhere; }
.jl *, .jw *{ box-sizing:border-box; }
.jl a, .jw a{ text-decoration:none; }
.jl-en, .jw-en{ font-family:'Outfit','Noto Sans KR',sans-serif; }

/* ---------- 상단 ---------- */
.jl-hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid #16203A; }
.jl-hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.jl-grid{ position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:72px 72px; background-position:center top;
    -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 30%, #000 10%, transparent 75%);
            mask-image:radial-gradient(ellipse 60% 70% at 50% 30%, #000 10%, transparent 75%); }
.jl-beam{ position:absolute; top:-10%; left:50%; width:1000px; height:640px; margin-left:-500px;
    background:conic-gradient(from 180deg at 50% 0%, transparent 154deg, rgba(255,138,53,.12) 172deg, rgba(255,214,186,.16) 180deg, rgba(255,138,53,.12) 188deg, transparent 206deg);
    filter:blur(28px); }
.jl-aura{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; }
.jl-aura.a{ width:440px; height:440px; left:4%; top:16%; background:#1B4C9C; animation:jlDrift 18s ease-in-out infinite alternate; }
.jl-aura.b{ width:380px; height:380px; right:4%; top:4%; background:#7A3A12; opacity:.4; animation:jlDrift 22s ease-in-out infinite alternate-reverse; }
.jl-hero-in{ max-width:900px; margin:0 auto; padding:84px 24px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.jl-crumb{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 4px; padding:0; list-style:none; font-size:13px; color:var(--muted); }
.jl-crumb a{ color:var(--sub) !important; }
.jl-crumb a:hover{ color:#fff !important; }
.jl-crumb li + li::before{ content:'›'; margin-right:8px; color:#5A6684; }
.jl-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:600; letter-spacing:3px; color:var(--o); }
.jl-eyebrow::before, .jl-eyebrow::after{ content:''; width:26px; height:1px; background:linear-gradient(90deg, transparent, var(--o)); }
.jl-eyebrow::after{ transform:scaleX(-1); }
.jl-h1{ margin:0; font-size:clamp(38px, 6.6vw, 72px); font-weight:900; letter-spacing:-.045em; line-height:1.12; color:#fff; }
.jl-h1 .w{ background:linear-gradient(180deg, #fff 30%, #AEB9CF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.jl-h1 .hl{ background-image:linear-gradient(100deg, #FF8A35 0%, #FFB07A 35%, #FFF3EA 50%, #FFB07A 65%, #FF8A35 100%); background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:jlShine 6s ease-in-out infinite; }
.jl-desc{ margin:0; max-width:680px; font-size:16px; line-height:1.85; color:var(--muted); }
.jl-sites{ margin:0; font-size:14px; color:var(--sub); }

/* 카테고리 탭 */
.jl-tabs-wrap{ max-width:1240px; margin:0 auto; padding:18px 24px 40px; }
.jl-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; list-style:none; }
.jl-tab{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; white-space:nowrap;
    background:rgba(15,24,48,.65); border:1px solid var(--line-2); color:var(--sub) !important; font-size:14.5px; font-weight:500;
    transition:border-color .3s, color .3s, background .3s, transform .3s var(--ease); }
.jl-tab svg{ color:var(--o); flex-shrink:0; transition:color .3s; }
.jl-tab .n{ min-width:22px; padding:1px 7px; border-radius:999px; background:#1A2440; font-size:12px; font-weight:600; color:var(--muted); text-align:center; }
.jl-tab:hover{ border-color:rgba(255,138,53,.6); color:#fff !important; transform:translateY(-2px); }
.jl-tab.on{ background:var(--o); border-color:var(--o); color:var(--ink-on) !important; }
.jl-tab.on svg{ color:var(--ink-on); }
.jl-tab.on .n{ background:rgba(26,13,2,.15); color:var(--ink-on); }

/* ---------- 목록 ---------- */
.jl-main{ max-width:1240px; margin:0 auto; padding:48px 24px 0; }
.jl-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.jl-total{ font-size:15px; color:var(--muted); }
.jl-total b{ color:#fff; font-weight:700; }
.jl-bar-r{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.jl-sort{ display:inline-flex; padding:4px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.jl-sort button{ height:36px; padding:0 14px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer; transition:background .25s, color .25s; }
.jl-sort button:hover{ color:#fff; }
.jl-sort button[aria-pressed="true"]{ background:#1A2440; color:#fff; }
.jl-add{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:12px; background:var(--o); color:var(--ink-on) !important; font-size:14px; font-weight:700;
    box-shadow:0 10px 26px -10px rgba(255,138,53,.7); transition:transform .3s var(--ease); }
.jl-add:hover{ transform:translateY(-2px); }
.jl-admin{ display:inline-flex; align-items:center; height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); color:var(--muted) !important; font-size:13.5px; }
.jl-admin:hover{ color:#fff !important; border-color:var(--o); }

.jl-grid-list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.jl-item{ position:relative; display:flex; flex-direction:column; }
.jl-card{ position:relative; overflow:hidden; isolation:isolate; flex:1; display:flex; align-items:flex-start; gap:16px; padding:22px 20px; border-radius:18px;
    background:var(--card-2); border:1px solid var(--line); color:#E8ECF4 !important; box-shadow:0 6px 20px rgba(0,0,0,.25);
    transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.jl-card::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s;
    background:radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(255,138,53,.13), transparent 60%); }
a.jl-card:hover{ transform:translateY(-5px); border-color:rgba(255,138,53,.55); box-shadow:0 18px 40px -14px rgba(0,0,0,.65); }
a.jl-card:hover::before{ opacity:1; }
.jl-card.is-nolink{ opacity:.6; }
.jl-logo{ position:relative; flex-shrink:0; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#FFFFFF; overflow:hidden; }
.jl-logo img{ width:32px; height:32px; object-fit:contain; }
.jl-logo b{ display:none; font-size:22px; font-weight:900; color:var(--ink-on); }
.jl-logo.noimg{ background:var(--o); }
.jl-logo.noimg b, .jl-logo:not(:has(img)) b{ display:block; }
.jl-logo:not(:has(img)){ background:var(--o); }
.jl-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.jl-name{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; color:#fff; }
.jl-new{ padding:1px 7px; border-radius:6px; background:rgba(255,138,53,.15); color:var(--o); font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.5px; }
.jl-host{ font-size:13px; color:var(--o-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jl-text{ margin-top:4px; font-size:14px; line-height:1.65; color:var(--muted); }
.jl-cat{ align-self:flex-start; margin-top:8px; padding:3px 10px; border-radius:999px; background:#16223F; font-size:12px; color:var(--sub); }
.jl-go{ flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,138,53,.1); color:var(--o);
    transition:background .3s, color .3s, transform .4s var(--ease); }
a.jl-card:hover .jl-go{ background:var(--o); color:var(--ink-on); transform:rotate(45deg); }
.jl-adm{ display:flex; align-items:center; gap:6px; margin-top:6px; padding:0 6px; font-size:12.5px; color:var(--muted); }
.jl-adm a{ padding:4px 10px; border-radius:7px; border:1px solid var(--line-2); color:var(--sub) !important; }
.jl-adm a:hover{ border-color:var(--o); color:#fff !important; }
.jl-adm span{ margin-left:auto; }

.jl-empty{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:70px 20px; border-radius:20px; border:1px dashed var(--line-2); text-align:center; }
.jl-empty .ic{ width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#16223F; color:var(--o); }
.jl-empty p{ margin:0; font-size:16px; color:var(--muted); }

/* 페이지 번호 (그누보드 기본 출력 꾸미기) */
.jl-pages{ margin-top:40px; }
.jl-pages .pg_wrap{ display:flex; justify-content:center; float:none; width:auto; margin:0; padding:0; }
.jl-pages .pg{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.jl-pages .pg_page, .jl-pages .pg_current{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border-radius:10px;
    border:1px solid var(--line-2); background:var(--card); color:var(--sub) !important; font-size:14px; font-weight:500; text-decoration:none; }
.jl-pages .pg_page:hover{ border-color:var(--o); color:#fff !important; }
.jl-pages .pg_current{ background:var(--o); border-color:var(--o); color:var(--ink-on) !important; font-weight:700; }
.jl-pages .sound_only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* 카테고리 안내 */
.jl-about{ margin-top:64px; padding:34px 36px; border-radius:20px; background:linear-gradient(135deg, #13213F 0%, #0D1529 60%); border:1px solid var(--line-2); }
.jl-about h2{ margin:0 0 12px; font-size:20px; font-weight:900; letter-spacing:-.02em; color:#fff; }
.jl-about p{ margin:0 0 16px; font-size:15px; line-height:1.85; color:var(--sub); }
.jl-about a{ font-size:14.5px; font-weight:700; color:var(--o) !important; }

/* ---------- 글쓰기 (사이트 등록) ---------- */
.jw{ max-width:860px; margin:0 auto; padding:80px 24px 0; }
.jw-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; margin-bottom:34px; }
.jw-head h1{ margin:0; font-size:clamp(30px, 4.6vw, 44px); font-weight:900; letter-spacing:-.04em; color:#fff; }
.jw-head h1 span{ color:var(--o); }
.jw-head p{ margin:0; font-size:15px; color:var(--muted); }
.jw-card{ position:relative; overflow:hidden; padding:40px 40px 36px; border-radius:22px; background:linear-gradient(180deg, #101A31 0%, #0B1324 100%); border:1px solid var(--line-2);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.jw-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--o), transparent); }
.jw-form{ display:flex; flex-direction:column; gap:24px; }
.jw-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.jw-field{ display:flex; flex-direction:column; gap:9px; }
.jw-label{ font-size:14px; font-weight:500; color:var(--sub); }
.jw-label em{ font-style:normal; color:var(--o); margin-left:3px; }
.jw-label small{ margin-left:6px; font-size:12.5px; font-weight:400; color:var(--muted); }
.jw-help{ margin:-2px 0 0; font-size:12.5px; color:var(--muted); }
.jw .frm_input, .jw select, .jw textarea, .jw input[type="text"], .jw input[type="password"], .jw input[type="url"]{
    width:100% !important; min-height:52px; padding:0 16px; border-radius:12px; border:1px solid var(--line-2) !important; background:#0A1222 !important; color:#fff !important;
    font:inherit; font-size:15px; box-shadow:none !important; transition:border-color .25s, box-shadow .25s; }
.jw textarea{ min-height:150px; padding:14px 16px; line-height:1.8; resize:vertical; }
.jw input::placeholder, .jw textarea::placeholder{ color:#6B7690; }
.jw .frm_input:focus, .jw select:focus, .jw textarea:focus, .jw input:focus{ outline:none; border-color:var(--o) !important; box-shadow:0 0 0 4px rgba(255,138,53,.15) !important; }
.jw select{ appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:linear-gradient(45deg, transparent 50%, #FF8A35 50%), linear-gradient(135deg, #FF8A35 50%, transparent 50%) !important;
    background-position:calc(100% - 22px) 50%, calc(100% - 17px) 50% !important; background-size:5px 5px !important; background-repeat:no-repeat !important; }
.jw select option{ background:#0E1729; color:#fff; }
.jw-url{ display:flex; align-items:center; gap:12px; }
.jw-url .pv{ flex-shrink:0; width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; }
.jw-url .pv img{ width:30px; height:30px; object-fit:contain; }
.jw-url .pv.empty{ background:#16223F; color:var(--muted); }
.jw-opts{ display:flex; flex-wrap:wrap; gap:10px 20px; margin:0; padding:0; list-style:none; font-size:14px; color:var(--sub); }
.jw-opts input{ accent-color:#FF8A35; }
.jw-file{ padding:14px 16px; border-radius:12px; border:1px dashed var(--line-2); font-size:14px; color:var(--muted); }
.jw-file input[type="file"]{ color:var(--sub); }
.jw-btns{ display:flex; gap:10px; margin-top:6px; }
.jw-btns .sz-btn-gold{ flex:1; }
.jw-cancel{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 26px; border-radius:14px; border:1px solid var(--line-2); color:var(--sub) !important; font-size:15px; }
.jw-cancel:hover{ border-color:var(--o); color:#fff !important; }
.jw #char_count_desc, .jw #char_count_wrap{ font-size:13px; color:var(--muted); }
.jw #autosave_wrapper{ position:relative; }
.jw #btn_autosave{ margin-top:8px; padding:6px 12px; border-radius:8px; border:1px solid var(--line-2); background:transparent; color:var(--muted); font-size:12.5px; cursor:pointer; }
.jw #autosave_pop{ display:none; position:absolute; z-index:10; top:100%; left:0; width:320px; padding:14px; border-radius:12px; background:#0E1729; border:1px solid var(--line-2); color:var(--sub); font-size:13px; }

/* ---------- 관리자용 글보기 ---------- */
.jv{ max-width:760px; margin:0 auto; padding:80px 24px 40px; }
.jv-card{ padding:36px; border-radius:22px; background:linear-gradient(180deg, #101A31 0%, #0B1324 100%); border:1px solid var(--line-2); }
.jv-top{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.jv-top h1{ margin:0; font-size:26px; font-weight:900; color:#fff; }
.jv-top span.c{ padding:3px 10px; border-radius:999px; background:#16223F; font-size:12.5px; color:var(--sub); }
.jv dl{ display:grid; grid-template-columns:110px 1fr; gap:12px; margin:0 0 24px; font-size:14.5px; }
.jv dt{ color:var(--muted); }
.jv dd{ margin:0; color:#fff; word-break:break-all; }
.jv dd a{ color:var(--o-hi) !important; }
.jv-text{ padding:18px; border-radius:12px; background:#0A1222; border:1px solid var(--line); font-size:14.5px; line-height:1.85; color:var(--sub); margin-bottom:24px; }
.jv-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.jv-btns a{ display:inline-flex; align-items:center; height:44px; padding:0 18px; border-radius:12px; border:1px solid var(--line-2); color:var(--sub) !important; font-size:14px; }
.jv-btns a:hover{ border-color:var(--o); color:#fff !important; }
.jv-btns a.go{ background:var(--o); border-color:var(--o); color:var(--ink-on) !important; font-weight:700; }
.jv-btns a.del{ border-color:rgba(248,113,113,.5); color:#FCA5A5 !important; }
.jv-redirect{ padding:120px 24px; text-align:center; font-size:15px; color:var(--muted); }
.jv-redirect a{ color:var(--o) !important; }

@keyframes jlDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(60px,-30px) scale(1.12); } }
@keyframes jlShine{ 0%,100%{ background-position:100% 0; } 50%{ background-position:0 0; } }

@media (prefers-reduced-motion: reduce){
    .jl *, .jw *{ animation:none !important; transition:none !important; }
}
@media (max-width:1100px){
    .jl-grid-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px){
    .jl-hero-in{ padding:60px 18px 20px; }
    .jl-tabs-wrap{ padding:12px 0 28px; }
    .jl-tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:0 16px 6px; scrollbar-width:none;
        -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent); }
    .jl-tabs::-webkit-scrollbar{ display:none; }
    .jl-tab{ min-height:40px; padding:0 14px; font-size:13.5px; }
    .jl-main{ padding:32px 16px 0; }
    .jl-bar{ flex-direction:column; align-items:stretch; }
    .jl-bar-r{ justify-content:space-between; }
    .jl-grid-list{ grid-template-columns:1fr; gap:10px; }
    .jl-card{ padding:18px 16px; gap:14px; }
    .jl-logo{ width:46px; height:46px; border-radius:12px; }
    .jl-about{ padding:26px 20px; }
    .jw{ padding:56px 16px 0; }
    .jw-card{ padding:28px 18px; border-radius:18px; }
    .jw-row{ grid-template-columns:1fr; }
    .jv{ padding:56px 16px 30px; }
    .jv-card{ padding:26px 20px; }
    .jv dl{ grid-template-columns:1fr; gap:4px 0; }
    .jv dd{ margin-bottom:10px; }
}