@charset "utf-8";

/* =========================================================================
 * common.css — 공통 베이스 / 레이아웃 토큰 (법무법인 그날)
 * ========================================================================= */

/* 시안 장식 폰트 SIMPLE CANDY (About us / MAKE YOUR NEW DAY 등) */
@font-face {
    font-family: 'SIMPLECANDY';
    src: url('../font/SIMPLECANDY.woff') format('woff'),
         url('../font/SIMPLECANDY.ttf') format('truetype'),
         url('../font/SIMPLECANDY.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --navy:      #20262b;   /* 딥 네이비 */
    --navy2:     #4c5d6a;
    --steel:     #7894a8;
    --ft-bg:     #15191d;   /* 푸터 배경 */
    --line:      #686868;
    --ink:       #111111;
    --gray:      #555555;
    --inner:     1700px;
}

/* 폰트: 피그마 지정 Pretendard — 기존 default.css의 Malgun Gothic 지정을 덮어씀
 * (h1~h6 등 제목이 맑은고딕으로 나오던 문제 수정) */
body,
#hd, #ft, #wrapper,
#hd h1, #hd h2, #ft h2,
#wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4, #wrapper h5, #wrapper h6,
h1, h2, h3, h4, h5, h6,
p, a, span, li, dt, dd, th, td, label, strong, em, b,
input, button, select, textarea {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    -webkit-text-size-adjust: 100%;
    letter-spacing: -0.02em;
}
body { color: var(--ink); }

/* 모든 글자: 어절 단위 줄바꿈(keep-all) + 영역 넘침 방지 */
body,
#hd, #ft, #wrapper,
h1, h2, h3, h4, h5, h6, p, a, span, li, dt, dd, th, td, label, strong, em, b, div {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* default.css의 min-width:1200px 해제 (반응형 방해 요소) */
#hd, #wrapper, #ft { min-width: 0; }

/* 콘텐츠 최대 너비 (지침 5) — 항상 좌우 여백 확보(화면 끝 붙음 방지) */
.inner {
    width: 100%;
    max-width: calc(var(--inner) + 40px);   /* 콘텐츠 1700 + 좌우 20px */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 커스텀 풀페이지에서 그누보드 기본 컨테이너 여백 제거 */
body #wrapper { max-width: none; width: 100%; margin: 0; padding: 0; }
#container_wr { max-width: none; width: 100%; margin: 0; padding: 0; background: none; border: 0; }
#container { width: 100%; margin: 0; padding: 0; min-height: 0; }
#container:after { content: ''; display: block; clear: both; }

/* ===== 게시판 공통 페이지네이션 (피그마 5382:749) — 모든 게시판 동일 적용 ===== */
.pg_wrap { clear: both; float: none; display: block; width: 100%; margin: 55px 0 0; text-align: center; }   /* default.css의 float:left/inline-block 해제 → 가운데 정렬 */
.pg { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 11px; }
.pg a, .pg strong { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 30px; height: 30px; padding: 0 6px; font-size: 15px; font-weight: 300; line-height: 1; letter-spacing: -0.45px; }
.pg .pg_page { border: 1px solid #ccc; color: #555; background: #fff; }
.pg .pg_page:hover { border-color: #7894a8; color: #20262b; text-decoration: none; }
.pg .pg_current { border: 1px solid #7d7d7d; background: #7d7d7d; color: #fff; }
/* 페이징 화살표(처음·이전·다음·맨끝): default.css의 text-indent(-999)/GIF 무력화 + 글리프 아이콘 표시 */
.pg .pg_start, .pg .pg_prev, .pg .pg_next, .pg .pg_end { text-indent: 0; overflow: visible; border: 0; background: transparent; color: #555; font-size: 0; }
.pg .pg_start::before, .pg .pg_prev::before, .pg .pg_next::before, .pg .pg_end::before { font-family: "Century Gothic", "Segoe UI Symbol", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -0.48px; line-height: 1; }
.pg .pg_start::before { content: "◂◂"; }
.pg .pg_prev::before  { content: "◂"; }
.pg .pg_next::before  { content: "▸"; }
.pg .pg_end::before   { content: "▸▸"; }
.pg .pg_start::before, .pg .pg_end::before { letter-spacing: -5.48px; }  /* 두 개짜리 화살표 붙이기 */
.pg .pg_start:hover, .pg .pg_prev:hover, .pg .pg_next:hover, .pg .pg_end:hover { color: #20262b; text-decoration: none; }
/* 게시판 Total(단순형 스킨: basic·counsel·gallery) — victory 기준 통일 */
#bo_list_total.bo_total { float: none; display: flex; align-items: center; gap: 11px; line-height: 1; }
#bo_list_total.bo_total .bo_total_en { font-family: 'SIMPLECANDY','Times New Roman',serif; font-size: 22px; font-weight: 400; color: #2b2b2b; line-height: 1; }
#bo_list_total.bo_total .bo_total_num { display: inline-flex; align-items: center; justify-content: center; padding: 5px 20px; background: #e6e6e6; font-family: 'UnShinmun',serif; font-size: 16px; font-weight: 400; color: #2b2b2b; line-height: 1; }

/* ===== 게시판 분류 탭 (피그마 5393:363) — 법률 인사이트: 영상 콘텐츠 / 그날의 칼럼 ===== */
.bd_tabs { display: flex; justify-content: center; margin-bottom:45px; }
.bd_tabs_in { display: inline-flex; align-items: center; gap: 30px; padding: 12px 50px; background: rgba(193,204,210,.1); border-radius: 50px; }
.bd_tab { display: inline-flex; align-items: center; gap: 10px; height: 36px; font-weight: 600; font-size: 22px; letter-spacing: -0.44px; color: rgba(47,58,66,.5); white-space: nowrap; }
.bd_tab .dot { width: 7px; height: 7px; background: rgba(47,58,66,.5); flex: 0 0 auto; }
.bd_tab.on { color: #2f3a42; }
.bd_tab.on .dot { background: #2f3a42; }
.bd_tab:hover { color: #2f3a42; text-decoration: none; }
.bd_tab:hover .dot { background: #2f3a42; }
@media (max-width: 768px) {
    .bd_tabs_in { gap: 18px; padding: 10px 26px; }
    .bd_tab { font-size: 17px; gap: 8px; height: 30px; }
}
@media (max-width: 486px) {
    .bd_tabs_in { gap: 12px; padding: 9px 18px; }
    .bd_tab { font-size: 15px; }
}

img { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }

/* 모든 버튼·링크 hover 부드럽게 (요소별 전용 transition은 특이도가 높아 그대로 유지됨) */
a, button, [role="button"], label,
input[type="submit"], input[type="button"], input[type="reset"] {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                box-shadow .25s ease, filter .25s ease, opacity .25s ease, transform .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    a, button, [role="button"], label,
    input[type="submit"], input[type="button"], input[type="reset"] { transition: none; }
}

/* 게시판 뷰: 첨부/에디터 이미지 클릭(확대 팝업·링크) 비활성화 — 실제 차단은 theme-ui.js */
#bo_v a.view_image, #bo_v a.view_image img, #bo_v a img { cursor: default; }

.sound_only,
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

html { scroll-behavior: smooth; }

/* Lenis 부드러운(관성) 스크롤 — 활성 시 네이티브 smooth와 이중 적용 방지 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================ 서브 비주얼 (공통) ============================ */
.sv { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden;  border-radius: 0 0 0 100px; background-size:cover   }
.sv_tit { padding-top: 45px; position: relative; z-index: 2; text-align: center; color: #fff; }
.sv_en { font-family: 'SIMPLECANDY', 'Times New Roman', serif; font-size: 50px; line-height: 1.3; text-transform: uppercase;}
.sv_dot { display: block; width: 4px; height: 4px; background: #fff; border-radius: 50%; margin:5px auto 15px }
.sv_ko { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; }
/* 서브비주얼 반응형(전 서브페이지 공통) — 필드 히어로 .dv_hero_ttl 과 동일한 텍스트 축소 + 배너 높이 축소 */
@media (max-width: 1024px) { .sv { height: 300px; border-radius: 0 0 0 50px;} .sv_en { font-size: 38px; } .sv_ko { font-size: 18px; } }
@media (max-width: 768px)  { .sv { height: 240px; } .sv_tit { height: 96px; } .sv_en { font-size: 30px; } .sv_ko { font-size: 16px; } }
@media (max-width: 486px)  { .sv { height: 190px; } .sv_en { font-size: 24px; } .sv_ko { font-size: 15px; } }

/* 섹션 공통 라벨/제목 */
.sec_label { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: #4c5d6a; }
.sec_label .dot { width: 7px; height: 7px; background: #4c5d6a; border-radius: 1px; }
.sec_tit { margin-top: 14px; font-size: 32px; font-weight: 700; line-height: 1.35; color: #111; letter-spacing: -0.6px; }
.sec_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.sw_nav { display: flex; gap: 10px; }
.sw_nav button { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 1px solid #d5dade; background: #fff; border-radius: 50%; color: #aeb6bc; cursor: pointer; line-height: 1; transition: .2s; }
.sw_nav button .sw_ico { width: 27px; height: 16px; display: block; color:#828282}
.sw_nav button:hover { background: #4c5d6a; color: #fff; border-color: #4c5d6a; }
.sw_nav button:hover .sw_ico  {  color: #fff;}
.hist .sw_nav button:hover .sw_ico  {  color: #828282;}

.rv_cta_btn {border-top:1px solid #fff; border-bottom:1px solid #fff;}
.vc_cta_btn {border-top:1px solid #fff; border-bottom:1px solid #fff;}
/* ============================ 플로팅 사이드 버튼 ============================ */
#floatbtn {
    position: fixed; right: 20px; bottom: 20px; 
    z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#floatbtn .fb_panel {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    width: 60px; padding: 22px 0; background: #fff; border-radius: 30px;
    box-shadow: 0 4px 7.5px rgba(0,0,0,0.12);
    overflow: hidden; transform-origin: bottom center; max-height: 400px; opacity: 1;
    transition: max-height .42s cubic-bezier(.22,1,.36,1), padding .42s cubic-bezier(.22,1,.36,1), opacity .3s ease .06s;
}
/* 각 항목: 펼칠 때 아래에서 위로 순차 등장 */
#floatbtn .fb_item { opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1); }
#floatbtn:not(.fb_off) .fb_item:nth-last-child(1) { transition-delay: .10s; }
#floatbtn:not(.fb_off) .fb_item:nth-last-child(2) { transition-delay: .16s; }
#floatbtn:not(.fb_off) .fb_item:nth-last-child(3) { transition-delay: .22s; }
#floatbtn:not(.fb_off) .fb_item:nth-last-child(4) { transition-delay: .28s; }
#floatbtn .fb_item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#floatbtn .fb_ico { display: flex; align-items: center; justify-content: center; height: 24px; }
#floatbtn .fb_ico img { max-height: 24px; width: auto; }
#floatbtn .fb_lb { font-size: 12px; font-weight: 500; color: #222; letter-spacing: -0.24px; }
#floatbtn .fb_item:hover .fb_lb { color: #4c5d6a; }

/* 로고원 = 패널 접기/펼치기 토글 */
#floatbtn .fb_toggle {
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
    padding: 0; border: 0; cursor: pointer;
    border-radius: 50px; background: linear-gradient(180deg, #2f3a42 0%, #536775 50%, #7894a8 100%);
    transition: transform .15s ease;
}
#floatbtn .fb_toggle img { width: 26px; height: auto; transition: transform .3s; }

/* 접힘(기본) — 아래에서 위로 펼쳐지도록 높이·투명도로 접음 */
#floatbtn.fb_off .fb_panel { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
#floatbtn.fb_off .fb_item { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
/* 로고 버튼 클릭 눌림 효과 */
#floatbtn .fb_toggle:active { transform: scale(.92); }

#floatbtn .fb_top {
    position: static;   /* default.css #top_btn{position:fixed} 해제 */
    width: 60px; height: 60px; border-radius: 50%; background: #d7d1c9; border: 0;
    color: #2f3a42; font-size: 17px; font-weight: 500; font-family: inherit; cursor: pointer;
    line-height: 1;
}
#floatbtn .fb_top:hover { background: #cbc3b8; }

/* 파블렛부터 좌우 여백 20px (지침 6) */
@media (max-width: 1024px) {
    .inner { padding-left: 20px; padding-right: 20px; }
    #floatbtn { transform: scale(0.9); transform-origin: right center; right: 12px; }
}

@media (max-width: 768px) {
    #floatbtn { top: auto; bottom: 16px; transform: none; right: 12px; gap: 6px; }
/*    #floatbtn .fb_panel { display: none; }               /* 모바일에서 SNS 패널 축소 */
    #floatbtn .fb_symbol, #floatbtn .fb_top { width: 50px; height: 50px; }
    #floatbtn .fb_top { font-size: 15px; }
	.sv_dot {width:2px; height:2px}
}