/* =========================================================
   LegalMatch — main.css
   Design: Dark Mode, Glassmorphism, Premium UI
   ========================================================= */

:root {
    --primary-rgb:   69, 232, 221;
    --primary:       rgb(var(--primary-rgb));
    --primary-dark:  #1b2435;
    --primary-light: #ddded9;
    --accent:        #FF6B6B;
    --gold:          #FFD700;
    --bg-dark:       #1b2435;
    --bg-card:       #13132B;
    --bg-glass:      rgba(255,255,255,0.05);
    --border-glass:  rgba(255,255,255,0.1);
    --text-primary:  #333333;
    --text-secondary:#A0A0C0;
    --text-muted:    #606080;
    --text:          var(--text-primary);
	--text-white:    #ffffff;
    --success:       #4CAF50;
    --warning:       #FF9800;
    --error:         #F44336;
    --radius:        12px;
    --radius-lg:     20px;
    --shadow:        0 8px 32px rgba(0,0,0,0.4);
    --shadow-glow:   0 0 30px rgba(108,99,255,0.3);
    --transition:    0.25s ease;
    --header-h:      80px;
    --max-w:         1400px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family:'Pretendard',sans-serif;    
    color:var(--text-primary);
    min-height:100vh;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-top: var(--header-h);
}
#main-content { min-height: 60vh; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }

/* ── Layout ── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
 
 /* ── Grid Utilities ── */
 .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
 .grid-3 > .col-span-2 { grid-column: span 2; }
 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
 
 @media (max-width: 1024px) {
     .grid-4 { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
     .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
 }

/* ── Header ── */
.site-header {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:var(--header-h);
    background:rgba(13,13,26,0.85);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid var(--border-glass);
    transition:background 0.3s ease;
	padding:10px 0;
	background:var(--primary-dark);;
}
.header-inner {
    display:flex; align-items:center; justify-content:space-between;
    height:100%; gap: 20px;
}
.logo { display:flex; align-items:center; gap:12px; font-size:1.45rem; flex-shrink: 0; text-align:center;}
.logo-icon { font-size:2rem; }
.logo-icon img{height:60px;}
.logo-text { color:var(--primary); font-weight: 800; line-height: 100%; }
.logo-text strong { color:var(--primary-light); font-weight: 800;}
.logo-text span { font-weight: 400; font-size:0.7em; line-height: 100%;}
.main-nav { display:flex; align-items:center; gap:32px; flex: 1; justify-content: flex-end; }
.nav-list { display:flex; align-items:center; list-style:none; gap:6px; }
.nav-item { position: relative; }
.nav-auth { display: flex; align-items: center; gap: 14px; margin-left: 24px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.08); }
.nav-link {
    padding:8px 25px; border-radius:8px;
    color:var(--text-white);
    font-size:0.93rem; font-weight:600;
    transition:color var(--transition), background var(--transition);
    display:flex; align-items:center; gap:4px;
}
.nav-link:hover { color:var(--primary); /*background:var(--bg-glass); */}

.nav-link02 {
    padding:5px 8px; border-radius:20px;
    color:var(--text-white);
    font-size:0.85rem; font-weight:600;
    transition:color var(--transition), background var(--transition);
    display:flex; align-items:center; gap:4px;
	margin:0 1px; border:1px solid #ffffff;
}
.nav-link02:hover { color:var(--primary); /*background:var(--bg-glass); */}

.nav-link03 {
    padding:8px;
    font-size:0.93rem;
}

.nav-main {
    background:var(--primary);
	color:var(--primary-dark);
	border:1px solid var(--primary-dark);
}

.nav-main:hover {
    background:var(--primary-dark);
	color:var(--text-white);
	border:1px solid #ffffff;
}

.nav-ai {
    background:linear-gradient(135deg,rgba(108,99,255,0.2),rgba(139,133,255,0.2));
    color:var(--primary-light) !important;
    border:1px solid rgba(108,99,255,0.3);
}

/* ── Dropdown ── */
.has-dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; min-width: 200px;
    background: rgba(13, 13, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 12px 0; margin-top: 10px;
    list-style: none;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    z-index: 1100;
}
.dropdown-menu::before {
    content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.has-dropdown:hover .dropdown-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}
.dropdown-menu li a {
    display: block; padding: 10px 20px;
    color: var(--text-white); font-size: 0.9rem;
    transition: all 0.2s;
}
.dropdown-menu li a:hover {
    /*background: rgba(108, 99, 255, 0.1);*/
    color: var(--primary);
    padding-left: 24px;
}
.dropdown-menu .nav-ai { margin: 8px 12px; border-radius: 8px; text-align: center; }

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 28px; border-radius:var(--radius);
    font-weight:600; font-size:0.95rem;
    border:none; cursor:pointer;
    transition:all var(--transition);
    white-space:nowrap;
}
.btn-primary {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff; box-shadow:0 4px 20px rgba(108,99,255,0.4);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(108,99,255,0.5); }
.btn-outline {
    background:transparent; color:var(--primary-light);
    border:1.5px solid var(--primary-light);
}
.btn-outline:hover { background:rgba(108,99,255,0.1); }
.btn-sm { padding:8px 18px; font-size:0.85rem; }
.btn-block { width:100%; }

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), var(--shadow-glow);
    border-color: rgba(108,99,255,0.3);
}
.glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-lg);
}
.glass--dark { background: rgba(0, 0, 0, 0.3); }

/* ── Expert Cards ── */
.expert-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}
.expert-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.expert-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.expert-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-light);
    border: 2px solid var(--border-glass);
}
.expert-name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.expert-title { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; }
.expert-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.expert-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-glass);
}
.rating { font-size: 0.9rem; font-weight: 600; color: var(--gold); }
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-glass);
}
.badge-gold { background: rgba(255,215,0,0.1); color: var(--gold); border-color: rgba(255,215,0,0.2); }

/* ── AI Chat Specialized Styles ── */
.chat-container {
    height: 600px; display: flex; flex-direction: column;
    background: rgba(13,13,26,0.5); border-radius: 24px;
    border: 1px solid var(--border-glass); overflow: hidden;
    box-shadow: var(--shadow);
}
.chat-messages {
    flex: 1; padding: 32px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px;
    scroll-behavior: smooth;
}
.message { max-width: 80%; display: flex; flex-direction: column; gap: 8px; animation: messageFadeIn 0.4s ease; }
.message.user { align-self: flex-end; }
.message.ai { align-self: flex-start; }

