/* ================================================
   css/common.css — REDPOL 01 공통 스타일
   ================================================ */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0");
/* ---- AstaSans ---- */
@font-face { font-family:'AstaSans'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/AstaSans-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'AstaSans'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/AstaSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'AstaSans'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/AstaSans-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'AstaSans'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/AstaSans-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'AstaSans'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/AstaSans-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'AstaSans'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/AstaSans-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ---- Paperozi ---- */
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); font-weight:100; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); font-weight:200; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Paperozi'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

/* ---- Variables & Reset ---- */
:root { --red:#e0503f; --white:#ffffff; --black:#0a0a0a; --gray:#555; }
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body{
background:var(--black);
color:var(--white);
font-family:'AstaSans',sans-serif;
overflow-x:hidden;
overflow-y:auto;
}
h1, h2, h3, h4{  font-family: 'Paperozi', sans-serif;}
body.page-index{
overflow-y:auto;
}
@media (max-width:1024px) { body { overflow-y:auto; } }

/* ---- NAV ---- */
nav { position:fixed; top:0; left:0; right:0; padding:28px 48px; display:flex; justify-content:space-between; align-items:center; z-index:100; mix-blend-mode:difference; }
.nav-logo-img { height:22px; width:auto; display:block; }
.nav-links { display:flex; gap:40px; }
.nav-links a { font-family:'AstaSans',sans-serif; font-weight:700; font-size:0.9em; letter-spacing:0.15em; color:var(--white); text-decoration:none; opacity:1; transition:opacity 0.3s; position:relative; padding-bottom:4px; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:var(--red); transition:width 0.3s ease; }
.nav-links a:hover { opacity:0.75; }
body.page-index .nav-links a:hover::after,
body.page-index .nav-links a.active::after { width:0; }
body:not(.page-index) .nav-links a.active::after,
body:not(.page-index) .nav-links a:hover::after { width:100%; }

/* ---- HERO ---- */
#hero { position:relative; width:100%; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; }
#heroIntro, #heroVideo { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto; height:auto; max-width:90%; max-height:90%; z-index:0; mix-blend-mode:lighten; }
#network { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; opacity:1; }
.taglineText { position:absolute; top:50%; left:50%; transform:translate(-50%,-44%); color:rgba(255,255,255,0.55); font-family:'AstaSans',sans-serif; font-weight:300; font-size:clamp(9px,1vw,13px); letter-spacing:0.6em; white-space:nowrap; text-align:center; pointer-events:none; opacity:0; z-index:3; transition:opacity 2.2s ease, transform 2.2s ease; }
.taglineText.visible { opacity:1; transform:translate(-50%,-50%); }
.taglineText.hidden { opacity:0; transform:translate(-50%,-50%); transition:opacity 2.5s ease; }
.centerText { position:absolute; top:50%; left:50%; transform:translate(-50%,-44%) scale(0.92); color:white; font-family:'Paperozi',sans-serif; font-weight:700; font-size:clamp(18px,3vw,38px); letter-spacing:1.2em; white-space:nowrap; text-align:center; pointer-events:none; opacity:0; z-index:3; transition:opacity 5s cubic-bezier(0.22,1,0.36,1), transform 5s cubic-bezier(0.22,1,0.36,1); text-shadow:0 0 40px rgba(255,255,255,0.2), 0 0 100px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.9); }
.centerText.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---- INTRO SECTION ---- */
#intro-section { position:fixed; left:5%; top:20%; width:38%; height:auto; display:flex; align-items:flex-start; justify-content:flex-start; padding:0; z-index:2; pointer-events:none; }
.intro-wrap { max-width:480px; width:100%; display:flex; flex-direction:column; gap:40px; }
.intro-keywords { display:flex; flex-direction:column; gap:2px; }
.kw { display:block; font-family:'Paperozi',sans-serif; font-weight:700; font-size:clamp(28px,4vw,50px); letter-spacing:0.04em; color:rgba(255,255,255,0.8); line-height:1.2; opacity:0; transform:translateY(20px); transition:color 0.8s ease, opacity 1s ease, transform 1s ease; }
.kw.active { opacity:1; transform:translateY(0); color:rgba(255,255,255,0.8); }
.kw.done { opacity:1; transform:translateY(0); color:rgba(255,255,255,0.95); }
.intro-desc { display:flex; flex-direction:column; gap:6px; }
.intro-line { font-family:'AstaSans',sans-serif; font-weight:300; font-size:clamp(12px,1.2vw,15px); line-height:1.7; color:rgba(255,255,255,0.5); letter-spacing:0.025em; opacity:0; transform:translateY(12px); transition:opacity 1.2s ease, transform 1.2s ease; }
.intro-line--em { font-weight:500; color:rgba(255,255,255,0.85); }
.intro-line.visible { opacity:1; transform:translateY(0); }

