@charset "utf-8";

/* ============================================================================
   커뮤니티 (コミュニティ) 전용 CSS — 2026-09-17 확정 디자인
     1) 목록  : main .community_area          (/community/list/{pageNo})
     2) 상세  : main .community_view          (/community/detail/{postNo})
     3) 본문 부품 : .a-body 이하              (관리자가 에디터로 쓰는 영역)

   이 파일은 커뮤니티 두 화면에서만 불린다 — 각 템플릿의 layout:fragment="css" 에서
   로드하므로 다른 화면에는 실리지 않는다. 공통 컴포넌트를 여기에 넣지 않는다.

   ★ 공용 파일(sub.css · common.css)에는 커뮤니티 선택자를 넣지 않는다. 커뮤니티가 필요한
     모양은 전부 이 파일에서 끝낸다 — 공용 파일에 화면별 예외가 쌓이면 기획전·상품리스트를
     고칠 때 커뮤니티가 같이 바뀌고, 그 반대도 마찬가지다.
     예외는 추천 상품 카드 하나다. .goods_group 에 product_wrap 클래스를 함께 걸어
     sub.css 의 공용 카드를 그대로 쓴다(카드 모양이 메인과 어긋나지 않게 하려는 것).

   색은 전부 common.css 의 토큰이다 — 확정 시안이 쓴 값과 1:1로 맞는다.
   글자 크기·radius 중 토큰에 없는 값(24 · 32px, radius 14px)만 리터럴로 쓴다.

   분기는 1024 / 768 두 곳이다. 769~1199px 의 폭 문제는 sub.css 가 main 을 유동폭으로
   풀어 해결했으므로 여기서 다시 다루지 않는다.
   ========================================================================= */


/* ===========================================================================
   0) 공통 — 배지
   한 벌로 카테고리와 진행상태를 모두 표현한다. 모양이 같아야 나란히 놓았을 때 정돈된다.
   ======================================================================== */

.community_badge {display:inline-flex; align-items:center; height:24px; padding:0 12px; border-radius:var(--radius-4xl); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); white-space:nowrap;}
.community_badge.cate_event {background:var(--color-surface-secondary); color:var(--color-brand-primary);}
.community_badge.cate_guide {background:var(--color-surface-mint); color:var(--color-text-strong);}
/* 開催予定 — 開催中 과 같은 색의 테두리만. 채움(開催中) · 회색(終了)과 한눈에 갈리고, 높이는 inset 이라 그대로다 */
.community_badge.state_plan {background:var(--color-white); color:var(--color-brand-primary); box-shadow:inset 0 0 0 1px var(--color-brand-primary);}
.community_badge.state_ing {background:var(--color-brand-primary); color:var(--color-white);}
.community_badge.state_end {background:var(--color-surface-muted); color:var(--color-text-subtle);}

.community_badges {display:flex; align-items:center; gap:6px; flex-wrap:wrap;}


/* ===========================================================================
   1) 목록 — main .community_area
   ======================================================================== */

main .community_area {padding:40px 0 60px; display:flex; flex-direction:column;}

/* 1-1. 머리 — 제목 + 카테고리 필터 한 줄 -----------------------------------
   제목과 필터를 같은 줄에 두고 아래에 가는 선을 깐다. 필터를 제목 아래 별도 블록으로
   내리면 픽업 배너까지 밀려 첫 화면에 카드가 한 장도 안 들어온다. */
main .community_area .community_head {display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:20px; border-bottom:1px solid var(--color-line-light);}
main .community_area .community_head h4 {font-size:var(--font-size-3lg); font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:140%;}

/* 알약형 필터. 메인·상품리스트의 .product_wrap .option 과 모양이 같지만 값을 여기에
   한 벌 더 둔다 — 공용 파일이 화면별 예외로 불어나는 것보다 이쪽이 되돌리기 쉽다. */
main .community_area .option {display:flex; gap:8px;}
main .community_area .option > * {display:inline-flex; align-items:center; height:40px; padding:0 20px; border-radius:100px; background:var(--color-surface-muted); color:var(--color-text-subtle); font-size:var(--font-size-md); font-weight:var(--font-weight-regular); white-space:nowrap; cursor:pointer;}
main .community_area .option > *.on {background:var(--color-surface-secondary); color:var(--color-brand-primary); font-weight:var(--font-weight-bold);}

/* 1-2. 픽업 1건 — 배너 + 그 아래 캡션 --------------------------------------
   배너만 걸던 것을 캡션까지 묶은 카드로 바꿨다. 이미지 한 장으로는 그 글이 무엇인지
   알 수 없어 운영자가 배너에 문구를 넣어야 했고, 그 문구는 번역도 검색도 되지 않았다. */
main .community_area .community_pickup {margin-top:28px; display:flex; flex-direction:column; border:1px solid var(--color-border-accent); border-radius:var(--radius-4xl); overflow:hidden; background:var(--color-surface-primary);}
/* 메인 이미지 영역 — 상세 헤드(2-1)와 같은 규칙이다(2026-10-06 QA).
   가로는 영역 폭에 고정, 세로는 범위 안에서 이미지 비율대로 늘고 준다.
     PC  1200 x 310 ~ 600  → 높이 = 폭의 25.833% ~ 50%
     MO   324 x 200 ~ 324  → 높이 = 폭의 61.728% ~ 100%
   범위를 벗어난 이미지는 영역 안에 비율을 유지한 채 줄여 넣고(contain) 남는 곳은 흰색이다 — 자르지 않는다.
   폭 기준 높이는 cqw(영역 자신의 폭)로 잡는다. 컨테이너 쿼리를 모르는 브라우저는 min/max 를 버리고 본래 비율로 그린다. */