.message-bubble {
    padding: 16px 24px; border-radius: 20px; font-size: 0.95rem; line-height: 1.6;
    position: relative;
}
.message.user .message-bubble {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(108,99,255,0.3);
}
.message.ai .message-bubble {
    background: var(--bg-card);
    color: var(--text-primary); border-bottom-left-radius: 4px;
    border: 1px solid var(--border-glass);
}

/* ── Forms ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-label { font-size:0.9rem; font-weight:600; color:var(--text-secondary); }
.form-control {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 14px 20px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    width: 100%;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(108,99,255,0.15);
    background: rgba(255,255,255,0.07);
}

/* ── Flash Messages ── */
.flash-container {
    position:fixed; top:calc(var(--header-h) + 12px); left:50%;
    transform:translateX(-50%); z-index:2000;
    display:flex; flex-direction:column; gap:8px; min-width:320px;
}
.flash {
    padding:14px 20px; border-radius:var(--radius);
    font-weight:500; font-size:0.9rem;
    backdrop-filter:blur(16px);
    animation:slideDown 0.3s ease;
}
.flash--success { background:rgba(76,175,80,0.2); border:1px solid rgba(76,175,80,0.4); color:#81C784; }
.flash--error   { background:rgba(244,67,54,0.2);  border:1px solid rgba(244,67,54,0.4);  color:#EF9A9A; }

.hamburger { display: none; }

/* ── Responsive ── */
@media (max-width:1200px) {
    .main-nav { display:none; flex-direction:column; position:fixed; top:var(--header-h); left:0; right:0; background:var(--bg-dark); padding:12px; gap:8px; overflow-y: auto; }
    .main-nav.open { display:flex; height:100vh; overflow-y: auto; }
    .nav-list { flex-direction: column; width: 100%; align-items: flex-start; gap: 12px;}
    .nav-list li{width:100%;}
    .nav-list li.nav-item .nav-link{width:100%; display:inline-block; background:#ffffff; color:var(--bg-dark);}
    .dropdown-menu { 
        position: static; opacity: 1; visibility: visible; transform: none; 
        background: transparent; border: none; box-shadow: none; 
        padding: 0; margin: 0; width: 100%; /*display: block;*/
    }
    .dropdown-menu li a { padding: 4px 16px; border-radius: 8px; }
    .chat-container { height: calc(100vh - 120px); border-radius: 0; }
    
    .hamburger {
        display: flex; flex-direction: column; gap: 5px;
        background: none; border: none; padding: 10px;
        z-index: 1100;
    }
    .hamburger span {
        display: block; width: 24px; height: 2px;
        background: var(--text-primary); transition: 0.3s;
    }
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width:768px) {
    
:root {
    --header-h:      60px;
}    
     
.logo { font-size:1rem;}
.logo-icon { font-size:1.2rem; }
.logo-icon img{height:40px;}
}
/* ── Footer ── */
.site-footer {
    background: #1b2435;
    padding: 80px 0 40px;
    border-top: 1px solid var(--border-glass);
    /*margin-top: 80px;*/
    color: var(--text-secondary);
    background:var(--bg-dark);
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.footer-brand{margin-bottom: 16px;}
.footer-brand .logo-text { font-size: 1.6rem; color: #fff; display: inline-block;  }
.footer-brand p { font-size: 0.95rem; line-height: 1.6; max-width: 320px; opacity: 0.7; }
.footer-links { display: flex; gap: 80px; }
.footer-links h4 { color: #fff; margin-bottom: 24px; font-size: 1.1rem; letter-spacing: 0.5px; }
.footer-links a { display: block; margin-bottom: 12px; font-size: 0.95rem; transition: color 0.2s, transform 0.2s; opacity: 0.7; }
.footer-links a:hover { color: var(--primary-light); opacity: 1; transform: translateX(4px); }
.footer-copy {
    width: 100%;
    text-align: center;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-brand .fAddress{color:#878a8c; font-size:0.8rem; line-height:24px; font-style:normal; padding:20px 0;}
.footer-brand .fAddress span{font-size:0.7rem;}
.footer-brand .fAgreeWrap{width:100%; padding:20px 0 20px 0 ; color:#d2d2d2;}
.footer-brand .fAgreeWrap a{display:inline-block; padding:0 10px; font-size:1em; color:#d6d4cc;}

.site-footer  .partnerLink{padding:10px 0px; display:flex; border-top:1px solid #c2c2c2;}
.site-footer  .partnerLink a{display:flex; padding-left:10px;align-items: center;}
.site-footer  .partnerLink a .pLogo img{height:30px;}
.site-footer  .partnerLink a .name{font-size:0.7rem;line-height:1rem; padding:0 10px 0 5px;color:#f1f1f1;}

.site-footer  .fSnsLink{padding:0 10px; display:flex;}
.site-footer  .fSnsLink a{display:inline-block; width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.site-footer  .fSnsLink a.instagram{background-image:url(/assets/img/main/sns_instagram.png);}
.site-footer  .fSnsLink a.youtube{background-image:url(/assets/img/main/sns_youtube.png);}


@media (max-width: 768px) {
    .footer-inner { flex-direction: column; gap: 32px; text-align: center; align-items: center; }
    .footer-links { flex-direction: column; gap: 32px; }
    .footer-brand p { margin: 0 auto; }
    .footer-links h4 { margin-top: 16px; margin-bottom: 12px; }
}





/* Floating */



.goTopButton{width:40px; height:40px; position:fixed; bottom:50px; right:5px; cursor:pointer; opacity:0; z-index:30;}

.goTopButton::before{display:inline-block; content:''; position:absolute; width:30px; padding-bottom:40px; border:2px solid #a1a1a1; bottom:-40px; left:50%; margin-left:-15px; border-radius:20px; box-sizing:border-box;}		
.goTopButton::after{display:inline-block; content:''; position:absolute; width:4px; height:10px; background:#a1a1a1; bottom:-30px; left:50%; border-radius:2px; margin-left:-2px;}	

.goTopButton:hover::before{background:#a1a1a1;}
.goTopButton:hover::after{background:#000000;  bottom:-15px;}

.goTopButton:focus::before{background:#a1a1a1;}
.goTopButton:focus::after{background:#000000;  bottom:-15px;}


.goTopButton::after{ -webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.3s, 0.3s;
		-moz-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.3s;
		-moz-transition:0.3s;
		-webkit-transition:0.3s;	}	


.goTopButton .goTopBarWrap{width:100%; height:100%; position:relative; border-radius:20px; padding:10px;}
.goTopButton .goTopBarWrap .goTopBarBox{width:100%; height:100%; position:relative; overflow:hidden;}
.goTopButton .goTopBarWrap .goTopBar{ display:none;}

.goTopButton .goTopBarWrap .goTopBarBox::before{content:'';width:40%; height:40%; display:inline-block; position:absolute; border-right:2px solid #a1a1a1; 
         border-bottom:2px solid #a1a1a1; top:100%; left:20%; transform:rotate(-135deg) translate(-50%,-50%);

         animation-name:mGoTopBar;
		 animation-duration:3s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;
		 
		 opacity:0;
		 

}


.goTopButton .goTopBarWrap .goTopBarBox::after{content:'';width:40%; height:40%; display:inline-block; position:absolute; border-right:2px solid #a1a1a1; 
         border-bottom:2px solid #a1a1a1; top:100%; left:20%; transform:rotate(-135deg) translate(-50%,-50%);

         animation-name:mGoTopBar02;
		 animation-duration:3s;
		 animation-timing-function:linear;
		 animation-delay:1.5s;
		 animation-iteration-count:infinite;
		 
		 opacity:0;
		 

}


@keyframes mGoTopBar{

    0{	  
	   opacity:0;
	   top:100%;
	   }
   100%{
	  opacity:1;
	  top:-100%;
	   }		
	
}

@keyframes mGoTopBar02{

    0{	  
	   opacity:0;
	   top:100%;
	   }
   100%{
	  opacity:1;
	  top:-100%;
	   }		
	
}
  

/* Quick Menu */

.mQuote{position:absolute; border-radius:100%; width:80%;max-width:600px; bottom:10%; left:50%; transform: translate(-50%,0); z-index:200;}
.mQuote .mainFloat{width:100%; position:relative;}
.mQuote .mainFloat .mFloatLink{width:100%;padding:10px 0; position:relative;}
.mQuote .mainFloat .mFloatLink a{display:inline-block; padding:10px; border-radius: 24px; border:1px solid #45e8dd; margin-right:5px;font-size:1rem;}
.mQuote .mainFloat .mFloatLink a.aiConsult{color:#ffffff; background:#1b2435;}
.mQuote .mainFloat .mFloatLink a.aboutJoin{color:#1b2435; background:#45e8dd; border:1px solid #1b2435;}
.mQuote .mainFloat .mFloatSearch{width:100%; padding:10px; box-sizing: border-box; display:flex; justify-content: space-between; background:rgba(0,0,0,.8); border-radius: 10px; border:1px solid #d6d4cc; background:#000000; align-items: center;}
.mQuote .mainFloat .mFloatSearch p.imgSch{width:30px;}
.mQuote .mainFloat .mFloatSearch p.imgSch img{width:100%;}
.mQuote .mainFloat .mFloatSearch p.schBox{width:calc(100% - 40px);background:#000000;}
.mQuote .mainFloat .mFloatSearch p.schBox .schinput{width:100%; padding:10px; line-height: 24px; box-sizing: border-box; border:none;background:#000000; color:#ffffff;}
.mQuote .mainFloat .bot{position:absolute; width:100px; right:0; bottom:0px;}
.mQuote .mainFloat .bot img{width:100%;}

/* AI floating button (fixed right) */
.ai-float-btn {
    position: fixed;
    right: 20px;
    bottom: 110px;
    z-index: 250;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1b2435 0%, #243047 100%);
    border: 2px solid #45e8dd;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(69, 232, 221, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: visible;
}
.ai-float-btn:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(69, 232, 221, 0.35);
}
.ai-float-btn__img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    pointer-events: none;
}
.ai-float-btn__pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(69, 232, 221, 0.5);
    animation: aiFloatPulse 2s ease-out infinite;
    pointer-events: none;
}
.ai-float-btn__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #1b2435;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #45e8dd;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ai-float-btn:hover .ai-float-btn__label {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}
@keyframes aiFloatPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}
@media (max-width: 768px) {
    .ai-float-btn {
        right: 14px;
        bottom: 90px;
        width: 60px;
        height: 60px;
    }
    .ai-float-btn__img { width: 46px; height: 46px; }
    .ai-float-btn__label { display: none; }
}

/* Gemini-style chat page */
body.page-chat { padding-top: 0; background: #f0f4f9; }
body.page-chat .site-header { position: sticky; }
body.page-chat #main-content { min-height: calc(100vh - var(--header-h)); }

/* USER CSS Cusomter : Main */
/* Hero */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:var(--header-h); }
.hero-bg-orbs { position:absolute; inset:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.25; }
.orb-1 { width:600px; height:600px; background:var(--primary); top:-100px; right:-100px; }
.orb-2 { width:400px; height:400px; background:var(--accent); bottom:-50px; left:-100px; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:80px 24px; }
.hero-badge { display:inline-block; padding:6px 16px; background:rgba(108,99,255,0.15); border:1px solid rgba(108,99,255,0.3); border-radius:20px; font-size:0.85rem; color:var(--primary-light); margin-bottom:20px; }
.hero-title { font-size:clamp(2rem,5vw,3.4rem); font-weight:800; line-height:1.15; margin-bottom:20px; }
.hero-desc { color:var(--text-secondary); font-size:1.05rem; line-height:1.7; margin-bottom:32px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.hero-features { display:flex; gap:20px; font-size:0.85rem; color:var(--text-secondary); }
/* Chat preview */
.chat-preview { padding:24px; max-width:360px; }
.chat-preview-header { display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:0.85rem; color:var(--text-muted); }
.chat-dot { width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px var(--primary); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.chat-preview-msgs { display:flex; flex-direction:column; gap:12px; }
.preview-msg { padding:10px 14px; border-radius:12px; font-size:0.85rem; max-width:90%; }
.preview-msg.user { background:rgba(108,99,255,0.2); border:1px solid rgba(108,99,255,0.3); align-self:flex-end; }
.preview-msg.ai { background:rgba(255,255,255,0.05); border:1px solid var(--border-glass); display:flex; gap:8px; }
.ai-icon { flex-shrink:0; }
.match-indicator { text-align:center; padding:10px; font-size:0.85rem; color:var(--gold); background:rgba(255,215,0,0.1); border-radius:8px; border:1px solid rgba(255,215,0,0.2); }
/* Stats */
.stats-section{padding:80px 0; background: #f1f1f1;}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-num { font-size:2.8rem; font-weight:800; background:linear-gradient(135deg,var(--primary-light),#000); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:1rem; color:var(--text-muted); margin-top:4px; }
/* How it works */
.steps-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px; align-items:center; }
.step-card { background:var(--bg-card); border:1px solid var(--border-glass); border-radius:var(--radius-lg); padding:32px 24px; text-align:center; }
.step-num { font-size:0.75rem; color:var(--primary-light); font-weight:700; letter-spacing:2px; margin-bottom:12px; }
.step-icon { font-size:2.4rem; margin-bottom:16px; }
.step-card h3 { font-size:1.1rem; margin-bottom:8px; }
.step-card p { font-size:0.85rem; color:var(--text-muted); }
.step-arrow { font-size:1.5rem; color:var(--text-muted); }
/* Categories */
.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.category-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 16px; background:var(--bg-card); border:1px solid var(--border-glass); border-radius:var(--radius-lg); transition:all var(--transition); cursor:pointer; }
.category-card:hover { background:rgba(108,99,255,0.1); border-color:rgba(108,99,255,0.4); transform:translateY(-4px); }
.cat-icon { font-size:2rem; }
.cat-name { font-size:0.82rem; font-weight:600; color:var(--text-secondary); text-align:center; }
/* CTA */
.cta-inner { padding:64px; text-align:center; }
.cta-inner h2 { font-size:2rem; font-weight:800; margin-bottom:12px; }
.cta-inner p { color:var(--text-secondary); margin-bottom:32px; }
/* Responsive */
@media(max-width:1024px) {
    .category-grid { grid-template-columns:repeat(4,1fr); }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
    .hero-inner { grid-template-columns:1fr; }
    .hero-visual { display:none; }
    .steps-grid { grid-template-columns:1fr; }
    .step-arrow { transform:rotate(90deg); text-align:center; }
    .category-grid { grid-template-columns:repeat(3,1fr); }
    .cta-inner { padding:32px 16px; }
}



/* USER CSS Cusomter : Main_DTOMO */

#main-content{}
	
.center{width:90%; max-width:1400px; margin:0 auto;}
.hide{display:none;}
	
.mRollBox { position:relative; height:calc(100vh - var(--header-h)); align-items:center; overflow:hidden; background:#c2c2c2; }
		
#mainRollWrap{width:100%; height:calc(100vh - var(--header-h)); font-size:20px; color:#ffffff; overflow:hidden; position:relative; }
#mainRollWrap .mainRoll{width:100%; height:100vh; overflow:hidden; position:relative; z-index:2;}

#mainRollWrap .mainRoll .swiper-container{width:100%; height:100vh; overflow:hidden;}
#mainRollWrap .mainRoll .swiper-slide{width:100%; height:100vh; opacity:0; background-repeat:no-repeat; background-position:center center; background-size:cover;}

#mainRollWrap .mainRoll .slide01{background-image:url(/assets/img/main/mRoll/mRoll01.jpg);}
#mainRollWrap .mainRoll .slide02{background-image:url(/assets/img/main/mRoll/mRoll02.jpg);}
#mainRollWrap .mainRoll .slide03{background-image:url(/assets/img/main/mRoll/mRoll03.jpg);}
#mainRollWrap .mainRoll .slide04{background-image:url(/assets/img/main/mRoll/mRoll04.jpg);}
#mainRollWrap .mainRoll .slide05{background-image:url(/assets/img/main/mRoll/mRoll05.jpg);}



 @media screen and (max-width:850px){
	  
	 #mainRollWrap .mainRoll .slide01{background-image:url(/assets/img/main/mRoll/m/mRoll01.jpg); background-position:center bottom;}
     #mainRollWrap .mainRoll .slide02{background-image:url(/assets/img/main/mRoll/m/mRoll02.jpg); background-position:center bottom;}
     #mainRollWrap .mainRoll .slide03{background-image:url(/assets/img/main/mRoll/m/mRoll03.jpg);}
     #mainRollWrap .mainRoll .slide04{background-image:url(/assets/img/main/mRoll/m/mRoll04.jpg); background-position:center top;}
     #mainRollWrap .mainRoll .slide05{background-image:url(/assets/img/main/mRoll/m/mRoll05.jpg);}	  
	  
	  
  }



#mainRollWrap .mainRoll .mainRollTxt{width:100%; font-size:3em; position:absolute; top:40%; transform:translateY(-50%); color:#ffffff; font-weight:100; text-align:center; line-height: 1em; }
#mainRollWrap .mainRoll .mainRollTxt span{font-weight:600;}
#mainRollWrap .mainRoll .mainRollTxt br.brMo{display:none;}

#mainRollWrap .mainRoll .mRollVideo{width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; z-index:1;}
#mainRollWrap .mainRoll .mRollVideo video{width:1920px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}



#mainRollWrap .mainRoll .swiper-pagination{width:100%; top:150px; left:0; width:100%; z-index:10;}
#mainRollWrap .mainRoll .swiper-button{position:absolute; z-index:10; width:60px; height:60px; top:50%; margin-top:-30px; background-color:rgba(255,255,255,0.2); background-repeat:no-repeat; background-position:center center; background-size:30px 30px; border:1px solid #ffffff; border-radius:100%; display:none;}
#mainRollWrap .mainRoll .swiper-button-next{right:2%; background-image:url(/assets/img/main/arrowR02.png); }
#mainRollWrap .mainRoll .swiper-button-prev{left:2%; background-image:url(/assets/img/main/arrowL02.png);}


#mainRollWrap .mainRoll .swiper-pagination-bullet{width:12px; height:12px; margin:0 5px;  position:relative; opacity:1; background:#777777; border-radius:100%;}
#mainRollWrap .mainRoll .swiper-pagination-bullet-active{background:#ffffff; }


#mainRollWrap .mainRollBox .swiper-button{position:absolute; z-index:10; width:60px; height:60px; top:50%; margin-top:-50px; background-color:rgba(255,255,255,0.2); background-repeat:no-repeat; 
                                       background-position:center center; background-size:30px 30px; border:1px solid #ffffff; border-radius:100%;}
#mainRollWrap .mainRollBox .swiper-button-next-m{right:2%; background-image:url(/assets/img/main/arrowR02.png); }
#mainRollWrap .mainRollBox .swiper-button-prev-m{left:2%; background-image:url(/assets/img/main/arrowL02.png);}



.moreBold{font-weight: bold; font-size:1.2em;}
.moreSmall{font-weight: 200; font-size:0.8em;}
.centerNarrow{max-width:1200px;}


/* SECTION 01 */

.whatConsultBox{width:100%; padding:80px 0; background:#f1f1f1; position:relative;}

.whatConsult{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; align-items: center; padding-bottom:50px;}
.whatConsult .conslutTit{width:39.5%;font-size:2rem; font-weight: 600; color:#303333; text-align:center;}
.whatConsult .consult{width:19%; aspect-ratio:1/1; position:relative; box-sizing:border-box; margin:10px 0; overflow:hidden; border-radius:20px;background:#1b2435;}
.whatConsult .consult img{width:100%;height:100%; object-fit: cover; object-position: center center; position:relative; z-index:1; border-radius:20px;}
.whatConsult .consult a{display:inline-block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; font-size:1rem; text-align:center; vertical-align: middle; font-weight: 900; color:#ffffff; background: #45E8DD;
background: linear-gradient(180deg,rgba(69, 232, 221, 0) 0%, rgba(69, 232, 221, 0) 50%, rgba(69, 232, 221, 1) 100%);}
.whatConsult .consult a>span{display:inline-block; position:absolute; z-index: 3; bottom:10%;left:50%; transform:translate(-50%,0%); color:#1b2435; }

.whatConsult .consult a.basic{box-sizing:border-box; /*border:1px solid #556d6d;*/ color:#1b2435; background:#45e8dd;}
.whatConsult .consult a.basic>span{bottom:auto; top:50%; left:50%; transform:translate(-50%,-50%);color:#1b2435;}

.whatConsult .consult:hover img{transition:0.3s; transform:matrix(1.20, 0, 0, 1.20, 0, 0); -webkit-transform:matrix(1.20, 0, 0, 1.20, 0, 0); -moz-transform:matrix(1.20, 0, 0, 1.20, 0, 0);}

.whatConsult .consult:hover a{background:rgba(0,0,0,.4);}
.whatConsult .consult:hover a.basic{background:#1b2435; color:#ffffff;}

.whatConsult .consult:hover a>span{color:#ffffff;}
.whatConsult .consult:hover a.basic>span{color:#ffffff;}

.whatConsult .consult a>span span.golink{display:inline-block; padding-right:30px; position:relative; font-weight:400;}
.whatConsult .consult a>span span.golink::before{display:inline-block; content:''; width:8px; height:8px; border-right:1px solid #1b2435; border-top:1px solid #1b2435; position:absolute; top:50%; right:0%; transform: rotate(45deg) translate(0,-50%);}

.whatConsult .consult:hover a>span span.golink::before{border-right:1px solid #ffffff; border-top:1px solid #ffffff;}

.legalConsultBox{width:100%; padding:2rem;background:#ddded9;}
.legalConsultBox .legalConsult{display:flex; justify-content: space-between;}
.legalConsultBox .legalConsult .legalTxt{font-size:2rem; color:#ffffff;}
.legalConsultBox .legalConsult .legalBot{position:relative; display:flex; align-items: center; padding-top:50px;}
.legalConsultBox .legalConsult .legalBot .txt{font-size:2rem; color:#ffffff; padding:10px; border-radius: 20px; background:#000000; color:#45e8dd;}
.legalConsultBox .legalConsult .legalBot .bot{width:150px;padding-left:10px;}
.legalConsultBox .legalConsult .legalBot .bot img{width:100%;}

#goSecBlank01{width:100%; height:80px; margin-top:-80px;}


#countWrap{width:100%;}


/* Section02 */
.newsSection{width:100%; height:100vh; background:#ffffff; box-sizing:border-box; position:relative; padding:100px 0 0; position:relative;}

.mSectionTit{width:100%; font-size:3.2rem; font-weight: 600; text-align:center; color:#303333; padding:20px 0;}
.mSectionTit span{font-size:1.2rem; font-weight:100;}
.mBBSList{width:100%;  border-bottom:1px solid #d6d4cc;  border-top:1px solid #d6d4cc; padding:40px;}
.mBBSList .bbsList{width:100%;}
.mBBSList .bbsList li{width:100%; padding:12px 0;}
.mBBSList .bbsList li a{width:100%; display:flex; justify-content: space-between; text-align: left;}
.mBBSList .bbsList li a .date{width:20%; font-size:0.9rem; color:#666;}
.mBBSList .bbsList li a .subject{width:78%; font-size:1rem; color:#333;}
.mBBSList .bbsList li a .subject span{display:inline-block; padding-bottom: 10px;}

.mBBSList .bbsList02{}
.mBBSList .bbsList02 li{width:100%; padding:5px 0; list-style:none;}
.mBBSList .bbsList02 li a{display:inline-block; width:100%; padding:15px 20px; text-align: left; background:#ffffff; border:1px solid #ffffff; border-radius: 15px;}
.mBBSList .bbsList02 li a:hover{ background:#f1f1f1; border:1px solid #f1f1f1;}


.bbsWrap{width:100%; display:flex; justify-content:space-between;}
.bbsWrap .bbsBox{width:60%; border-radius: 20px;}
.bbsWrap .bbsBox02{width:35%; background:var(--primary-dark); border-radius: 20px; padding:20px;}
.bbsWrap .bbsBox02 .mSectionTit{color:#ffffff; padding-top: 0;}
.bbsWrap .bbsBox02 .mBBSList{ padding:40px 0; border-bottom:none;}


/* SECTION 3*/



/* SECTION 4 */



/* SECTION 5 */



/* ScrollBtn */

.scrollBtn{display:inline-block; position:absolute; z-index:30; width:40px; height:40px; padding:5px; border-radius:20px; bottom:0px; left:50%; margin-left:-20px; color:#ffffff; 
                         font-size:10px; line-height:10px; vertical-align:middle; text-align:center; cursor:pointer;}
						 
.scrollBtn::before{display:inline-block; content:''; position:absolute; width:30px; padding-bottom:40px; border:2px solid #ffffff; top:-40px; left:50%; margin-left:-15px; border-radius:20px; box-sizing:border-box;}		
.scrollBtn::after{display:inline-block; content:''; position:absolute; width:4px; height:10px; background:#ffffff; top:-30px; left:50%; border-radius:2px; margin-left:-2px;}		

.scrollBtn02::before{ border:2px solid #000000;}		
.scrollBtn02::after{background:#000000;}	


.scrollBtn::after{ -webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.3s, 0.3s;
		-moz-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.3s;
		-moz-transition:0.3s;
		-webkit-transition:0.3s;	}		
		
						 			 
						 

.scrollBtn .scrollBarWrap{display:inline-block; width:100%; height:100%; text-align:center; position:relative; overflow:hidden;}
.scrollBtn .scrollBarWrap .scrollBar{ display:none;}

.scrollBtn:hover::before{background:#ffffff;}
.scrollBtn:hover::after{background:#000000;  top:-15px;}

.scrollBtn:focus::before{background:#ffffff;}
.scrollBtn:focus::after{background:#000000;  top:-15px;}


.scrollBtn02:hover::before{background:#000000;}
.scrollBtn02:hover::after{background:#ffffff;}

.scrollBtn02:focus::before{background:#000000;}
.scrollBtn02:focus::after{background:#ffffff;}




.scrollBtn .scrollBarWrap::before{content:'';width:40%; height:40%; display:inline-block; position:absolute; border-right:2px solid #ffffff; 
         border-bottom:2px solid #ffffff; top:0%; left:30%; transform:rotate(45deg) translate(-50%,-50%); box-sizing:border-box;;

         animation-name:mScrollAni;
		 animation-duration:3s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;
		 
		 opacity:0;
		 

}


.scrollBtn .scrollBarWrap::after{content:'';width:40%; height:40%; display:inline-block; position:absolute; border-right:2px solid #ffffff; 
         border-bottom:2px solid #ffffff; top:0%; left:30%; transform:rotate(45deg) translate(-50%,-50%); box-sizing:border-box;;

         animation-name:mScrollAni02;
		 animation-duration:3s;
		 animation-timing-function:linear;
		 animation-delay:1.5s;
		 animation-iteration-count:infinite;
		 
		 opacity:0;
		 

}



@keyframes mScrollAni{

   0{	  
	   opacity:0;
	   top:-100%;
	   }
   100%{
	  opacity:1;
	  top:100%;
	   }
	   

	
}

@keyframes mScrollAni02{

   0{	  
	   opacity:0;
	   top:-100%;
	   }
   100%{
	  opacity:1;
	  top:100%;
	   }	
	
}
 
   

 /*Balck Arrow*/
 
.scrollBtn02 .scrollBarWrap::before{border-right:2px solid #000000 !important; border-bottom:2px solid #000000 !important;}
.scrollBtn02 .scrollBarWrap::after{border-right:2px solid #000000 !important; border-bottom:2px solid #000000 !important;}




.goTopButton{width:40px; height:40px; position:fixed; bottom:50px; right:5px; cursor:pointer; opacity:0; z-index:30;}

.goTopButton::before{display:inline-block; content:''; position:absolute; width:30px; padding-bottom:40px; border:2px solid #a1a1a1; bottom:-40px; left:50%; margin-left:-15px; border-radius:20px; box-sizing:border-box;}		
.goTopButton::after{display:inline-block; content:''; position:absolute; width:4px; height:10px; background:#a1a1a1; bottom:-30px; left:50%; border-radius:2px; margin-left:-2px;}	

.goTopButton:hover::before{background:#a1a1a1;}
.goTopButton:hover::after{background:#000000;  bottom:-15px;}

.goTopButton:focus::before{background:#a1a1a1;}
.goTopButton:focus::after{background:#000000;  bottom:-15px;}


.subMainTxt{width:100%; text-align:center; font-size:2rem; padding-top:100px;}

/*BBS Style */
.post-title-link { color: var(--text-primary); font-weight: 500; transition: color 0.2s; }
.post-title-link:hover { color: #0d9488; }
.badge-primary { background: #1b2435; color: #fff; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; vertical-align: middle; }

/* ── Utilities ── */
.pt-120 { padding-top: calc(var(--header-h) + 48px); }
.pb-80 { padding-bottom: 80px; }
.mb-48 { margin-bottom: 48px; }
.mb-32 { margin-bottom: 32px; }
.mb-24 { margin-bottom: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; }
.mt-32 { margin-top: 32px; }
.mt-16 { margin-top: 16px; }
.mr-8 { margin-right: 8px; }
.ml-12 { margin-left: 12px; }
.p-32 { padding: 32px; }
.p-40 { padding: 40px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.text-center { text-align: center; }
.text-muted { color: #64748b; }
.d-flex { display: flex; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-32 { gap: 32px; }
.align-end { align-items: flex-end; }
.h-100 { height: 100%; }
.h-fit { height: fit-content; }
.h4 { font-size: 1.25rem; font-weight: 700; color: #1b2435; }
.h5 { font-size: 1.1rem; font-weight: 700; color: #1b2435; }
.fw-700 { font-weight: 700; }
.h2 { font-size: 1.75rem; line-height: 1.3; }
.border-top { border-top: 1px solid #e2e8f0; }
.w-100 { width: 100%; }
.d-inline-block { display: inline-block; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: #0d9488; }
.font-sm { font-size: 0.875rem; }
.font-xs { font-size: 0.75rem; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.badge-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.badge-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge-danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.btn-xs { padding: 6px 12px; font-size: 0.78rem; }

/* ── Sub page / board ── */
.section-header { padding-top: 40px; text-align: center; }
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    color: #1b2435;
    margin-bottom: 12px;
    line-height: 1.25;
}
.section-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

.board-container {
    margin: 40px 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(27, 36, 53, 0.06);
    overflow: hidden;
}
.board-container.glass {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(27, 36, 53, 0.06);
}
.board-container.p-32 { padding: 32px; }

/* ── Auth pages (login, register) ── */
.auth-layout {
    max-width: 480px;
    margin: 0 auto;
}
.auth-layout--wide {
    max-width: 520px;
}
.auth-card {
    padding: 40px 36px;
}
.auth-form .form-group:last-of-type {
    margin-bottom: 8px;
}
.auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 20px;
}
.forgot-link {
    color: var(--text-muted);
    transition: color 0.2s;
}
.forgot-link:hover {
    color: var(--primary);
}
.auth-portal-switch .btn + .btn {
    margin-top: 12px;
}
body.page-auth-login .auth-portal-switch .btn + .btn,
body.page-auth-register .auth-portal-switch .btn + .btn {
    margin-top: 12px;
}
.auth-portal-switch .btn {
    font-weight: 600;
}
.auth-footer {
    margin-top: 28px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.auth-footer p + p {
    margin-top: 8px;
}
.auth-footer a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.auth-footer a:hover {
    text-decoration: underline;
}
.form-error {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 4px;
}
.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    height: 18px;
    width: 18px;
    background-color: rgba(108, 99, 255, 0.1);
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    transition: background-color 0.2s;
}
.checkbox-container:hover input ~ .checkmark {
    background-color: rgba(108, 99, 255, 0.2);
}
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Auth pages — light theme (로그인/가입은 밝은 서브페이지) */
body.page-auth-login,
body.page-auth-register {
    background: #f1f5f9;
}
body.page-auth-login #main-content,
body.page-auth-register #main-content {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
body.page-auth-login .section,
body.page-auth-register .section {
    padding-top: 48px;
}
body.page-auth-login .auth-card,
body.page-auth-register .auth-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.page-auth-login .auth-card:hover,
body.page-auth-register .auth-card:hover {
    transform: none;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    border-color: #e2e8f0;
}
body.page-auth-login .form-label,
body.page-auth-register .form-label {
    color: #334155;
    font-weight: 600;
    margin-bottom: 2px;
}
body.page-auth-login .form-control,
body.page-auth-register .form-control {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    padding: 12px 16px;
    min-height: 48px;
    line-height: 1.5;
}
body.page-auth-login .form-control::placeholder,
body.page-auth-register .form-control::placeholder {
    color: #94a3b8;
}
body.page-auth-login .form-control:focus,
body.page-auth-register .form-control:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
    background: #fff;
}
body.page-auth-login .auth-form .form-group,
body.page-auth-register .auth-form .form-group {
    margin-bottom: 20px;
    gap: 8px;
}
body.page-auth-login .auth-form .form-group:last-of-type,
body.page-auth-register .auth-form .form-group:last-of-type {
    margin-bottom: 28px;
}
body.page-auth-login .auth-form .btn-primary,
body.page-auth-register .auth-form .btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    background: linear-gradient(135deg, #45e8dd, #0d9488);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}
body.page-auth-login .auth-form .btn-primary:hover,
body.page-auth-register .auth-form .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
}
body.page-auth-login .btn-outline,
body.page-auth-register .btn-outline {
    color: #0f766e;
    border: 1.5px solid #5eead4;
    background: #f0fdfa;
}
body.page-auth-login .btn-outline:hover,
body.page-auth-register .btn-outline:hover {
    background: #ccfbf1;
    border-color: #2dd4bf;
}
body.page-auth-login .auth-actions,
body.page-auth-register .auth-actions {
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
body.page-auth-login .checkbox-container,
body.page-auth-register .checkbox-container {
    color: #475569;
    gap: 8px;
}
body.page-auth-login .forgot-link,
body.page-auth-register .forgot-link {
    color: #64748b;
}
body.page-auth-login .auth-portal-switch,
body.page-auth-register .auth-portal-switch {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
body.page-auth-login .auth-portal-switch .btn,
body.page-auth-register .auth-portal-switch .btn {
    width: 100%;
    padding: 12px 20px;
}
body.page-auth-login .auth-footer,
body.page-auth-register .auth-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eef2f6;
    line-height: 1.75;
}
body.page-auth-login .auth-footer p,
body.page-auth-register .auth-footer p {
    margin: 0;
}
body.page-auth-login .auth-footer p + p,
body.page-auth-register .auth-footer p + p {
    margin-top: 10px;
}
body.page-auth-login .auth-footer a,
body.page-auth-register .auth-footer a {
    color: #0d9488;
}
body.page-auth-login .form-label small,
body.page-auth-register .form-label small {
    font-weight: 400;
    color: #64748b;
}
body.page-auth-register .auth-layout--register {
    max-width: 720px;
}
body.page-auth-register select.form-control {
    appearance: auto;
    cursor: pointer;
}
body.page-auth-register .auth-form {
    width: 100%;
    max-width: 100%;
}
body.page-auth-register .auth-fieldset {
    border: none;
    margin: 0 0 28px;
    padding: 0 0 24px;
    border-bottom: 1px solid #eef2f6;
    display: block;
    min-width: 0;
    min-inline-size: 0;
    width: 100%;
}
body.page-auth-register .auth-fieldset:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
body.page-auth-register .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}
body.page-auth-register .form-row > .form-group {
    min-width: 0;
    margin-bottom: 0;
}
@media (max-width: 600px) {
    body.page-auth-register .form-row {
        grid-template-columns: 1fr;
    }
    body.page-auth-register .form-row > .form-group {
        margin-bottom: 16px;
    }
}
body.page-auth-register .form-control {
    box-sizing: border-box;
    max-width: 100%;
    display: block;
}
body.page-auth-register .auth-legend {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    padding: 0;
    width: 100%;
}
body.page-auth-register .auth-legend small {
    font-weight: 400;
    color: #64748b;
}
body.page-auth-register .required {
    color: #dc2626;
}
body.page-auth-register select.form-control {
    appearance: auto;
    cursor: pointer;
}
body.page-auth-register .auth-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}
@media (max-width: 600px) {
    body.page-auth-register .auth-checkbox-grid {
        grid-template-columns: 1fr;
    }
}
body.page-auth-register .auth-check-item,
body.page-auth-register .auth-agree-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.5;
    cursor: pointer;
}
body.page-auth-register .auth-check-item input,
body.page-auth-register .auth-agree-item input {
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #0d9488;
}
body.page-auth-register .auth-agree-item {
    margin-bottom: 12px;
}
body.page-auth-register .auth-fieldset--agree {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
}
body.page-auth-register .auth-agree-item a {
    color: #0d9488;
    text-decoration: underline;
}

body.page-legal #main-content {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
.legal-doc h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 28px 0 12px;
}
.legal-doc p, .legal-doc li {
    color: #475569;
    line-height: 1.75;
    margin-bottom: 12px;
}
.legal-doc ul {
    padding-left: 1.25rem;
    margin-bottom: 16px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.data-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
    text-align: center;
}
.data-table thead th:nth-child(2) { text-align: left; }
.data-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #eef2f6;
    color: #334155;
    vertical-align: middle;
}
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody tr:last-child td { border-bottom: none; }

.pagination { flex-wrap: wrap; }
.pagination .btn-outline {
    color: #1b2435;
    border-color: #cbd5e1;
}
.pagination .btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; }
.pagination .btn-primary {
    background: linear-gradient(135deg, #45e8dd, #0d9488);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25);
}

.post-list-attach { margin-right: 6px; font-size: 0.9rem; vertical-align: middle; }

/* ── Post view (detail) ── */
.container--narrow { max-width: 900px; }

.post-view__breadcrumb {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.post-view__breadcrumb a { color: #0d9488; font-weight: 500; }
.post-view__breadcrumb a:hover { text-decoration: underline; }
.post-view__breadcrumb .sep { color: #cbd5e1; }
.post-view__breadcrumb .current { color: #94a3b8; }

.post-view__card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(27, 36, 53, 0.07);
    overflow: hidden;
}

.post-view__header {
    padding: 36px 40px 28px;
    border-bottom: 1px solid #eef2f6;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.post-view__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 16px;
}
.post-view__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #1b2435;
    color: #fff;
}
.post-view__badge--sticky { background: #0d9488; }
.post-view__views::before { content: '·'; margin-right: 8px; color: #cbd5e1; }

.post-view__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    color: #1b2435;
    line-height: 1.35;
    margin: 0;
    word-break: keep-all;
}

.post-view__body {
    padding: 40px;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #334155;
    min-height: 200px;
}
.post-view__body.cms-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 16px 0; }
.post-view__body.cms-body p { margin-bottom: 1em; }
.post-view__body.cms-body h2,
.post-view__body.cms-body h3 { color: #1b2435; margin: 1.5em 0 0.75em; font-weight: 700; }
.post-view__body.cms-body ul,
.post-view__body.cms-body ol { padding-left: 1.5em; margin-bottom: 1em; }
.post-view__body.cms-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.post-view__body.cms-body table th,
.post-view__body.cms-body table td { border: 1px solid #e2e8f0; padding: 10px 14px; }
.post-view__body.cms-body table th { background: #f8fafc; font-weight: 600; }
.post-view__body.cms-body blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 4px solid #45e8dd;
    background: #f0fdfa;
    color: #475569;
    border-radius: 0 12px 12px 0;
}
.post-view__body.cms-body a { color: #0d9488; text-decoration: underline; }
.post-view__body.cms-body pre,
.post-view__body.cms-body code { background: #f1f5f9; border-radius: 6px; font-size: 0.9em; }

.post-view__attachments {
    margin: 0 40px 32px;
    padding: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}
.post-view__attachments-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1b2435;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.post-view__attachments-title em {
    font-style: normal;
    font-size: 0.85rem;
    color: #0d9488;
    background: rgba(69, 232, 221, 0.15);
    padding: 2px 10px;
    border-radius: 12px;
}

.post-attach-list { list-style: none; margin: 0; padding: 0; }
.post-attach-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.post-attach-item:last-child { margin-bottom: 0; }
.post-attach-item:hover { border-color: #45e8dd; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.08); }
.post-attach-item__icon { font-size: 1.5rem; flex-shrink: 0; }
.post-attach-item__info { flex: 1; min-width: 0; }
.post-attach-item__name {
    display: block;
    font-weight: 600;
    color: #1b2435;
    word-break: break-all;
    margin-bottom: 4px;
}
.post-attach-item__name:hover { color: #0d9488; }
.post-attach-item__size { font-size: 0.8rem; color: #94a3b8; }
.post-attach-item__btn { flex-shrink: 0; }
.post-attach-item__btn.btn-outline { color: #1b2435; border-color: #cbd5e1; }

.post-view__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 40px 32px;
    border-top: 1px solid #eef2f6;
}
.post-view__back.btn-outline { color: #1b2435; border-color: #cbd5e1; padding: 12px 24px; }
.post-view__back.btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; }
.post-view__copy-link.btn-outline { color: #64748b; border-color: #e2e8f0; }

@media (max-width: 768px) {
    .post-view__header { padding: 24px 20px 20px; }
    .post-view__body { padding: 24px 20px; }
    .post-view__attachments { margin: 0 20px 24px; padding: 16px; }
    .post-view__footer { padding: 20px; flex-direction: column; align-items: stretch; }
    .post-view__footer .btn { width: 100%; text-align: center; }
    .post-attach-item { flex-wrap: wrap; }
    .post-attach-item__btn { width: 100%; margin-top: 8px; }
}

/* Legacy aliases */
.post-detail-wrapper {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(27, 36, 53, 0.06);
}
.post-title { color: #1b2435; }
.post-content { color: #475569; }

@media (max-width: 768px) {
    .data-table { font-size: 0.85rem; }
    .data-table thead th,
    .data-table tbody td { padding: 10px 8px; }
    .board-container.p-32 { padding: 16px; }
    .data-table thead th:nth-child(4),
    .data-table tbody td:nth-child(4) { display: none; }
}