/* ============================================================
   캐럿 모바일 — 네이티브 앱 느낌의 셸 + 뉴스 피드 홈

   로드 순서: mobile.css → carat_header_m.css → carat_app_m.css
   (가장 마지막이라 앞의 규칙을 덮어쓴다)

   브랜드 액센트는 PC(carat_header.css)와 동일한 오렌지 #ff7a1a.
   ============================================================ */

:root{
    --app-brand:#ff7a1a;
    --app-brand-dark:#e5620a;
    --app-brand-soft:#fff1e6;
    --app-fg:#17171c;                /* 네이버톤 근-검정 제목 */
    --app-sub:#61656b;
    --app-dim:#9498a0;
    --app-line:#f0f0f3;              /* 블록 내부 얇은 구분선 */
    --app-soft:#f5f6f8;
    --app-bg:#fff;
    --app-band:#eef0f3;              /* 흰 블록 사이 회색 밴드 (네이버 홈의 핵심) */
    --app-hdh:56px;                  /* 상단 헤더 높이 — carat_header_m.css 의 --mhd-h 와 같아야 한다 */
    --app-tabsh:44px;                /* 홈 상단 주제 탭 높이 */
    --app-tabh:56px;                 /* 하단 탭바 높이(안전영역 제외) */
    --app-safe-b:env(safe-area-inset-bottom, 0px);
}

/* ─────────────────────────────────────────────
   1. 앱 셸 공통
   ───────────────────────────────────────────── */

/* 링크를 눌렀을 때 뜨는 회색 사각형 — 네이티브 앱엔 없다 */
html{ -webkit-text-size-adjust:100%; }
body{
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background:var(--app-bg);
    overscroll-behavior-y:none;      /* 위아래 끝에서 페이지가 튀는 것 방지 */
    /* 네이버 앱 특유의 또렷한 고딕 — iOS=Apple SD Gothic, 안드=Pretendard/Noto */
    font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
                'Apple SD Gothic Neo','Noto Sans KR',system-ui,Roboto,'Malgun Gothic',sans-serif;
    letter-spacing:-.01em;
}
a, button{ -webkit-tap-highlight-color:transparent; }

/* 가로 스크롤 유발 요소 차단 — 앱에서 좌우로 밀리면 티가 크게 난다 */
#wrapper, #container{ max-width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; }

/* 하단 탭바에 콘텐츠가 가리지 않게.
   #ft 는 #wrapper 바깥(문서 맨 끝)이라 wrapper 가 아닌 body 에 줘야 푸터까지 안 가린다 */
body{ padding-bottom:calc(var(--app-tabh) + var(--app-safe-b)); }

/* iOS 관성 스크롤 */
.capp_rail, .capp_tabs{ -webkit-overflow-scrolling:touch; }

/* ─────────────────────────────────────────────
   2. 서브페이지 상단 타이틀바 (뒤로가기)
   ───────────────────────────────────────────── */
#container_title.top{
    display:flex; align-items:center; gap:6px;
    height:48px; margin:0; padding:0 12px;
    border:0; border-bottom:1px solid var(--app-line);
    background:#fff;
    font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--app-fg);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#container_title.top a{
    flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; margin-left:-6px;
    border-radius:10px; color:#55565f; font-size:17px;
}
#container_title.top a:active{ background:var(--app-soft); }
/* 기본 테마의 fixed 처리는 헤더와 겹쳐 어색하므로 sticky 로 바꾼다 */
#container_title.top.fixed{
    position:sticky; top:56px; left:auto; width:auto; z-index:850;
}

/* ─────────────────────────────────────────────
   3. 하단 탭바  (예전엔 mobile/tail.php 인라인 <style> 이었다)
   ───────────────────────────────────────────── */
#carat_tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:1200;
    display:flex;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--app-line);
    padding-bottom:var(--app-safe-b);
    box-shadow:0 -2px 14px rgba(17,24,39,.05);
}
#carat_tabbar .ct_tab{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    height:var(--app-tabh); padding:0;
    border:0; background:none; cursor:pointer;
    font-family:inherit; font-size:11px; line-height:1; letter-spacing:-.02em;
    color:var(--app-sub); text-decoration:none;
}
#carat_tabbar .ct_tab .fa{ font-size:19px; line-height:1; }
#carat_tabbar .ct_tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#carat_tabbar .ct_tab.is-on{ color:var(--app-brand-dark); font-weight:700; }
#carat_tabbar .ct_tab:active{ background:var(--app-soft); }