main .community_area .community_pickup .baner_area {background:var(--color-white); overflow:hidden; container-type:inline-size;}
main .community_area .community_pickup .baner_area img {width:100%; height:auto; min-height:25.833cqw; max-height:50cqw; object-fit:contain; display:block;}
/* PC · 모바일 배너 전환.
   ★ 선택자에 img 를 반드시 넣는다. `.web` / `.mo` 만으로는 명시도가 (0,3,1) 이라
     바로 위 `.baner_area img` (0,3,2) 의 display:block 에 져서 두 장이 모두 렌더된다.
     두 장이 쌓이면 620px 이 되어 310px 영역을 넘치고, 아래 캡션(제목·버튼) 위를 덮는다 —
     배너가 캡션까지 반복되는 것처럼 보인다. 실제로 그렇게 나왔다. */
main .community_area .community_pickup .baner_area img.web {display:block;}
main .community_area .community_pickup .baner_area img.mo {display:none;}
main .community_area .community_pickup .cap {display:flex; align-items:center; justify-content:space-between; gap:32px; padding:20px 28px;}
main .community_area .community_pickup .cap .txt {min-width:0; display:flex; flex-direction:column; gap:10px;}
main .community_area .community_pickup .cap .subject {font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:140%;}
/* 요약 — 상단 픽업에만(카드 그리드에는 없다). 제목과 기간 사이, 2줄 넘으면 말줄임 */
main .community_area .community_pickup .cap .summary {font-size:var(--font-size-md); color:var(--color-text-default); line-height:150%; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
main .community_area .community_pickup .cap .period {font-size:var(--font-size-sm); color:var(--color-text-subtle); line-height:140%;}
main .community_area .community_pickup .cap .btn_pickup {display:flex; align-items:center; justify-content:center; height:40px; padding:0 28px; border-radius:var(--radius-pill); background:var(--color-brand-primary); color:var(--color-white); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); white-space:nowrap;}

/* 1-3. 카드 그리드 3열 → 2열(≤1024) → 1열(≤768) -------------------------
   grid 로 두면 카드 폭을 계산하지 않아도 되고, 마지막 줄이 비어도 앞 카드가 늘어나지 않는다. */
main .community_area .community_list {margin-top:32px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px;}
main .community_area .community_list .item {display:flex; flex-direction:column; border:1px solid var(--color-line-light); border-radius:var(--radius-3xl); overflow:hidden;}
main .community_area .community_list .item:hover {border-color:var(--color-border-accent);}
/* 썸네일 영역은 324:200 비율로 고정한다 — 카드 높이를 글마다 같게 하려는 것이다(2026-10-06 QA).
   비율이 다른 이미지(썸네일 대신 쓴 메인 이미지 MO 는 324x200~324)는 영역 안에 비율을 유지한 채 줄여 넣고(contain),
   남는 곳은 흰색이다 — 자르지 않는다.
   ★ overflow:hidden · min-height:0 을 반드시 둔다. aspect-ratio 상자는 최소 높이가 auto 라 안의 이미지가 더 길면
     그만큼 늘어난다 — 10/6 검증 서버에서 800x1000 썸네일 카드가 321x401 로 길어졌다(다른 카드는 321x198).
     overflow 가 visible 이 아니면 최소 높이가 0 이 되어 비율이 지켜지고, img 의 height:100% 도 그 높이를 기준으로 잡힌다 */
main .community_area .community_list .item .thumb {position:relative; aspect-ratio:324 / 200; min-height:0; overflow:hidden; background:var(--color-white);}
main .community_area .community_list .item .thumb img {width:100%; height:100%; object-fit:contain; display:block;}
/* 썸네일도 메인 이미지 MO 도 없는 카드 — 같은 324x200 영역에 사이트 로고(324x96)를 가운데 맞춰 넣는다.
   로고는 영역 폭의 44% 로 줄여 여백 안에 두고(3열 · 1열 모두 같은 비율), 채우지 않는다(contain).
   명시도 (0,6,2) 로 바로 위 .thumb img 의 100% · contain 을 이긴다.
   바탕은 예전처럼 회색으로 둔다 — 흰 카드에 흰 바탕이면 이미지 칸이 있다는 것이 보이지 않는다.
   ★ 주석 안에 규칙을 끼워 넣지 않는다 — 10/6 에 그렇게 해서 주석 뒷부분이 맨 텍스트로 남아 이 규칙이 통째로 무시됐다(로고가 왼쪽 위로 쏠렸다) */