/* ---- SECTIONS ---- */
section { padding:0; }
#about-text, #style-section, #process { opacity:0; transform:translateY(60px); transition:opacity 1.4s cubic-bezier(0.22,1,0.36,1), transform 1.4s cubic-bezier(0.22,1,0.36,1); }
#about-text.in-view, #style-section.in-view { opacity:1; transform:translateY(0); }
.reveal { opacity:0; transform:translateY(36px); transition:opacity 1.2s cubic-bezier(0.22,1,0.36,1), transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.15s; } .reveal-delay-2 { transition-delay:0.3s; } .reveal-delay-3 { transition-delay:0.5s; } .reveal-delay-4 { transition-delay:0.7s; }





/* ---- OVAL CARDS ---- */


.



/* ---- FOOTER ---- */
.site-footer { padding: 32px 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgb(255 255 255);
    font-family: 'AstaSans', sans-serif;
    font-weight: 300;
    position: fixed;
    width: 100%;
    bottom: 0;
    flex-direction: row; }
.site-footer a { color:rgba(255,255,255,0.3); text-decoration:none; transition:color 0.3s; }
.site-footer a:hover { color:rgba(255,255,255,0.7); }

/* ---- RESPONSIVE ---- */
@media (max-width:1024px) {
  nav { padding:24px 32px; }
  #intro-section { position:relative; left:auto; top:auto; width:100%; height:auto; padding:80px 40px; }
  .intro-wrap { max-width:600px; gap:36px; }
  .kw { font-size:clamp(28px,8vw,48px); }
  .intro-desc { gap:16px; }
  #style-section { grid-template-columns:1fr; gap:60px; padding:100px 48px; }
  #about-text { padding:120px 48px; }
}
@media (max-width:767px) {
  nav { padding:20px 24px; mix-blend-mode:normal; background:rgba(10,10,10,0.85); backdrop-filter:blur(8px); }
  .nav-links { gap:16px; }
  .nav-links a { font-size:0.75em; letter-spacing:0.08em; }
  .centerText { font-size:clamp(14px,5vw,24px); letter-spacing:0.8em; }
  #intro-section { padding:60px 28px; }
  .intro-wrap { gap:28px; }
  .kw { font-size:clamp(24px,9vw,40px); }
  .intro-line, .intro-line--em { font-size:13px; }
  #about-text { padding:80px 24px; text-align:left; }
  .about-body { font-size:14px; }
  .about-body br { display:none; }
  #style-section { grid-template-columns:1fr; gap:48px; padding:80px 24px; }
  .style-label { font-size:56px; }
  .style-desc { font-size:12px; }
  .oval-cards { flex-direction:column; align-items:center; gap:24px; }
  .oval-card-wrap { margin-left:0; }
  #process { padding:60px 24px; }
  .process-steps { flex-direction:column; align-items:center; gap:32px; margin-top:48px; }
  .process-step { width:100%; max-width:200px; }
  .process-step::before { top:auto; bottom:-16px; left:50%; right:50%; width:1px; height:16px; }
  .process-step:first-child::before, .process-step:last-child::before { left:50%; right:50%; width:1px; height:16px; }
  .process-step:last-child::before { display:none; }
  .site-footer { flex-direction:column; gap:8px; text-align:center; padding:24px; }
}

/* 게시판버튼 */

#bo_gall, #bo_w, #bo_v {
    margin: 160px auto;
    width: 96%;
    max-width: 1200px;
}
#bo_w .write_div {
    margin: 10px 0;
    position: relative;
    font-weight: 300;
	font-family:'AstaSans',sans-serif;
}
#bo_w .write_div label{}