/* 핵심 액션(빌더)만 브랜드 원형으로 살짝 띄워 도드라지게 (FAB 느낌) */
#carat_tabbar .ct_tab--build{ color:var(--app-brand-dark); font-weight:700; }
#carat_tabbar .ct_tab--build .fa{
    width:42px; height:42px; margin-top:-13px; margin-bottom:3px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--app-brand); color:#fff; font-size:17px;
    box-shadow:0 6px 15px rgba(255,122,26,.42);
}
#carat_tabbar .ct_tab--build:active{ background:none; }
#carat_tabbar .ct_tab--build:active .fa{ background:var(--app-brand-dark); }

/* 맨 위로 버튼은 탭바 위로 */
#top_btn{ bottom:calc(var(--app-tabh) + var(--app-safe-b) + 14px) !important; }

/* 메뉴/검색 드로어는 탭바보다 위에 떠야 한다.
   (carat_header_m.css 의 드로어 1000 / 딤 999 는 탭바 1200 에 가린다) */
#hd .hd_div{ z-index:1320; }
#hd_dim{ z-index:1300; }

/* ─────────────────────────────────────────────
   4. 홈 — 뉴스 피드
   ───────────────────────────────────────────── */
.capp_shell *{ box-sizing:border-box; }

/* ── 앱 셸: 헤더 아래를 [탭 + 스와이프 페이저] 로 꽉 채운다 ──
   홈에서는 문서 전체가 스크롤되지 않고 각 탭이 따로 세로 스크롤된다(네이버 앱 방식).
   body.capp_home 은 index 의 스크립트가 붙인다. */
body.capp_home{ height:100vh; height:100dvh; overflow:hidden; padding-bottom:0; }
body.capp_home #wrapper{ padding-bottom:0; }
body.capp_home #container{ min-height:0; }   /* mobile.css 의 min-height:300px 무력화 */
body.capp_home #ft{ display:none; }   /* 약관 링크는 홈 탭 하단 .capp_foot 으로 옮겼다 */

.capp_shell{
    display:flex; flex-direction:column;
    /* 1차: CSS 계산값 (JS 없이도 대충 맞는다) */
    height:calc(100vh  - var(--app-hdh) - var(--app-tabh) - var(--app-safe-b));
    height:calc(100dvh - var(--app-hdh) - var(--app-tabh) - var(--app-safe-b));
}
/* 2차: 실측값으로 교체.
   앱 모드에서 헤더에 노치 여백(safe-area-inset-top)이 붙거나 폰트 로딩으로
   높이가 달라지면 고정 상수는 어긋난다. index 의 스크립트가 재보정한다. */
body.capp_home.is-measured .capp_shell{ height:var(--app-shellh); }

/* ── 상단 탭 (가로 스크롤) ── */
.capp_tabs{
    position:relative; flex:0 0 auto;
    display:flex; align-items:stretch;
    height:var(--app-tabsh);
    padding:0 6px; margin:0;
    background:#fff; border-bottom:1px solid var(--app-line);
    overflow-x:auto; overflow-y:hidden; white-space:nowrap;
    scrollbar-width:none;
}
.capp_tabs::-webkit-scrollbar{ display:none; }
.capp_tab{
    flex:0 0 auto;
    padding:0 14px; border:0; background:none; cursor:pointer;
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.02em;
    color:var(--app-dim); white-space:nowrap;
    transition:color .15s ease;
}
.capp_tab.is-on{ color:var(--app-fg); font-weight:800; }
.capp_tab:active{ opacity:.6; }
.capp_tabs__bar{
    position:absolute; left:0; bottom:0;
    width:0; height:3px; border-radius:3px 3px 0 0;
    background:var(--app-brand);
    transition:transform .22s ease, width .22s ease;
    pointer-events:none;
}

/* ── 스와이프 페이저 ── */
.capp_pager{
    flex:1 1 auto; min-height:0;
    display:flex;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;      /* 끝에서 브라우저 뒤로가기 제스처 방지 */
    scrollbar-width:none;
}
.capp_pager::-webkit-scrollbar{ display:none; }
.capp_pane{
    flex:0 0 100%; width:100%; max-width:100%;
    scroll-snap-align:start; scroll-snap-stop:always;
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding-bottom:22px;
}

/* ── 홈 pane = 회색 밴드 위에 흰 블록을 쌓는다 (네이버 홈의 핵심 리듬) ──
   헤드라인·뉴스·영상·프롬프트가 각각 흰 블록이 되고, 사이는 8px 회색 띠로 갈린다. */