main .community_area .community_list .item .thumb.no_image {display:flex; align-items:center; justify-content:center; background:var(--color-surface-muted);}
main .community_area .community_list .item .thumb.no_image img.logo {width:44%; height:auto; object-fit:contain;}
main .community_area .community_list .item .thumb .state {position:absolute; top:12px; left:12px;}
main .community_area .community_list .item .info {display:flex; flex-direction:column; gap:8px; padding:16px 20px 20px;}
main .community_area .community_list .item .info .subject {font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:140%; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
main .community_area .community_list .item .info .period {font-size:var(--font-size-sm); color:var(--color-text-subtle);}
/* 종료(.ended) · 개시 전(.planned) 글은 흐리게 — 목록에서 진행중 건과 한눈에 구분된다(개시 전은 2026-10-05).
   검색 유입이 있으므로 별도 탭으로 격리하지 않고 같은 목록에 둔다. 상태 배지는 .thumb 안이라 함께 흐려진다. */
main .community_area .community_list .item.ended .thumb,
main .community_area .community_list .item.planned .thumb {opacity:.45;}
main .community_area .community_list .item.ended .info .subject,
main .community_area .community_list .item.planned .info .subject {color:var(--color-text-subtle);}
main .community_area .community_list .item.ended .info .period,
main .community_area .community_list .item.planned .info .period {color:var(--color-text-disabled);}

/* 1-4. 빈 목록 · 페이징 --------------------------------------------------- */
main .community_area .none_area {margin-top:32px;}
/* 페이지 번호는 원형. paginationNewSvc 가 만드는 마크업 위에 모양만 덮는다 */
main .community_area .pg_num_area {margin-top:40px;}


/* ===========================================================================
   2) 상세 — main .community_view

   읽는 영역은 720px 가운데 한 단이다. 상품 그리드만 콘텐츠 폭을 그대로 쓴다.
   ======================================================================== */

main .community_view {padding:40px 0 80px; display:flex; flex-direction:column;}

/* 2-1. 헤드 — 이미지 위에 흰 패널이 겹치는 매거진형 -------------------------
   패널을 이미지 위로 끌어올려 제목이 이미지와 한 덩어리로 읽히게 한다.
   헤드 이미지가 없는 글(.no_image)은 겹칠 대상이 없으므로 끌어올리지 않는다 —
   음수 margin 만 남으면 패널이 위 화면 타이틀을 파고든다.
   이미지는 메인 이미지다. 가로는 폭에 고정, 세로는 범위 안에서 이미지 비율대로 그린다(2026-10-06 QA) —
     PC 1200 x 310~600(폭의 25.833~50%) · MO 324 x 200~324(폭의 61.728~100%).
   범위 밖 이미지는 비율을 유지해 줄여 넣고(contain) 남는 곳은 흰색 — 자르지 않는다. 일람 상단 대형 노출(1-2)과 같은 규칙이다.
   ★ 패널이 이미지 아래쪽에 겹친다(PC 20px · ≤1024 16px · MO 12px, 화면 px). 1200 기준으로 환산하면 769px 폭에서 최대 약 27px,
     MO 는 324 기준 약 12px 이다 — 관리자 폼 · 작성 가이드 · 운영 매뉴얼은 이를 올림해 「下端 30px(PC) / 15px(MO)」를 세이프 에어리어로 안내한다.
     겹침 값을 바꾸면 그 안내도 함께 고친다. */
main .community_view .view_hero {display:flex; flex-direction:column;}
main .community_view .view_hero .hero_img {background:var(--color-white); overflow:hidden; container-type:inline-size;}
main .community_view .view_hero .hero_img img {width:100%; height:auto; min-height:25.833cqw; max-height:50cqw; object-fit:contain; display:block;}
main .community_view .view_hero .hero_panel {width:min(800px, calc(100% - 128px)); margin:-20px auto 0; padding:48px; border-radius:var(--radius-4xl); background:var(--color-surface-primary); box-shadow:0 8px 32px rgba(69, 69, 69, .08); display:flex; flex-direction:column; gap:16px;}
main .community_view .view_hero .hero_panel h4 {font-size:32px; font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:150%;}
main .community_view .view_hero .hero_panel .meta {display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:var(--font-size-sm-alt); color:var(--color-text-subtle);}
main .community_view .view_hero .hero_panel .meta .period {font-weight:var(--font-weight-medium); color:var(--color-text-default);}
/* 이미지가 없어도 패널 모양(폭 · 여백 · 라운드 · 그림자)은 그대로 둔다. 겹칠 이미지가 없으니 끌어올림만 푼다.
   명시도 (0,4,1) 이라 아래 1024 · 768 블록의 음수 margin (0,3,1) 보다 항상 이긴다. */
main .community_view .view_hero.no_image .hero_panel {margin:0 auto;}
/* 헤드의 PC · MO 전환. .hero_img img (0,3,2) 를 이기도록 선택자에 img 를 넣는다 */
main .community_view .view_hero .hero_img img.mo {display:none;}

/* 2-2. 읽는 한 단 -------------------------------------------------------- */
main .community_view .view_col {width:100%; max-width:720px; margin:64px auto 0; display:flex; flex-direction:column;}

/* 2-3. 목차 — community.js 가 본문의 h2 를 훑어 만든다.
   h2 가 2개 미만이면 스크립트가 블록을 지운다(목차가 한 줄뿐이면 방해만 된다).
   ★ 그레이톤이다. 아래 조건 박스(.facts · .benefit_box)가 물색이라 같은 색이면
     "읽을 것"과 "확인할 것"이 구분되지 않는다. */
main .community_view .view_toc {padding:22px 26px; border-radius:var(--radius-3xl); background:var(--color-surface-muted); display:flex; flex-direction:column; gap:12px;}
main .community_view .view_toc .tit {font-size:15px; font-weight:var(--font-weight-bold); color:var(--color-text-strong); letter-spacing:.04em;}
main .community_view .view_toc ol {display:flex; flex-direction:column; gap:8px;}
main .community_view .view_toc li {list-style:none; font-size:var(--font-size-sm); line-height:150%;}
main .community_view .view_toc a {display:inline-block; color:var(--color-text-default);}
main .community_view .view_toc a:hover {color:var(--color-brand-primary); text-decoration:underline;}
main .community_view .view_toc a .no {margin-right:10px; color:var(--color-text-subtle);}

/* 2-4. 목차 → 본문 간격. 상세에는 리드(要約)를 내지 않는다(2026-10-05 — 요약은 일람 상단 픽업에만).
   예전에는 리드가 이 간격을 잡았다. 목차가 지워진 글(h2 2개 미만)은 본문이 맨 위라 .view_col 의 여백만 쓴다 */
main .community_view .view_toc + .a-body {margin-top:40px;}

/* 2-5. 특전 요약 — 정형 필드. 본문 HTML 과 분리한다.
   포인트 지급 조건을 본문에 자유롭게 쓰게 두면 표기가 건마다 달라져 CS 문의가 된다.
   카테고리가 キャンペーン(EV)일 때만 렌더한다(CommunityPostDto.showBenefit). */
main .community_view .benefit_box {margin-top:40px; padding:28px 32px; border:1px solid var(--color-border-accent); border-radius:var(--radius-4xl); background:var(--color-surface-secondary); display:flex; flex-direction:column; gap:16px;}
main .community_view .benefit_box .tit {font-size:var(--font-size-2md); font-weight:var(--font-weight-bold); color:var(--color-brand-secondary); letter-spacing:.04em;}
main .community_view .benefit_box dl {display:flex; gap:16px;}
main .community_view .benefit_box dt {flex:0 0 96px; font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:170%;}
/* 입력한 줄바꿈을 그대로 그린다(2026-10-06). pre-line 은 줄바꿈만 살리고 연속 공백은 하나로 접는다 */
main .community_view .benefit_box dd {min-width:0; font-size:15px; color:var(--color-text-default); line-height:170%; white-space:pre-line;}
/* 「ご注意」— ※ 로 시작하는 줄마다 한 항목(CommunityPostDto.getBenefitNoticeItems).
   ※ 는 항목을 나누는 표시라 화면에 내지 않고 「・」 불릿으로 그린다(아래 li.mark). ※ 없이 시작한 첫 항목(.mark 없음)은 불릿 없음 */
/* 목록을 담은 dd 는 pre-line 을 끈다 — 끄지 않으면 템플릿의 태그 사이 줄바꿈 · 들여쓰기가 빈 줄로 그려진다. 줄바꿈은 li 가 살린다 */
main .community_view .benefit_box dd.has_list {white-space:normal;}
main .community_view .benefit_box .notice_list {margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
/* ★ 글자 크기 · 줄간격 · 색 · 글꼴은 dd 를 그대로 물려받게 inherit 로 못박는다. default.css 가 ul · li 에 font-size:16px · line-height:140% 를
     직접 걸어서, 그대로 두면 「ご注意」 항목만 16px · 검정 · 좁은 줄간격으로 나왔다(10/6 검증 서버 No.18 — 다른 항목은 dd 의 15px · 회색 · 170%).
     inherit 라서 1024 · 768 블록이 dd 크기를 바꾸면 항목도 따라간다 */
main .community_view .benefit_box .notice_list,
main .community_view .benefit_box .notice_list li {font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit;}
main .community_view .benefit_box .notice_list li {list-style:none; white-space:pre-line;}
/* 불릿 — 본문 부품 .notes(3-3)와 같은 「・」 · 브랜드색. ※ 는 템플릿이 떼어 낸다.
   불릿을 왼쪽 여백에 매달아 항목 안에서 줄이 바뀌어도 글이 불릿 뒤에 맞춰진다 */
main .community_view .benefit_box .notice_list li.mark {position:relative; padding-left:18px;}
main .community_view .benefit_box .notice_list li.mark:before {content:"・"; position:absolute; left:0; top:0; color:var(--color-brand-primary);}

/* 2-6. CTA — 알약형. 지정한 링크가 있을 때만 렌더된다 */
main .community_view .view_cta {margin-top:56px; display:flex; justify-content:center;}
main .community_view .view_cta a {display:flex; align-items:center; justify-content:center; width:400px; max-width:100%; height:56px; border-radius:var(--radius-pill); background:var(--color-brand-primary); color:var(--color-white); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); letter-spacing:.04em;}

/* 2-7. 추천 상품 — 한국/일본 두 덩어리 -------------------------------------
   카드와 화살표는 sub.css 의 .product_wrap 을 그대로 쓴다(그래서 .goods_group 에 그 클래스를
   함께 건다). 덕분에 모바일에서 화살표가 사라지는 규칙도 그대로 적용된다 —
   모바일은 화살표 없이 좌우로 넘기고, PC 만 화살표로 넘긴다. */
main .community_view .community_goods {margin-top:80px; display:flex; flex-direction:column; gap:48px;}
main .community_view .community_goods .goods_group {display:flex; flex-direction:column; gap:24px;}
/* 제목 — 앞에 4px 파란 바, 아래 2px 파란 밑줄. 국가가 바뀌는 지점을 눈에 띄게 한다 */
main .community_view .community_goods .goods_group > .tit {display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:2px solid var(--color-brand-primary);}
main .community_view .community_goods .goods_group > .tit:before {content:""; flex:0 0 4px; width:4px; height:20px; border-radius:var(--radius-xs); background:var(--color-brand-primary);}
main .community_view .community_goods .goods_group > .tit h5 {min-width:0; font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); color:var(--color-text-strong);}
/* .list 는 sub.css 에서 flex 컨테이너다. 그 안에 swiper 하나만 두면 폭이 내용 기준으로 잡힐 수
   있는데, Swiper 는 컨테이너 폭으로 슬라이드 폭을 계산하므로 카드 폭이 어긋난다. 폭을 못박는다. */
