@charset "utf-8";
/* AI허브코리아 — 커뮤니티 화면.
   목표는 예쁜 화면이 아니라 훑기와 고르기다. 한 줄에 한 글, 판단 재료는 줄 안에. */

:root{
  --bg:#f2f3f5; --panel:#fff; --line:#dfe2e6; --line2:#eceef0;
  --ink:#1b1e21; --ink2:#5a6169; --ink3:#8b9198;
  --accent:#b45907; --accent-bg:#fdf4ea;
  --new:#c0392b; --visited:#7a7f85; --head:#22262b;
  --ok:#1a7f37; --ok-bg:#eefaf1; --warn:#a5352a; --warn-bg:#fdeeec;
}

html,body{background:var(--bg)!important;color:var(--ink);font-size:13px;line-height:1.55}
body{font-family:"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ah-in{max-width:1180px;margin:0 auto;padding:0 16px}

/* ── 기본 테마의 고정폭을 푼다 ──────────────────────────────────
   그누보드 기본 테마는 화면을 1200px 로 고정한다. 반응형으로 쓰려면
   그걸 하나하나 풀어야 한다. default.css 에서 100px 이상 고정폭을 가진
   선택자를 전부 훑어서 우리가 쓰는 것만 여기 모았다.
   ( #gnb, #aside, .hd_sch_wr 등은 우리가 아예 그리지 않아 뺐다. ) */
#hd,#wrapper,#ft{min-width:0}
#hd_pop,#hd_wrapper,#tnb .inner,#ft_wr,#ft_copy{width:auto}
#validation_check,.twopart_input,.form_01 .frm_label{max-width:100%}

#hd_h1,#skip_to_container,#hd_login_msg{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;font-size:0;line-height:0}
#hd{width:auto;margin:0;padding:0;background:none;border:0}
#hd:after,#hd_wrapper:after{content:none}
hr{display:none}

/* ── 상단 : 검색이 주인공 ── */
.ah-top{background:var(--head)}
.ah-top .ah-in{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.ah-logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em;white-space:nowrap}
.ah-logo b{color:#eda94b}
.ah-sch{flex:1;max-width:560px;border:0;padding:0;margin:0;min-width:0}
.ah-sch form{display:flex}
.ah-sch input[type=text]{flex:1;min-width:0;padding:9px 13px;border:1px solid #3d444b;background:#2d3238;
  color:#e8ebee;border-radius:2px 0 0 2px;font-size:13.5px;font-family:inherit}
.ah-sch input[type=text]::placeholder{color:#7d858d}
.ah-sch button{padding:9px 18px;border:0;background:var(--accent);color:#fff;border-radius:0 2px 2px 0;
  font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.ah-acc{margin:0 0 0 auto;padding:0;list-style:none;display:flex;align-items:center;gap:11px;white-space:nowrap}
.ah-acc a{font-size:12.5px;color:#b6bdc4}
.ah-acc a:hover{color:#fff}
.ah-acc .ah-cta{padding:6px 13px;background:var(--accent);color:#fff;border-radius:2px;font-weight:600}
.ah-acc .ah-cta:hover{background:#a04f06;color:#fff}

/* ── 게시판 줄 ( 형식으로 자른다 ) ── */
.ah-nav{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.ah-nav .ah-in{display:flex;gap:2px;overflow-x:auto}
.ah-nav a{padding:11px 15px;font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap;border-bottom:2px solid transparent}
.ah-nav a:hover{color:var(--ink)}
.ah-nav a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}

/* ── 주제 줄 ( 주제로 자른다 ) ── */
.ah-topics{background:var(--panel);border-bottom:1px solid var(--line)}
.ah-topics .ah-in{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-top:9px;padding-bottom:9px}
.ah-topics .lb{font-size:11.5px;color:var(--ink3);white-space:nowrap;margin-right:2px}
.ah-topics a{padding:3px 11px;border:1px solid var(--line);border-radius:13px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.ah-topics a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ah-topics a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ah-topics a em{font-style:normal;opacity:.6;font-size:11px;margin-left:3px}

/* ── 본문 틀 ──────────────────────────────────────────────────
   격자 칸은 반드시 minmax(0, 1fr) 로 잡는다.
   그냥 1fr 은 minmax(auto, 1fr) 이라서, 칸 안의 내용이 줄바꿈되지 않으면
   칸이 담을 곳보다 넓어진다. 실제로 도구 카드가 오른쪽 사이드바 밑으로
   밀려 들어가는 일이 있었다(칸 합계 1110px, 담을 곳 832px).
   1fr 이 보이면 이 사고를 떠올릴 것. */
#wrapper{width:auto;max-width:1180px;margin:0 auto;padding:14px 16px 44px;background:none;border:0}
#container_wr{width:auto;margin:0;padding:0;background:none;border:0}
#container{float:none;width:auto;min-height:0;margin:0;padding:0;background:none;border:0}
#container:after{content:'';display:block;clear:both}
#container_title{font-size:17px;font-weight:700;margin:0 0 12px;padding:0;border:0;line-height:1.4}
#aside{display:none}

.ah-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ah-feed{min-width:0}
.ah-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ah-panel{background:var(--panel);border:1px solid var(--line);border-radius:2px}
.ah-ph{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line)}
.ah-ph h2{margin:0;font-size:13.5px;font-weight:700}

/* ── 이번 주 많이 본 글 ── */
.ah-best{margin-bottom:12px}
.ah-best ol{margin:0;padding:4px 0;list-style:none}
.ah-best li{display:flex;align-items:center;gap:9px;padding:5px 13px;font-size:13px}
.ah-best li:hover{background:var(--accent-bg)}
.ah-best .rank{width:14px;text-align:center;font-weight:700;color:var(--ink3);font-size:12px;flex:none}
.ah-best li:nth-child(-n+3) .rank{color:var(--accent)}
.ah-best .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-best .c{color:var(--accent);font-weight:700;font-size:12px;flex:none}

/* ── 정렬 ── */
.ah-tabs{display:flex;align-items:center;gap:3px;padding:8px 13px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ah-tabs .tab{padding:4px 11px;font-size:12.5px;color:var(--ink2);border-radius:2px}
.ah-tabs .tab:hover{background:var(--bg)}
.ah-tabs .tab.on{background:var(--accent);color:#fff;font-weight:600}
.ah-tabs .count{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}

/* ── 목록 : 한 줄 = 한 글 ──────────────────────────────────────
   칸 너비는 col 로 잡는다. td 에 width 를 주면 브라우저에 따라 무시되고
   모든 칸이 똑같이 나뉘어 제목이 엉뚱하게 잘린다. col 은 그런 일이 없다. */
.ah-listwrap{overflow-x:auto}
table.ah-list{width:100%;border-collapse:collapse;table-layout:fixed}
.ah-list col.k-bo{width:80px}
.ah-list col.k-tit{width:auto}
.ah-list col.k-writer{width:96px}
.ah-list col.k-num{width:52px}
table.ah-list td{padding:6px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.ah-list tr:hover td{background:var(--accent-bg)}
.ah-list .c-bo{padding-left:13px}
.ah-list .c-writer{color:var(--ink2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-list .c-num{text-align:right;color:var(--ink3);font-size:12px;font-variant-numeric:tabular-nums}
.ah-list .c-num:last-child{padding-right:13px}
.ah-list .bo{display:inline-block;max-width:100%;padding:1px 6px;font-size:11.5px;border:1px solid var(--line);
  border-radius:2px;color:var(--ink2);background:var(--bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-list .bo:hover{border-color:var(--accent);color:var(--accent)}
.ah-list .bo.hot{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ah-list .tit{display:flex;align-items:center;gap:5px;min-width:0}
.ah-list .tit .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;min-width:0}
.ah-list .tit .s:hover{text-decoration:underline}
.ah-list .tit .cm{color:var(--accent);font-weight:700;font-size:12px;flex:none}
.ah-list .tit .n{color:var(--new);font-size:10px;font-weight:700;flex:none}
.ah-list .tit .lk{font-size:11.5px;flex:none}
.ah-list .tit .tg{color:var(--ink3);font-size:11.5px;flex:none}
.ah-list .tit .tg:hover{color:var(--accent)}

.ah-pg{display:flex;justify-content:center;gap:3px;padding:12px;flex-wrap:wrap}
.ah-pg a{min-width:26px;text-align:center;padding:4px 8px;border:1px solid var(--line);border-radius:2px;font-size:12.5px;color:var(--ink2)}
.ah-pg a:hover{border-color:var(--accent);color:var(--accent)}
.ah-pg a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.ah-empty{padding:44px 16px;text-align:center}
.ah-empty p{margin:0 0 14px;color:var(--ink2);font-size:13.5px}
.ah-btn{display:inline-block;padding:9px 18px;background:var(--accent);color:#fff;border-radius:2px;font-weight:700;font-size:13.5px}
.ah-btn:hover{background:#a04f06;color:#fff}
.ah-btn.sm{display:block;text-align:center;margin-top:10px;padding:7px;font-size:12.5px;font-weight:600}

/* ── 이럴 땐 이 AI ──────────────────────────────────────────────
   카테고리는 이미 뭘 찾는지 아는 사람에게만 쓸모가 있다.
   '영상/음성'을 누르는 사람은 이미 영상 도구를 찾고 있다는 뜻이다.
   '유튜브 썸네일 만들기'는 모르는 사람이 검색하는 말이다. */
.ah-sit{margin-bottom:12px}
.ah-ph .note{font-size:12px;color:var(--ink3);margin-left:auto;white-space:nowrap}
.ah-ph .note b{color:var(--accent)}
.ah-chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px 13px}
.ah-chips a{padding:5px 13px;border:1px solid var(--line);border-radius:15px;font-size:13px;color:var(--ink2);white-space:nowrap}
.ah-chips a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ah-chips a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ah-chips a em{font-style:normal;opacity:.65;font-size:11.5px;margin-left:5px}
.ah-sitdesc{margin:0;padding:0 13px 13px;font-size:12.5px;color:var(--ink2);line-height:1.7}
.ah-sitdesc b{color:var(--accent)}

/* ── 도구 카드 ── */
.ah-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.tcard{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:14px;
       display:flex;flex-direction:column;gap:9px}
.tcard:hover{border-color:var(--accent)}
.tcard .th{display:flex;align-items:center;gap:9px;min-width:0}
.tcard .ic{flex:none;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;
           justify-content:center;font-weight:700;font-size:15px;color:#fff;
           background:hsl(var(--h), 42%, 44%)}
.tcard .nm{flex:1;min-width:0;font-weight:700;font-size:14px;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.tcard .nm a:hover{color:var(--accent)}
.tcard .rg{font-style:normal;font-weight:500;font-size:11px;color:var(--ink3);margin-left:6px}
.tcard .pr{flex:none;font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--line);
           color:var(--ink2);white-space:nowrap}
.tcard .pr.p-free{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.tcard .pr.p-freemium{border-color:#2f6fb3;color:#2f6fb3;background:#eef4fb}
.tcard .pr.p-paid{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.tcard .sum{margin:0;flex:1;min-width:0;font-size:12.5px;color:var(--ink2);line-height:1.7;
            overflow-wrap:anywhere}

/* 상업적 이용 조건.
   이미지·영상·음악 도구에서 실무자가 가장 먼저 묻는 것인데
   어느 디렉터리에도 안 나온다. 카드에서 바로 보이게 둔다. */
.tcard .com{margin:0;min-width:0;font-size:11.5px;padding:5px 9px;border-radius:3px;line-height:1.5}
.tcard .com.c-free_ok{color:var(--ok);background:var(--ok-bg)}
.tcard .com.c-paid_only{color:#8a4406;background:var(--accent-bg)}
.tcard .com.c-unclear{color:var(--warn);background:var(--warn-bg)}

.tcard .tf{display:flex;align-items:center;gap:12px;min-width:0;padding-top:10px;
           border-top:1px solid var(--line2);font-size:12.5px}
.tcard .go{color:var(--accent);font-weight:600;white-space:nowrap}
.tcard .ext{margin-left:auto;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .ext:hover{color:var(--ink)}
.tcard .ext:after{content:' \2197';font-size:11px}

/* ── 오른쪽 ── */
.ah-join{padding:14px 15px}
.ah-join h3{margin:0 0 5px;font-size:14.5px}
.ah-join p{margin:0 0 11px;font-size:12.5px;color:var(--ink2);line-height:1.6}
.ah-join b{color:var(--accent)}
.ah-join .ah-btn{display:block;text-align:center;padding:9px}
.ah-join .sub{display:block;text-align:center;margin-top:7px;font-size:12px;color:var(--ink3)}
.ah-me{padding:12px 14px}
.ah-me .id{font-weight:700;font-size:13.5px}
.ah-me .lv{color:var(--accent);font-size:11.5px;font-weight:600}
.ah-me dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 0;margin:9px 0 0;font-size:12.5px}
.ah-me dt{color:var(--ink2)}
.ah-me dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ah-me .bar{height:4px;background:var(--bg);border-radius:2px;margin-top:9px;overflow:hidden}
.ah-me .bar i{display:block;height:100%;background:var(--accent)}
.ah-me .hint{margin:5px 0 0;font-size:11.5px;color:var(--ink3)}
.ah-rooms ul{margin:0;padding:4px 0;list-style:none}
.ah-rooms li a{display:flex;align-items:center;gap:8px;padding:5px 13px;font-size:12.5px;color:var(--ink2)}
.ah-rooms li a:hover{background:var(--accent-bg);color:var(--accent)}
.ah-rooms li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-rooms li em{font-style:normal;color:var(--accent);font-weight:700;font-size:11.5px;flex:none}
.ah-ad{display:flex;align-items:center;justify-content:center;height:186px;border:1px dashed #b9bec4;
  background:#e9ebed;color:#98a0a8;font-size:11px;border-radius:2px}
.ah-ad.tall{height:420px}

/* ── 하단 ──────────────────────────────────────────────────────
   칸 수를 auto-fit 으로 잡는다. 하단 칸을 하나 빼거나 더해도
   CSS 를 고칠 일이 없다. (현황 칸을 잠시 내려 둔 상태다 — tail.php 참고) */
#ft{width:auto;margin:0;padding:0;background:var(--panel);border-top:1px solid var(--line);color:var(--ink2)}
.ah-ft{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
       padding-top:22px;padding-bottom:22px}
.ah-ft h4{margin:0 0 8px;font-size:12px;color:var(--ink3);font-weight:600}
.ah-ft ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.ah-ft ul a{color:var(--ink2)}
.ah-ft ul a:hover{color:var(--accent)}
.ah-ft .none{color:var(--ink3);font-size:12px}
.ah-nums{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px}
.ah-nums b{display:block;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ah-tagall{display:flex;flex-wrap:wrap;gap:5px}
.ah-tagall a{padding:2px 8px;border:1px solid var(--line);border-radius:11px;font-size:11.5px;color:var(--ink2)}
.ah-tagall a:hover{border-color:var(--accent);color:var(--accent)}
#ft_copy{padding-top:12px;padding-bottom:20px;border-top:1px solid var(--line2);font-size:12px;color:var(--ink3);background:none}
#top_btn{position:fixed;right:18px;bottom:18px;width:38px;height:38px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);border-radius:2px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
#top_btn.on{opacity:1;pointer-events:auto}

/* ── 게시판 안쪽 화면도 같은 결로 ── */
#bo_list,#bo_v,#bo_gall,.bo_v_nb{background:var(--panel);border:1px solid var(--line);
  border-radius:2px;padding:14px;margin-bottom:14px}
#bo_v_con{min-height:120px;line-height:1.8;font-size:14.5px;overflow-x:auto}
#bo_v_con table{border-collapse:collapse;max-width:100%}
#bo_v_con img{max-width:100%;height:auto}

/* 글쓰기 폼.
   목록은 넓을수록 좋지만 글 쓰는 칸은 아니다. 한 줄이 너무 길면 눈이 지친다.
   그렇다고 480px 로 쪼그라들어서도 안 된다. 그 중간을 잡는다. */
#bo_w{background:var(--panel);border:1px solid var(--line);border-radius:2px;
      padding:20px 22px;margin:0 auto 14px;max-width:900px;width:auto}
#bo_w input[type=text],#bo_w input[type=password],#bo_w textarea,#bo_w select{font-family:inherit;font-size:14px}
#bo_w textarea#wr_content{min-height:380px;line-height:1.7}

@media (max-width:960px){
  .ah-main{grid-template-columns:minmax(0,1fr)}
  .ah-side{order:-1}
  .ah-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah-ft{gap:20px}
  #bo_w{padding:16px}
}
@media (max-width:680px){
  .ah-top .ah-in{flex-wrap:wrap;gap:10px}
  .ah-sch{order:3;flex-basis:100%;max-width:none}
  .ah-list col.k-writer,.ah-list col.k-num{width:0}
  .ah-list .c-writer,.ah-list .c-num{display:none}
  .ah-list col.k-bo{width:62px}
  .ah-cards{grid-template-columns:minmax(0,1fr)}
  .ah-ph .note{display:none}
  #bo_w textarea#wr_content{min-height:260px}
}