.capp_pane--home{ background:var(--app-band); padding-bottom:8px; }
.capp_pane--home > .capp_hero,
.capp_pane--home > .capp_sec,
.capp_pane--home > .capp_block,
.capp_pane--home > .capp_foot{
    margin:8px 0 0; background:#fff;
}
.capp_pane--home > :first-child{ margin-top:0; }

/* ── 홈: 상단 미니카드 스트립 (썸네일 + 제목 2줄) ── */
.capp_stripwrap{ padding:12px 0; }
.capp_strip{
    display:flex; gap:10px;
    padding:0 14px;
    overflow-x:auto; scroll-snap-type:x proximity;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.capp_strip::-webkit-scrollbar{ display:none; }
.capp_strip__card{
    flex:0 0 auto; width:228px;
    display:flex; align-items:center; gap:11px;
    padding:9px; border:1px solid var(--app-line); border-radius:13px;
    background:#fff; text-decoration:none;
    scroll-snap-align:start;
}
.capp_strip__card:active{ background:var(--app-soft); }
.capp_strip__img{
    flex:0 0 auto; width:58px; height:58px;
    border-radius:10px; overflow:hidden; background:var(--app-soft);
}
.capp_strip__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.capp_strip__img.is-empty{ background:linear-gradient(135deg,#ff9a4d,#e5620a); }
.capp_strip__card h3{
    margin:0; min-width:0;
    font-size:13px; font-weight:600; line-height:1.42;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 홈: 속보 한 줄 카드 ── */
.capp_flashsec{ padding:18px 0 16px; }
.capp_flash{
    display:flex; align-items:center; gap:10px;
    margin:0 14px; padding:14px 15px;
    border:1px solid var(--app-line); border-radius:13px;
    background:#fff; text-decoration:none;
    box-shadow:0 1px 8px rgba(17,24,39,.05);
}
.capp_flash:active{ background:var(--app-soft); }
.capp_flash__badge{
    flex:0 0 auto;
    padding:4px 9px; border-radius:7px;
    background:#ff3b30; color:#fff;
    font-size:11.5px; font-weight:800; letter-spacing:-.01em;
}
.capp_flash h3{
    flex:1 1 auto; min-width:0; margin:0;
    font-size:14.5px; font-weight:700; line-height:1.42;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.capp_flash__src{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:3px;
    font-size:12px; color:var(--app-dim); white-space:nowrap;
}

/* ── 홈: 프레스 카드 (네이버 언론사 카드) ── */
.capp_press{ padding:18px 0 10px; }
.capp_press__head{
    display:flex; align-items:center; gap:12px;
    padding:0 18px 6px;
}
.capp_press__logo{
    flex:0 0 auto;
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#ff9a4d,#e5620a); color:#fff; font-size:19px;
}
.capp_press__id{ flex:1 1 auto; min-width:0; }
.capp_press__name{
    display:flex; align-items:center; gap:8px; margin:0;
    font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--app-fg);
}
.capp_press__cnt{
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 8px; border-radius:999px;
    background:#ffe3f0; color:#f9267f;
    font-size:11.5px; font-weight:800;
}
.capp_press__cnt .fa{ font-size:9px; }
.capp_press__date{ margin:3px 0 0; font-size:12px; color:var(--app-dim); }
.capp_press__more{
    flex:0 0 auto;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--app-dim); font-size:17px; text-decoration:none;
}
.capp_press__more:active{ background:var(--app-soft); }

.capp_press__tabs{
    display:flex; margin:8px 0 0;
    border-bottom:1px solid var(--app-line);
}
.capp_ptab{
    position:relative; flex:1 1 0;
    padding:12px 0; border:0; background:none; cursor:pointer;
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.02em;
    color:var(--app-dim);
}
.capp_ptab.is-on{ color:var(--app-fg); font-weight:800; }
.capp_ptab.is-on::after{
    content:""; position:absolute; left:22%; right:22%; bottom:-1px;
    height:2.5px; border-radius:2px; background:var(--app-fg);
}
.capp_ptab:active{ opacity:.6; }

.capp_press__panel{ display:none; margin:0; padding:0; list-style:none; }
.capp_press__panel.is-on{ display:block; }
.capp_press__panel li{ border-bottom:1px solid var(--app-line); }
.capp_press__panel li:last-child{ border-bottom:0; }
.capp_press__panel a{
    display:block; padding:14px 18px;
    font-size:15px; font-weight:500; line-height:1.45;
    letter-spacing:-.02em; color:var(--app-fg); text-decoration:none;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.capp_press__panel a:active{ background:var(--app-soft); }
.capp_press__none{ padding:24px 18px; font-size:13px; color:var(--app-dim); text-align:center; }

.capp_press__duo{
    display:grid; grid-template-columns:1fr 1fr; gap:13px;
    padding:15px 18px 8px;
}
.capp_duo{ text-decoration:none; min-width:0; }
.capp_duo:active{ transform:scale(.98); }
.capp_duo__img{
    position:relative; display:block; aspect-ratio:16/10;
    border-radius:11px; overflow:hidden; background:var(--app-soft);
}
.capp_duo__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.capp_duo__img.is-empty{ background:linear-gradient(135deg,#a8b4ff,#6f86d6); }
.capp_duo__badge{
    position:absolute; left:8px; bottom:8px;
    padding:3px 8px; border-radius:6px;
    background:rgba(0,0,0,.62); color:#fff;
    font-size:10.5px; font-weight:700;
}
.capp_duo h3{
    margin:8px 1px 0;
    font-size:13.5px; font-weight:600; line-height:1.4;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 홈: 방송뉴스형 영상 레일 (썸네일 + 하단 채널바) ── */
.capp_live{ padding:18px 0 18px; }
.capp_live .capp_rail{
    display:flex; gap:12px;
    padding:4px 18px 2px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.capp_live .capp_rail::-webkit-scrollbar{ display:none; }
.capp_lcard{
    flex:0 0 auto; width:min(76vw, 300px);
    border-radius:14px; overflow:hidden;
    background:#2b3390;                     /* 방송뉴스 카드의 남색 채널바 톤 */
    text-decoration:none;
    scroll-snap-align:start;
}
.capp_lcard:active{ transform:scale(.985); }
.capp_lcard__img{
    position:relative; display:block; aspect-ratio:16/9;
    background:#12142b;
}
.capp_lcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.capp_lcard__img.is-empty{ background:linear-gradient(135deg,#3b4252,#1f2430); }
.capp_lcard__badge{
    position:absolute; left:10px; top:10px;
    padding:4px 9px; border-radius:8px;
    background:#ff3b30; color:#fff;
    font-size:11px; font-weight:800; letter-spacing:.03em;
}
.capp_lcard__cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:18px 12px 8px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    color:#fff; font-size:12.5px; font-weight:600; line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.capp_lcard__bar{
    display:flex; align-items:center; gap:9px;
    padding:11px 13px;
}
.capp_lcard__ch{
    flex:0 0 auto;
    width:26px; height:26px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.16); color:#fff; font-size:11px;
    padding-left:1px;
}
.capp_lcard__bar b{
    min-width:0; color:#fff;
    font-size:15px; font-weight:800; letter-spacing:-.02em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── 헤드라인 (블록 최상단, 이미지 전폭) ── */
.capp_hero{
    display:block; padding:0 0 16px; overflow:hidden;
    background:#fff; text-decoration:none;
}
.capp_hero:active{ background:var(--app-soft); }
.capp_hero__img{
    position:relative; aspect-ratio:16/9; background:var(--app-soft);
}
.capp_hero__img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 이미지가 없거나 깨졌을 때 — 브랜드 그라디언트로 대체 */
.capp_hero__img.is-empty{
    background:linear-gradient(135deg,#ff9a4d,#ff7a1a 60%,#e5620a);
}
.capp_hero__img.is-empty::after{
    content:"AI NEWS";
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.9); font-size:19px; font-weight:800; letter-spacing:.1em;
}
.capp_badge{
    position:absolute; top:10px; left:10px; z-index:2;
    padding:4px 8px; border-radius:6px;
    background:var(--app-brand); color:#fff;
    font-size:10.5px; font-weight:800; letter-spacing:.06em;
}
.capp_hero__body{ padding:15px 18px 0; }
.capp_hero__cat{
    display:inline-block; margin:0 0 8px;
    font-size:12px; font-weight:700; letter-spacing:0;
    color:var(--app-brand-dark);
}
.capp_hero__title{
    margin:0 0 9px; font-size:19px; font-weight:800; line-height:1.38;
    letter-spacing:-.03em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.capp_hero__meta{ font-size:12.5px; color:var(--app-dim); }

/* ── 섹션 ── */
.capp_sec{ margin:22px 0 0; padding:18px 0 6px; }
.capp_sec--flush{ padding-bottom:16px; }
.capp_sec__head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:0 18px; margin:0 0 12px;
}
.capp_sec__head h2{
    margin:0; padding:0; border:0;
    font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--app-fg);
}
.capp_sec__head a,
.capp_sec__head .capp_go{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:1px;
    padding:0; border:0; background:none; cursor:pointer; font-family:inherit;
    font-size:12.5px; font-weight:600; color:var(--app-sub); text-decoration:none;
}
.capp_sec__head a .fa,
.capp_sec__head .capp_go .fa{ font-size:14px; color:var(--app-dim); }
.capp_sec__head .capp_go:active{ opacity:.5; }

/* ── 뉴스 리스트 (네이버 뉴스행: 제목 2줄 + 메타 + 우측 썸네일) ── */
.capp_list{ margin:0; padding:0; list-style:none; }
.capp_list li{ border-bottom:1px solid var(--app-line); }
.capp_list li:last-child{ border-bottom:0; }
.capp_list a{
    display:flex; align-items:flex-start; gap:14px;
    padding:15px 18px; text-decoration:none;
}
.capp_list a:active{ background:var(--app-soft); }
.capp_list__txt{ flex:1 1 auto; min-width:0; }
.capp_list__txt h3{
    margin:0 0 8px; font-size:15.5px; font-weight:600; line-height:1.44;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.capp_list__meta{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin:0; font-size:12px; color:var(--app-dim);
}
.capp_list__meta em{ font-style:normal; font-weight:600; color:#3d4046; }
.capp_list__meta em + span::before{ content:"·"; margin-right:6px; color:var(--app-dim); }
.capp_list__meta .capp_cmt{ color:var(--app-brand-dark); font-weight:600; }
.capp_list__img{
    flex:0 0 auto; width:96px; height:70px;
    border-radius:8px; overflow:hidden; background:var(--app-soft);
}
.capp_list__img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── AI 영상 가로 레일 ── */
.capp_sec--flush .capp_rail{
    display:flex; gap:12px;
    padding:2px 18px 4px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.capp_rail::-webkit-scrollbar{ display:none; }
.capp_vcard{
    flex:0 0 auto; width:200px;
    scroll-snap-align:start; text-decoration:none;
}
.capp_vcard:active{ transform:scale(.98); }
.capp_vcard__img{
    position:relative; aspect-ratio:16/9;
    border-radius:12px; overflow:hidden; background:var(--app-soft);
}
.capp_vcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.capp_vcard__img.is-empty{ background:linear-gradient(135deg,#3b4252,#1f2430); }
.capp_play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.55); color:#fff; font-size:13px;
    padding-left:2px;   /* 삼각형 시각 보정 */
}
.capp_vcard h3{
    margin:9px 0 4px; font-size:13.5px; font-weight:600; line-height:1.42;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.capp_vcard p{ margin:0; font-size:11.5px; color:var(--app-dim); }

/* ── 인기 프롬프트 2열 ── */
.capp_pgrid{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
    padding:0 18px;
}
.capp_pcard{ text-decoration:none; }
.capp_pcard:active{ transform:scale(.98); }
.capp_pcard__img{
    aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--app-soft);
}
.capp_pcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.capp_pcard__img.is-empty{ background:linear-gradient(135deg,#a8b4ff,#6f86d6); }
.capp_pcard h3{
    margin:7px 0 0; font-size:13px; font-weight:600; line-height:1.4;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 분류 칩 (AI프롬프트 탭 등) ── */
.capp_chips{
    display:flex; gap:8px;
    padding:2px 18px 14px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.capp_chips::-webkit-scrollbar{ display:none; }
.capp_chip{
    flex:0 0 auto;
    padding:8px 14px; border-radius:999px;
    background:var(--app-soft); border:1px solid var(--app-line);
    font-size:13px; font-weight:600; letter-spacing:-.02em; color:var(--app-sub);
    text-decoration:none; white-space:nowrap;
}
.capp_chip.is-on{ background:var(--app-brand-soft); border-color:var(--app-brand); color:var(--app-brand-dark); }
.capp_chip:active{ opacity:.6; }

/* ── AI영상 탭: 섹션 제목 (쇼츠 / 최신 영상) ── */
.capp_vhead{ padding:18px 18px 10px; }
.capp_vhead h2{
    margin:0; display:flex; align-items:center; gap:6px;
    font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--app-fg);
}
.capp_vhead h2 .fa{ color:var(--app-brand); font-size:16px; }

/* ── AI영상 탭: 상단 쇼츠(세로 9:16) 가로 슬라이드 ── */
.capp_shorts{
    display:flex; gap:11px;
    padding:2px 18px 6px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.capp_shorts::-webkit-scrollbar{ display:none; }
.capp_scard{
    flex:0 0 auto; width:132px;
    scroll-snap-align:start; text-decoration:none;
}
.capp_scard:active{ transform:scale(.98); }
.capp_scard__img{
    position:relative; aspect-ratio:9/16;
    border-radius:13px; overflow:hidden; background:var(--app-soft);
}
.capp_scard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.capp_scard__img.is-empty{ background:linear-gradient(160deg,#ff9a4d,#e5620a); }
.capp_scard__badge{
    position:absolute; left:8px; top:8px;
    display:inline-flex; align-items:center; gap:3px;
    padding:3px 7px; border-radius:6px;
    background:rgba(0,0,0,.62); color:#fff;
    font-size:10px; font-weight:700; letter-spacing:.02em;
}
.capp_scard__badge .fa{ font-size:9px; }
.capp_scard h3{
    margin:8px 2px 0; font-size:12.5px; font-weight:600; line-height:1.38;
    letter-spacing:-.02em; color:var(--app-fg);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── AI영상 탭: 2열 그리드 (레일과 카드를 공유한다) ── */
.capp_vgrid{
    display:grid; grid-template-columns:1fr 1fr; gap:18px 12px;
    padding:6px 18px 16px;
}
.capp_vgrid .capp_vcard{ width:auto; }

/* ── 탭 하단 "전체보기" ── */
.capp_more{
    display:flex; align-items:center; justify-content:center; gap:5px;
    margin:16px 14px 8px; padding:13px;
    border:1px solid var(--app-line); border-radius:12px;
    background:#fff;
    font-size:14px; font-weight:600; color:#55565f; text-decoration:none;
}
.capp_more:active{ background:var(--app-soft); }

/* ── 홈 탭 맨 아래 약관 링크 (푸터를 숨겼으므로 여기로 옮겼다) ── */
.capp_foot{
    margin:26px 0 0; padding:20px 18px;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
}
.capp_foot a{ font-size:12.5px; font-weight:600; color:var(--app-sub); text-decoration:none; }
.capp_foot p{ flex:1 0 100%; margin:6px 0 0; font-size:11.5px; color:var(--app-dim); }

/* ── 주제 탭 지연 로딩: 스켈레톤 ── */
.capp_skel{ padding:2px 0; }
.capp_skel__row{
    display:flex; align-items:flex-start; gap:14px;
    padding:15px 18px; border-bottom:1px solid var(--app-line);
}
.capp_skel__txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:10px; padding-top:3px; }
.capp_skel__txt span{ display:block; height:14px; border-radius:5px; background:var(--app-soft); }
.capp_skel__txt span:first-child{ width:94%; }
.capp_skel__txt span:last-child{ width:52%; }
.capp_skel__img{ flex:0 0 auto; width:96px; height:70px; border-radius:8px; background:var(--app-soft); }

@keyframes cappShimmer{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.capp_skel__txt span, .capp_skel__img{ animation:cappShimmer 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
    .capp_skel__txt span, .capp_skel__img{ animation:none; }
}

/* ── 빈 상태 ── */
.capp_empty{
    margin:30px 14px; padding:34px 20px;
    border:1px dashed var(--app-line); border-radius:14px;
    text-align:center; color:var(--app-dim); font-size:13.5px;
}
.capp_empty p{ margin:0; }
.capp_retry{
    margin:14px 0 0; padding:9px 17px;
    border:1px solid var(--app-line); border-radius:9px; background:#fff;
    font-family:inherit; font-size:13px; font-weight:600; color:#55565f; cursor:pointer;
}
.capp_retry:active{ background:var(--app-soft); }

/* ── 액션형 탭 인트로 (AI빌더 / 콘텐츠추가) ── */
.capp_intro{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    max-width:440px; margin:0 auto; padding:60px 30px 44px;
}
.capp_intro__icon{
    width:78px; height:78px; margin:0 0 22px;
    display:flex; align-items:center; justify-content:center;
    border-radius:22px; background:var(--app-brand-soft); color:var(--app-brand-dark);
    font-size:33px;
}
.capp_intro__title{
    margin:0 0 12px; font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--app-fg);
}
.capp_intro__desc{
    margin:0 0 28px; font-size:14.5px; line-height:1.66; color:var(--app-sub);
}
.capp_intro__btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:210px; padding:15px 26px; border-radius:14px;
    background:var(--app-brand); color:#fff; text-decoration:none;
    font-size:15.5px; font-weight:700; letter-spacing:-.02em;
    box-shadow:0 8px 20px rgba(255,122,26,.28);
}
.capp_intro__btn:active{ background:var(--app-brand-dark); transform:translateY(1px); }
.capp_intro__note{ margin:18px 0 0; font-size:12px; line-height:1.5; color:var(--app-dim); }

/* ── AI빌더 인트로 (히어로 + 6단계 미리보기) ── */
.capp_bhero{
    margin:0; padding:44px 26px 40px;
    text-align:center; color:#fff;
    background:linear-gradient(150deg,#ff9a4d 0%,#ff7a1a 55%,#e5620a 100%);
}
.capp_bhero__ic{
    width:74px; height:74px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    border-radius:22px; background:rgba(255,255,255,.2); color:#fff; font-size:31px;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.capp_bhero__title{ margin:0 0 12px; font-size:23px; font-weight:800; letter-spacing:-.03em; }
.capp_bhero__desc{ margin:0 0 26px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.92); }
.capp_bhero__cta{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 30px; border-radius:14px;
    background:#fff; color:var(--app-brand-dark); text-decoration:none;
    font-size:15.5px; font-weight:800; letter-spacing:-.02em;
    box-shadow:0 10px 24px rgba(180,70,0,.28);
}
.capp_bhero__cta:active{ transform:translateY(1px); }

.capp_bsteps{ padding:24px 18px 8px; }
.capp_bsteps__head{
    margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--app-dim);
    text-align:center;
}
.capp_bsteps__list{ margin:0; padding:0; list-style:none; counter-reset:none; }
.capp_bsteps__list li{
    position:relative;
    display:flex; align-items:center; gap:13px;
    padding:12px 4px;
}
/* 단계를 잇는 세로 연결선 */
.capp_bsteps__list li:not(:last-child)::before{
    content:""; position:absolute; left:17px; top:38px; bottom:-6px;
    width:2px; background:var(--app-line);
}
.capp_bstep__no{
    flex:0 0 auto; z-index:1;
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--app-brand-soft); color:var(--app-brand-dark);
    font-size:14px; font-weight:800;
}
.capp_bstep__ic{
    flex:0 0 auto; width:26px; text-align:center; color:var(--app-brand); font-size:16px;
}
.capp_bstep__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.capp_bstep__txt b{ font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--app-fg); }
.capp_bstep__txt em{ font-style:normal; font-size:12.5px; color:var(--app-sub); }

.capp_bnote{
    display:flex; align-items:center; gap:7px;
    margin:8px 18px 4px; padding:14px 16px;
    border-radius:12px; background:var(--app-soft);
    font-size:12.5px; line-height:1.5; color:var(--app-sub);
}
.capp_bnote .fa{ color:var(--app-brand); font-size:14px; flex:0 0 auto; }

/* ── 콘텐츠추가: 제보 폼 ── */
.capp_rintro{ padding:26px 20px 8px; text-align:center; }
.capp_rintro__ic{
    width:60px; height:60px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    border-radius:18px; background:var(--app-brand-soft); color:var(--app-brand-dark); font-size:25px;
}
.capp_rintro h2{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--app-fg); }
.capp_rintro p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--app-sub); }
.capp_rintro b{ color:var(--app-brand-dark); font-weight:700; }

.capp_rform{ padding:16px 18px 28px; max-width:520px; margin:0 auto; }
.capp_rfield{ display:block; margin:0 0 16px; }
.capp_rlabel{
    display:block; margin:0 0 7px;
    font-size:13px; font-weight:700; letter-spacing:-.02em; color:var(--app-fg);
}
.capp_rreq{ color:var(--app-brand); font-style:normal; }
.capp_ropt{ color:var(--app-dim); font-weight:500; font-style:normal; font-size:12px; }
.capp_rinput, .capp_rselect, .capp_rtext{
    width:100%; box-sizing:border-box;
    padding:13px 14px; border:1px solid var(--app-line); border-radius:12px;
    background:var(--app-soft); color:var(--app-fg);
    font-family:inherit; font-size:16px; letter-spacing:-.01em;
    -webkit-appearance:none; appearance:none;
}
.capp_rinput:focus, .capp_rselect:focus, .capp_rtext:focus{
    outline:none; border-color:var(--app-brand); background:#fff;
    box-shadow:0 0 0 3px rgba(255,122,26,.12);
}
.capp_rtext{ resize:vertical; min-height:96px; line-height:1.6; }
/* select 화살표 */
.capp_rselect{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239498a0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
    padding-right:34px;
}
.capp_rerr{
    margin:0 0 12px; padding:11px 14px;
    border-radius:10px; background:#fff2f0; border:1px solid #ffd7d0;
    font-size:13px; color:#c0392b;
}
.capp_rsubmit{
    width:100%; margin-top:4px; padding:15px;
    border:0; border-radius:14px; cursor:pointer;
    background:var(--app-brand); color:#fff;
    font-family:inherit; font-size:15.5px; font-weight:800; letter-spacing:-.02em;
    box-shadow:0 8px 20px rgba(255,122,26,.28);
}
.capp_rsubmit:active{ background:var(--app-brand-dark); transform:translateY(1px); }
.capp_rsubmit:disabled{ opacity:.6; box-shadow:none; }

/* 접수 완료 화면 */
.capp_rdone{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:70px 30px;
}
.capp_rdone__ic{
    width:72px; height:72px; margin:0 0 20px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--app-brand); color:#fff; font-size:30px;
    box-shadow:0 10px 24px rgba(255,122,26,.32);
}
.capp_rdone h2{ margin:0 0 10px; font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--app-fg); }
.capp_rdone p{ margin:0; font-size:14px; line-height:1.6; color:var(--app-sub); }

/* ── 랭킹·인기 번호 목록 ── */
.capp_rank{ margin:0; padding:6px 0; list-style:none; }
.capp_rank li{ border-bottom:1px solid var(--app-line); }
.capp_rank li:last-child{ border-bottom:0; }
.capp_rank a{
    display:flex; align-items:center; gap:14px;
    padding:15px 18px; text-decoration:none;
}
.capp_rank a:active{ background:var(--app-soft); }
.capp_rank__num{
    flex:0 0 auto; width:24px; text-align:center;
    font-size:17px; font-weight:800; font-style:italic; color:var(--app-dim);
}
.capp_rank__num.is-top{ color:var(--app-brand); }
.capp_rank__tit{
    flex:1 1 auto; min-width:0;
    font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--app-fg);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.capp_rank__hit{ flex:0 0 auto; font-size:12px; color:var(--app-dim); white-space:nowrap; }

/* ─────────────────────────────────────────────
   5. 게시판 목록 / 상세 — 터치 최적화
   ───────────────────────────────────────────── */

/* 탭 영역을 최소 44px 로 — 손가락으로 정확히 누를 수 있게 */
#bo_list .bo_tit,
#bo_v_top li a, #bo_v_bot li a,
.btn_bo_user a, .btn_bo_adm a{ min-height:44px; }

/* 목록의 촘촘한 표를 카드처럼 */
#bo_list ul li{ padding:12px 14px; }
#bo_list .bo_tit{
    display:block; font-size:14.5px; font-weight:600; line-height:1.45;
    letter-spacing:-.02em; color:var(--app-fg);
}

/* 본문이 화면을 넘지 않게 — 표/코드/영상 */
#bo_v_atc, .nd_v_body, .view_content{ font-size:15.5px; line-height:1.75; }
#bo_v_atc img, .nd_v_body img{ max-width:100%; height:auto; }
#bo_v_atc table, .nd_v_body table,
#bo_v_atc pre, .nd_v_body pre{ max-width:100%; overflow-x:auto; display:block; }
#bo_v_atc iframe, .nd_v_body iframe{ max-width:100%; }

/* 입력창 — iOS 는 16px 미만이면 포커스 시 화면을 확대해버린다 */
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], input[type=tel],
input[type=url], select, textarea{ font-size:16px; }

/* 버튼 톤 통일 */
.btn_submit, .btn_confirm .btn_submit{
    min-height:46px; border-radius:11px;
    background:var(--app-brand); border-color:var(--app-brand);
    font-size:15px; font-weight:700;
}
.btn_submit:active{ background:var(--app-brand-dark); }

/* ─────────────────────────────────────────────
   6. 앱(TWA/PWA)으로 실행 중일 때만
      — js/pwa.js 가 <html class="is-app"> 를 붙인다
   ───────────────────────────────────────────── */

/* 앱 안에서 "PC 버전으로 보기" 는 의미가 없다 (브라우저로 튕겨나간다) */
.is-app #device_change{ display:none !important; }

/* 앱은 이미 설치된 상태 — 설치 배너를 띄우지 않는다 */
.is-app #pwa_a2hs{ display:none !important; }

/* 상태바 영역만큼 헤더를 내려 붙인다 (기기 노치 대응) */
.is-app #hd{ padding-top:env(safe-area-inset-top, 0px); }

/* ─────────────────────────────────────────────
   7. 다크 모드 — 지금은 일부러 넣지 않는다

   헤더/탭바/홈만 어둡게 만들면 게시판 스킨(news, tubevideo, prompt)이 전부
   라이트 고정이라 본문만 하얗게 뜨는 어중간한 화면이 된다.
   다크를 하려면 그 스킨들까지 같이 손봐야 하므로 별도 작업으로 분리한다.
   ───────────────────────────────────────────── */
:root{ color-scheme:light; }