main .community_view .community_goods .goods_group .list > .swiper {width:100%; min-width:0;}

/* 2-8. 이전 · 다음 — 2열 카드 --------------------------------------------- */
main .community_view .view_nav {margin-top:80px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px;}
main .community_view .view_nav > a {display:flex; flex-direction:column; gap:10px; padding:24px 28px; border:1px solid var(--color-line-light); border-radius:var(--radius-3xl);}
main .community_view .view_nav > a:hover {border-color:var(--color-border-accent);}
main .community_view .view_nav > a.next {text-align:right;}
/* 칸을 고정한다 — 前の記事 는 왼쪽, 次の記事 는 오른쪽. 고정하지 않으면 한쪽만 있을 때
   그 한 건이 첫 칸(왼쪽)으로 들어가 次の記事 가 왼쪽에 뜬다. 모바일(1열)에서는 768 블록이 푼다 */
main .community_view .view_nav > a.prev {grid-column:1;}
main .community_view .view_nav > a.next {grid-column:2;}
/* 방향 화살표. 문구(i18n)에 넣지 않고 CSS 로 붙인다 — 일본어 · 한국어 번들을 따로 고칠 필요가 없다 */
main .community_view .view_nav > a.prev .dir:before {content:"\2190"; margin-right:6px;}
main .community_view .view_nav > a.next .dir:after {content:"\2192"; margin-left:6px;}
main .community_view .view_nav > a .dir {font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--color-text-subtle); letter-spacing:.08em;}
main .community_view .view_nav > a .subject {font-size:17px; font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:155%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 2-9. 목록으로 ----------------------------------------------------------- */
main .community_view .view_back {margin-top:56px; display:flex; justify-content:center;}
/* 버튼 모양은 공지사항 상세의 「이전 페이지로」(component.css section.btn .btn_line)를 따른다 —
   하늘색 테두리 · 흰 배경 · 하늘색 굵은 글자. 공용 클래스를 걸지 않고 값만 옮긴 것은
   커뮤니티 모양을 이 파일 안에서 끝내기 위해서다(section.btn 의 폭 · 여백까지 딸려 온다).
   폭은 고정하지 않고 최소폭만 둔다 — 한국어 문구(목록으로)와 일본어 문구의 길이가 다르다. */
main .community_view .view_back a {display:inline-flex; align-items:center; justify-content:center; min-width:150px; height:40px; padding:0 24px; box-sizing:border-box; border:1px solid var(--color-brand-primary); border-radius:var(--radius-xs); background:var(--color-surface-primary); color:var(--color-brand-primary); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); white-space:nowrap; transition:background .2s ease;}
main .community_view .view_back a:hover {background:var(--color-surface-secondary);}