#bo_w .write_div input, .form-field input, .form-field textarea, input.frm_file  {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 0 10px;
    font-family: 'AstaSans', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: var(--white);
    outline: none;
    transition: border-color 0.3s ease;
    resize: none;
}
#bo_w .bo_w_link label {
    position: absolute;
    top: 10px;
    left: 0;
    font-family: 'AstaSans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--red);
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: top 0.25s ease, font-size 0.25s ease, opacity 0.25s ease;

}
#bo_w .write_div label .material-symbols-rounded{ color: var(--red); font-size:16px;}
.smarteditor2 .cke_sc{display:none;}
.smarteditor2 span.sound_only{font-size:0;}
textarea.smarteditor2, .smarteditor2 iframe{background:#fff;}
#bo_w .bo_w_tit #btn_autosave {
    position: absolute;
    top: 5px;
    right: 5px;
    line-height: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: #fff;
}
#bo_w .btn_confirm {  display:grid;  padding-top: 50px;  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));  gap:10px;}
/* 버튼공통 */
.btn_cancel, .btn_list, .btn_reply, #bo_w .btn_submit, .btn-send{ display: inline-grid;font-weight: 500;letter-spacing: 0.2em;border-radius: 3px;font-family: 'AstaSans', sans-serif;cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;  padding: 16px 28px;    text-decoration: none; font-size:1em;   text-transform: uppercase;justify-content: center;align-items: center;}
/* ok버튼 */
#bo_w .btn_submit, .btn-send{    background: var(--red);    color: var(--white);     border: none;	}

/* 뷰페이지 댓글 */
#bo_vc, .cmt_btn, .bo_vc_w{display:none;}

#bo_v_title .bo_v_tit{    font-weight: 500;    letter-spacing: 0.012em;}
/* 글쓴이정보 */
#bo_v_info h2, .profile_info .pf_img, #bo_v_atc h2, .profile_info_ct .sound_only{display:none;}
.profile_info_ct p{font-size:1em; color:#fff;}
#bo_v_info .if_date {    margin: 0;    color: #fff;    display: flex;    flex-direction: row;    align-content: center;    justify-content: flex-start;    align-items: center;}
#bo_v_info .if_date span{font-size:0.9em; color:#fff;}
#bo_v_info span.material-symbols-rounded{    font-size: 1.2em;    padding-right: 6px;    line-height: 1;}
#bo_v_info {  position: relative;    display: flex;    width: 100%;    flex-direction: row;    flex-wrap: wrap;    justify-content: space-between;    font-size: 0.9rem;}
/* 게시판 글본문 */
#bo_v_atc{display: flex;    flex-direction: column;    align-content: center;    justify-content: flex-start;    align-items: center;}
.btn_more_opt .sound_only, .btn_bo_user .sound_only, .gall_box  .sound_only {font-size:0;}
.bo_v_atc{    padding-top: 20px;    position: relative;    display: flex;    flex-direction: column;    align-content: center;    justify-content: flex-start;    align-items: center;}

#bo_v_top a.btn_b01, .btn_bo_user a, .btn_bo_user button, .btn_bo_user .btn_bo_sch {
    font-family: 'AstaSans', sans-serif;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 0.15em;
    color: var(--white);
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.3s;
    position: relative;}
#bo_v_top a.btn_b01 i, .btn_bo_user a i, .btn_bo_user button i {display:none;}
#bo_v_top a.btn_b01:hover, button.btn:hover{ background: transparent;    color: var(--red);  transition: opacity 0.3s;}
button.btn{ background: transparent;    border: none;    color: #fff;    font-size: 1.4em; font-weight: 400; cursor:pointer;}
#bo_v_con {
    margin: 60px auto;
    width: 100%;
    max-width: 900px;
    word-break: keep-all;
    line-height: 2;
    min-height: 180px;
    overflow: hidden;
    font-family: var(--font-sans);
    color:#fff;
}
#bo_gall .gall_text_href a .new_icon{display:none;}
bo_gall .gall_text_href a.bo_tit{}