/* ===========================================================================
   3) 본문 부품 — 관리자가 에디터/codeview 로 쓰는 영역

   ★ 아래 revert 블록은 부품 규칙(.a-hero / .facts / .notes / .article-cta)보다
     반드시 앞에 와야 한다. `.a-body *` 와 `.facts` 는 명시도가 같아(0,1,0)
     순서로 승부가 갈린다 — 뒤로 옮기면 부품 스타일이 통째로 날아간다.

   all: revert 는 작성자 스타일을 버리고 브라우저 기본값으로 되돌린다. default.css 가
   p·li·h5 에 직접 거는 word-break:break-all 도 여기서 함께 풀린다(상속으로는 못 이긴다).

   인라인 style 은 HtmlSanitizer 가 제거한다. class 는 허용한다 —
   그게 없으면 운영자가 넣은 부품이 전부 맨 텍스트로 보인다.
   부품 마크업의 작성 예시는 관리자의 작성 가이드(/event/community/guide)에 있다.
   ======================================================================== */
main .community_view .a-body,
main .community_view .a-body * {all:revert;}

/* revert 뒤에 본문 기본값을 다시 세운다. font-family 는 body 에서 상속되므로 건드리지 않는다.
   font-weight 를 명시하는 이유는 전역 리셋이 본문 글자를 굵게 올려놨기 때문이다. */
main .community_view .a-body {margin-top:0; font-size:var(--font-size-md); font-weight:var(--font-weight-regular); line-height:200%; color:var(--color-text-default);}

/* 소제목. h2 가 목차의 대상이다 — 클릭해 내려왔을 때 제목이 화면 맨 위에 붙지 않도록
   scroll-margin-top 으로 24px 를 띄운다. */
main .community_view .a-body h2 {margin:56px 0 0; font-size:24px; font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:150%; scroll-margin-top:24px;}
main .community_view .a-body h3 {margin:36px 0 0; padding-left:12px; border-left:2px solid var(--color-brand-primary); font-size:var(--font-size-2md); font-weight:var(--font-weight-bold); color:var(--color-text-strong); line-height:150%;}
main .community_view .a-body p {margin:20px 0 0;}
main .community_view .a-body a {color:var(--color-brand-primary); text-decoration:underline;}
main .community_view .a-body strong, main .community_view .a-body b {font-weight:var(--font-weight-bold); color:var(--color-text-strong);}
main .community_view .a-body img {max-width:100%; height:auto; margin:20px 0 0; border-radius:var(--radius-3xl);}
main .community_view .a-body hr {margin:32px 0 0; border:none; border-top:1px solid var(--color-line-light);}

/* 3-1. 대표 이미지 */
main .community_view .a-body .a-hero {margin:0 0 24px; border-radius:var(--radius-3xl); overflow:hidden;}
main .community_view .a-body .a-hero img {width:100%; margin:0; border-radius:0;}

/* 3-2. 조건 박스 — 항목 한 줄이 곧 물색 둥근 칸이다.
   개최요강 · 特典の受け取り方 · 金額の目安처럼 "확인할 것"에 쓴다.
   읽을 것(본문)과 확인할 것(이 박스)을 색으로 가른다 — 목차는 그레이, 이쪽은 물색. */
main .community_view .a-body .facts {margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
main .community_view .a-body .facts li {list-style:none; display:flex; gap:16px; padding:14px 22px; border-radius:14px; background:var(--color-surface-secondary); font-size:15px; line-height:170%;}
main .community_view .a-body .facts .k {flex:0 0 96px; font-weight:var(--font-weight-bold); color:var(--color-brand-secondary);}
main .community_view .a-body .facts .v {min-width:0; color:var(--color-text-default);}

/* 3-3. 주의사항 — ・ 불릿 */
main .community_view .a-body .notes {margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
main .community_view .a-body .notes li {list-style:none; position:relative; padding-left:18px; font-size:var(--font-size-md); color:var(--color-text-default); line-height:190%;}
main .community_view .a-body .notes li:before {content:"・"; position:absolute; left:0; color:var(--color-brand-primary);}

/* 3-4. 일반 목록 — 부품 class 를 붙이지 않은 ul/ol 도 읽히게 둔다 */
main .community_view .a-body ul:not(.facts):not(.notes),
main .community_view .a-body ol {margin:20px 0 0; padding-left:20px;}
main .community_view .a-body ul:not(.facts):not(.notes) > li,
main .community_view .a-body ol > li {margin:6px 0 0; line-height:190%;}

/* 3-5. 표 — 기간·대상·금액 같은 정형 정보는 문단이 아니라 표로 쓰게 유도한다.
   좁은 화면에서 표만 가로로 흐르도록 .table-scroll 로 감싼다. 페이지 본문이 흐르면 안 된다. */
main .community_view .a-body table {width:100%; border-collapse:collapse; margin:20px 0 0; font-size:var(--font-size-sm);}
main .community_view .a-body th, main .community_view .a-body td {padding:10px 12px; border:1px solid var(--color-line-light); text-align:left; line-height:160%;}
main .community_view .a-body th {background:var(--color-surface-muted); font-weight:var(--font-weight-bold); color:var(--color-text-strong); white-space:nowrap;}
main .community_view .a-body .table-scroll {overflow-x:auto;}

/* 3-6. 본문 중 CTA — 글 끝에서만 유도하면 긴 글에서는 끝까지 읽은 사람만 본다 */
main .community_view .a-body .article-cta {margin:28px 0 0; padding:24px; border:1px solid var(--color-border-accent); border-radius:var(--radius-4xl); background:var(--color-surface-secondary); text-align:center;}
main .community_view .a-body .article-cta h3 {margin:0 0 8px; padding:0; border:none; font-size:var(--font-size-md);}
main .community_view .a-body .article-cta p {margin:0 0 16px; font-size:var(--font-size-sm);}
/* ★ box-sizing:border-box 를 반드시 둔다. 위 all:revert 가 content-box 로 되돌려 놓아서, 모바일의 width:100% 에
     좌우 padding 48px 이 더해져 버튼이 박스 오른쪽으로 삐져나갔다(2026-10-06 QA). max-width 로 PC 에서도 박스를 넘지 않게 하고,
     높이를 고정하지 않아(min-height) 문구가 길면 잘리지 않고 줄을 바꾼다 */
main .community_view .a-body .article-cta .cta-btn {display:inline-block; box-sizing:border-box; min-width:200px; max-width:100%; min-height:44px; padding:10px 24px; line-height:24px; border-radius:var(--radius-pill); background:var(--color-brand-primary); color:var(--color-white); font-weight:var(--font-weight-bold); text-decoration:none; vertical-align:top;}

/* 3-7. 인라인 태그 */
main .community_view .a-body .chip {display:inline-block; margin:0 4px 4px 0; padding:2px 10px; border-radius:var(--radius-4xl); background:var(--color-surface-secondary); color:var(--color-brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);}


/* ===========================================================================
   1024px 이하 — 카드 2열, 헤드 패널 겹침 완화
   ======================================================================== */
@media all and (max-width:1024px) {

    main .community_area .community_list {grid-template-columns:repeat(2, minmax(0, 1fr));}

    main .community_view .view_hero .hero_panel {width:calc(100% - 64px); margin:-16px auto 0; padding:32px; border-radius:var(--radius-3xl);}
    main .community_view .view_hero .hero_panel h4 {font-size:24px;}
    main .community_view .view_hero .hero_panel .meta {font-size:var(--font-size-xs);}

    /* 읽는 한 단 — PC 와 모바일(≤768) 사이 값. 768 블록이 뒤에 있어 모바일에서는 그쪽이 이긴다 */
    main .community_view .view_toc .tit {font-size:var(--font-size-sm);}
    main .community_view .view_toc li {font-size:var(--font-size-sm-alt);}

    main .community_view .benefit_box .tit {font-size:var(--font-size-md);}
    main .community_view .benefit_box dt {font-size:var(--font-size-sm-alt);}
    main .community_view .benefit_box dd {font-size:var(--font-size-sm);}

    main .community_view .a-body {font-size:15px; line-height:190%;}
    main .community_view .a-body h2 {font-size:21px;}
    main .community_view .a-body h3 {font-size:17px;}
    main .community_view .a-body .facts li {font-size:var(--font-size-sm);}
    main .community_view .a-body .notes li {font-size:15px;}

    main .community_view .view_cta a {height:52px; font-size:15px;}

    /* 목록으로 — PC 만 2px 크게(16px), 이 구간부터는 원래 크기(14px) */
    main .community_view .view_back a {height:36px; font-size:var(--font-size-sm);}

    /* 제목 앞 파란 바는 글자 높이에 맞춘다 */
    main .community_view .community_goods .goods_group > .tit h5 {font-size:var(--font-size-2md);}
    main .community_view .community_goods .goods_group > .tit:before {height:18px;}

    main .community_view .view_nav > a .dir {font-size:var(--font-size-xs-alt);}
    main .community_view .view_nav > a .subject {font-size:var(--font-size-md);}
}


/* ===========================================================================
   900px 이하 — 필터가 제목 아래 줄로 내려간다
   제목과 나란히 두면 카테고리가 늘었을 때 제목을 밀어내 두 줄이 된다.
   ======================================================================== */
@media all and (max-width:900px) {

    main .community_area .community_head {flex-direction:column; align-items:stretch; gap:14px;}
    /* 좌우 여백 밖까지 흘려 스크롤 끝이 화면 끝과 맞게 한다 */
    main .community_area .option {margin:0 -24px; padding:0 24px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;}
    main .community_area .option > * {flex:0 0 auto; height:35px; padding:0 14px; border-radius:30px; font-size:var(--font-size-xs);}
}


/* ===========================================================================
   768px 이하 — 모바일
   ======================================================================== */
@media all and (max-width:768px) {

    .community_badge {height:20px; padding:0 10px; font-size:var(--font-size-xxs);}
    .community_badges {gap:4px;}

    /* 1) 목록 */
    main .community_area {padding:20px 0 40px;}
    main .community_area .community_head h4 {font-size:var(--font-size-lg);}
    main .community_area .option {margin:0 -18px; padding:0 18px;}

    main .community_area .community_pickup {margin-top:20px; border-radius:14px;}
    main .community_area .community_pickup .baner_area img.web {display:none;}
    /* MO 영역 — 324 x 200~324 (폭의 61.728~100%) */
    main .community_area .community_pickup .baner_area img.mo {display:block; min-height:61.728cqw; max-height:100cqw;}
    main .community_area .community_pickup .cap {flex-direction:column; align-items:stretch; gap:8px; padding:14px 14px 16px;}
    main .community_area .community_pickup .cap .txt {gap:6px;}
    main .community_area .community_pickup .cap .subject {font-size:var(--font-size-md);}
    main .community_area .community_pickup .cap .summary {font-size:var(--font-size-sm);}
    main .community_area .community_pickup .cap .period {font-size:var(--font-size-xs);}
    main .community_area .community_pickup .cap .btn_pickup {height:44px; font-size:var(--font-size-sm);}

    main .community_area .community_list {margin-top:24px; grid-template-columns:minmax(0, 1fr); gap:12px;}
    main .community_area .community_list .item {border-radius:14px;}
    main .community_area .community_list .item .thumb .state {top:10px; left:10px;}
    main .community_area .community_list .item .info {gap:6px; padding:12px 14px 16px;}
    main .community_area .community_list .item .info .subject {font-size:var(--font-size-sm); line-height:145%;}
    main .community_area .community_list .item .info .period {font-size:var(--font-size-xs);}
    main .community_area .pg_num_area {margin-top:28px;}

    /* 2) 상세 */
    main .community_view {padding:20px 0 40px;}
    /* 헤드 이미지만 좌우 여백 밖까지 흘린다. main 의 padding 이 18px 이다 */
    main .community_view .view_hero .hero_img {margin:0 -18px;}
    main .community_view .view_hero .hero_img img.web {display:none;}
    /* MO 영역 — 324 x 200~324 (폭의 61.728~100%). img.mo 에만 건다 — MO 가 비어 PC 한 장(클래스 없음)을 쓰는
       과거 데이터는 PC 범위 그대로 두어야 가로로 긴 이미지가 흰 여백 속 작은 그림이 되지 않는다 */
    main .community_view .view_hero .hero_img img.mo {display:block; min-height:61.728cqw; max-height:100cqw;}
    main .community_view .view_hero .hero_panel {width:100%; margin:-12px auto 0; padding:20px; border-radius:var(--radius-3xl); gap:10px;}
    main .community_view .view_hero .hero_panel h4 {font-size:var(--font-size-lg); line-height:155%;}
    main .community_view .view_hero .hero_panel .meta {flex-direction:column; align-items:flex-start; gap:2px; font-size:var(--font-size-xs-alt);}

    main .community_view .view_col {margin-top:24px;}
    main .community_view .view_toc {padding:16px 18px; border-radius:var(--radius-2xl); gap:10px;}
    main .community_view .view_toc .tit {font-size:var(--font-size-sm);}
    main .community_view .view_toc li {font-size:var(--font-size-sm-alt);}
    main .community_view .view_toc + .a-body {margin-top:28px;}

    main .community_view .benefit_box {margin-top:28px; padding:20px; border-radius:var(--radius-3xl); gap:12px;}
    main .community_view .benefit_box .tit {font-size:15px;}
    main .community_view .benefit_box dl {flex-direction:column; gap:2px;}
    main .community_view .benefit_box dt {flex:0 0 auto; font-size:var(--font-size-xs);}
    main .community_view .benefit_box dd {font-size:var(--font-size-sm-alt); line-height:165%;}

    main .community_view .view_cta {margin-top:32px;}
    main .community_view .view_cta a {width:100%; height:48px; font-size:15px;}

    main .community_view .community_goods {margin-top:44px; gap:28px;}
    main .community_view .community_goods .goods_group {gap:14px;}
    main .community_view .community_goods .goods_group > .tit {padding-bottom:10px;}
    main .community_view .community_goods .goods_group > .tit h5 {font-size:17px;}
    main .community_view .community_goods .goods_group > .tit:before {height:17px;}

    main .community_view .view_nav {margin-top:44px; grid-template-columns:minmax(0, 1fr); gap:12px;}
    main .community_view .view_nav > a {padding:16px 18px; border-radius:var(--radius-2xl); gap:8px;}
    /* 1열이므로 칸 고정을 푼다. 남겨 두면 次の記事 가 암묵적 2번째 열을 만들어 옆으로 삐져나간다 */
    main .community_view .view_nav > a.prev,
    main .community_view .view_nav > a.next {grid-column:auto;}
    main .community_view .view_nav > a .dir {font-size:var(--font-size-xs-alt);}
    main .community_view .view_nav > a .subject {font-size:15px;}

    main .community_view .view_back {margin-top:32px;}
    main .community_view .view_back a {font-size:var(--font-size-sm-alt);}

    /* 3) 본문 부품 */
    main .community_view .a-body {font-size:var(--font-size-sm); line-height:185%;}
    main .community_view .a-body h2 {margin-top:36px; font-size:19px;}
    main .community_view .a-body h3 {margin-top:24px; font-size:var(--font-size-md);}
    main .community_view .a-body p {margin-top:14px;}
    main .community_view .a-body .facts {margin-top:16px; gap:6px;}
    main .community_view .a-body .facts li {flex-direction:column; gap:2px; padding:12px 16px; border-radius:var(--radius-2xl); font-size:var(--font-size-sm-alt); line-height:165%;}
    main .community_view .a-body .facts .k {flex:0 0 auto;}
    main .community_view .a-body .notes {margin-top:16px; gap:10px;}
    main .community_view .a-body .notes li {padding-left:16px; font-size:var(--font-size-sm); line-height:185%;}
    /* 버튼은 박스 안쪽 폭을 꽉 채운다 — 좌우 여백이 박스 padding(16px) 하나로 같아진다. border-box 는 위 3-6 에 있다 */
    main .community_view .a-body .article-cta {padding:16px;}
    main .community_view .a-body .article-cta .cta-btn {display:block; min-width:0; width:100%; padding:10px 16px;}
}


/* ===========================================================================
   한국어 줄바꿈 — word-break:keep-all 은 한국어 표시분에만 건다 (2026-10-01)

   keep-all 은 띄어쓰기에서만 줄을 바꾼다. 일본어는 띄어쓰기가 없어 「。」까지가 한 단어가 되고,
   긴 문장은 줄을 못 바꿔 화면 밖으로 넘친다(390px 상세 본문에서 가로 스크롤이 생겼다).
   lang 은 템플릿이 표시하는 언어 행(J/K)으로 단다 — 상세는 section.community_view,
   일람은 카드 a.item · 상단 픽업 a.community_pickup. 화면 언어가 아니라 행 기준이므로
   한국어 화면에서 일본어로 폴백된 글은 일본어 규칙(default.css 의 break-all · 본문은 브라우저 기본값)을 따른다.
   ======================================================================== */
main .community_area .community_pickup .cap .subject:lang(ko),
main .community_area .community_pickup .cap .summary:lang(ko),
main .community_area .community_list .item .info .subject:lang(ko),
main .community_view .view_hero .hero_panel h4:lang(ko),
main .community_view .view_toc a:lang(ko),
main .community_view .benefit_box dd:lang(ko),
main .community_view .benefit_box .notice_list li:lang(ko),
main .community_view .a-body:lang(ko) {word-break:keep-all;}