#wrap {width: 100%; overflow-x: clip;}

header, nav, main, footer {width: 100%;}

header {position: sticky; height: 150px; background: var(--surface); z-index: 100; 
transition: all 360ms cubic-bezier(0.4, 0, 0.2, 1); }
header nav dl dt {transition: height 360ms cubic-bezier(0.4, 0, 0.2, 1);}
header .container {padding: 0 10px;}
header .call a {display: flex; align-items: center; font-family: 'Paperozi'; font-size: 1.5em; font-weight: 700; color: var(--primary); pointer-events: none; 
  padding: 5px; border: 1px solid #afdae9; border-radius: 20px;
  &::before {content: ''; width: 30px; height: 30px; border-radius: 50%; background: url(../images/icon.png) #cfe5ec -60px -30px / auto 60px  no-repeat;}
} 

header.scl { height: 100px; top: 0; border-bottom: 1px solid var(--line); overflow: hidden;}
header.scl:has(nav:hover) {overflow: visible;}
header.scl .header_top {height: 60px;}
header.scl nav dl dt {height: 40px;}

.header_top {display: flex; align-items: center; justify-content: space-between;	gap: 12px; width: 100%; height: 100px; transition: height 360ms cubic-bezier(0.4, 0, 0.2, 1);}
.header_top li {position: relative; min-width: 120px;}
.header_top li:last-child {text-align: right;}
.header_top .logo {width: 120px;}
.header_top .logo img { width: 100%; max-height: 50px;}

#planUnreadCount {justify-content: center; align-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; font-size: 14px;
  position: absolute; background-color: #fff; z-index: 10; top: 50%; right: 0; transform: translate(50%, -50%);}

.container {max-width: var(--container); margin:0 auto; padding: 0;}

.btn_menu {display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500;}
.mbi, .mbi-menu {display: none;}
.btn-back {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-indent: -100px; border: none; background-color: transparent; overflow: hidden;
  &::before {content: ''; width: 30px; height: 30px; background: url(../images/icon.png) 0 -30px / auto 60px  no-repeat;}
}
.emp, .prime {color: var(--primary);}


nav {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; border: 1px solid var(--line); background: var(--surface);}

nav dl {font-size: 14px; text-align: center; overflow: hidden; font-family: 'Paperozi', sans-serif;}
nav dl a {font-size: 16px;}
nav dl a:hover {color: var(--primary); }
nav dl.on dt::before {background: var(--primary);}
nav dl dt {position: relative; height: 50px; display: flex; justify-content: center; align-items: center; font-weight: 500;}
nav dl dt::before {position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 100%; height: 2px; background: var(--line);}
nav dl dt::after {position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 100%; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform 220ms ease;}
nav dl:hover dt::after, nav dl dt:focus-within::after {transform: scaleX(1);}

nav dl dd {position: relative; height: 40px; display: flex; justify-content: center; align-items: center;}
nav dl dd + dd {	border-top: 1px solid var(--line);}

main { background: var(--bg); padding-top: 100px;}
main.sub {padding: 0;}
main article { max-width: var(--container); margin:0 auto; padding: 0 10px;}


.home .title {height: 40px; font-size: 30px; font-family: 'NanumSquare'; color: var(--primary);	margin-bottom: 30px;}
.home section .container {padding: 50px 0 50px;}

.sub section {padding: 80px 0;}
.sub .title {font-size: 30px; font-family: 'NanumSquare'; color: var(--primary);	margin-bottom: 30px;}
.sub.view .title {text-align: center; color: var(--dark); padding: 10px 0; margin-bottom: 5px; background: var(--container);}

.mypage .content-wrap {padding: 30px; border: 1px solid var(--line); background: var(--surface);}
.mypage-menu {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;}
.mypage-menu-item {display: flex; align-items: center; justify-content: space-between; min-height: 110px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;}
.mypage-menu-item:hover, .mypage-menu-item:focus-visible {border-color: var(--primary); background: var(--surface); transform: translateY(-3px); outline: none;}
.mypage-menu-label {font-family: 'Paperozi', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4;}
.mypage-menu-arrow {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 18px; transition: transform 180ms ease;}
.mypage-menu-item:hover .mypage-menu-arrow, .mypage-menu-item:focus-visible .mypage-menu-arrow {transform: translateX(3px);}

section.bgw {background: var(--surface);}
section.bgn {background: var(--dark); color: #fff;}


.appLink {display: flex; justify-content: center; gap: 10px;}
.appLink a {display: flex; gap: 10px; align-items: center; padding: 10px 20px 10px 10px; border-radius: 10px; background: var(--bg);}
.appLink a::before {content: ''; width: 25px; height: 25px; background: url(../images/icon.png); background-size: 50px auto;}
.appLink a.ios::before {background-position: -25px 0;}


.video-wrap .appLink a {font-size: 1.5em;; background: var(--surface);}
.video-wrap .appLink a::before {content: ''; width: 30px; height: 30px; background: url(../images/icon.png); background-size: 60px auto;}
.video-wrap .appLink a.ios::before {background-position: -30px 0;}

.event article {display: flex; gap: 20px; height: 540px;}
.event-swiper {width: 60%; border-radius: 5px; overflow: hidden;}
.event-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

.event-banner {display: flex; flex-wrap: wrap; width: calc(40% - 20px); gap: 10px; font-family: 'Paperozi'; font-weight: 700; font-size: 2.4em;color: var(--dark); line-height: 1; }
.event-banner a {width: calc(50% - 5px); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-light); border: 1px solid var(--line); }
.event-banner a p {display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;}
.event-banner a span {color: var(--primary);}
.event-banner a:hover {background: url(../images/quick_bg.jpg); background-size: cover;}
.event-banner a:hover p {color: #fff;}
.event-banner a:hover span {color: #98eeff;}
.event-banner a:hover label {background-color: var(--primary); }
.event-banner a:hover label::after {filter: brightness(100);}

.event-banner a::before {content: ''; width: 60px; height: 60px; background-image: url(../images/quick_icon.png); background-size: auto 120px;}
.event-banner a:nth-child(1)::before {background-position: 0 0;}
.event-banner a:nth-child(2)::before {background-position: 60px 0;}
.event-banner a:nth-child(3)::before {background-position: 0 60px;}
.event-banner a:nth-child(4)::before {background-position: 60px 60px;}
.event-banner label {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #ebf2fc;}
.event-banner label::after {content: ''; width: 25px; height: 25px; background-image: url(../images/icon.png); background-size: auto 50px; background-position: -25px -25px;}


@keyframes eventBannerFlipUp {
  0% {transform: rotateX(90deg) translateY(12px); color: var(--text); opacity: 0.65;} 
  100% {transform: rotateX(0deg) translateY(0); color: var(--primary); opacity: 1;}
}

.issue {position: relative;}

.issue-grid {background: #ffffff; border: 1px solid var(--line); padding: 2px; overflow: hidden;}
.issue-grid ul { position: relative; display: block; width: 100%; height: inherit; overflow: hidden;}

.issue-item { position: absolute; left: 0; top: 0; min-width: 0;}
.issue-item:hover {border: 1px solid #0b1213;} 
.issue-item a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 8px; text-align: center; color: #fff;}
.issue-item strong {display: block; font-size: 18px; font-weight: 700; overflow: hidden; white-space: normal; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.issue-item span { display: block; margin-top: 6px; font-size: 30px; font-weight: 700; white-space: nowrap;}

.issue-item.compact strong {-webkit-line-clamp: 1;}

.issue-item.compact span {margin-top: 3px;}

.issue-item.tiny a {padding: 3px;}

.issue-item.tiny span {margin-top: 0; font-size: 12px !important;}

.issue-item.up-15, .issue-item.up-14, .issue-item.up-13, .issue-item.up-12, .issue-item.up-11, .issue-item.up-10, .issue-item.up-9, .issue-item.up-8,
.issue-item.up-7 { background: #e61e26; }
.issue-item.up-6 { background: #eb3d2e; }
.issue-item.up-5 { background: #ee5136; }
.issue-item.up-4 { background: #f1643f; }
.issue-item.up-3 { background: #f57a4b; }
.issue-item.up-2 { background: #fa945f; }
.issue-item.up-1 { background: #fdad77; }
.issue-item.up-0 { background: #fbcd90; }
.issue-item.dn-0 { background: #b1cdc2; }
.issue-item.dn-1 { background: #66cdf5; }
.issue-item.dn-2 { background: #5cbcf2; }
.issue-item.dn-3 { background: #4fa9ee; }
.issue-item.dn-4 { background: #4194e9; }
.issue-item.dn-5 { background: #337be5; }
.issue-item.dn-6 { background: #265fe0; }
.issue-item.dn-7, .issue-item.dn-8, .issue-item.dn-9,
.issue-item.dn-10 { background: #1a48db; }

.issue-item.up-1 a, 
.issue-item.up-0 a,
.issue-item.dn-0 a,
.issue-item.dn-1 a {color: var(--text);}

.issue-pop {position: absolute; top: 120px; width: var(--container); background: var(--bg); display: flex; flex-direction: column; z-index: 1000;}
.issue-pop dl {display: flex; flex-direction: column; gap: 10px; height: 100%;}
.issue-pop .theme-name {font-size: 24px;}
.issue-pop dt {display: flex; justify-content: space-between;}
.issue-pop dd {position: relative; flex: 1; min-height: 0; overflow-y: auto; background: var(--surface);}


.issue-table {width: 100%;}
.issue-table thead {position: sticky; top: 0; background: var(--bg);}
.issue-table tr {border-bottom: 1px solid var(--line); }
.issue-table th {text-align: right; padding: 0 5px;}
.issue-table th.item {text-align: left;}
.issue-table td {text-align: right; padding: 0 5px;; line-height: 30px;}
.issue-table td.item {text-align: left;}

.planBox {display: flex; gap: 20px; justify-content: space-between;}
.planBox dl {display: flex; flex-direction: column; }
.planBox h2 {display: flex; flex-direction: column; font-size: 42px; line-height: 1.2em; padding: 10px 0;}
.planBox h4 {display: flex; flex-direction: column; max-width: 420px; line-height: 1.5em; font-size: 24px; padding: 10px 0;}
.planBox.charge dl {width: 50%;}
.planBox.charge ul.planSlide {
  position: relative;
  display: block;
  width: 50%;
  min-height: 480px;
}

.planMenu {display: flex; flex-direction: column; gap: 10px;}
.planMenu p {display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px; width: 320px; border-radius: 30px; transition: all 0.3s ease;}
.planMenu p label {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--primary);}
.planMenu p label::before {content: ''; width: 20px; height: 20px; background-image: url(../images/icon.png); background-position: -20px -20px; background-size: auto 40px; filter: brightness(100);}
.planMenu p.on { background: var(--bg);}

.plan.trade .trade-btn {position: relative;}
.plan.trade .trade-btn dt {margin: -15px auto 50px; text-align: center;}
.plan.trade .trade-btn dd {text-align: center; color: #fff;}
a.btn.go  {display: flex; align-items: center; justify-content: center; max-width: 480px; margin: 0 auto; font-size: 30px; padding: 5px 20px;}
a.btn.go::after {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url(../images/icon.png);
    background-position: -30px -30px;
    background-size: auto 60px;
    filter: brightness(100);
}
.btn {border: 1px solid var(--primary); padding: 2px 10px; border-radius: 5px; background: var(--primary); color: #fff !important;}


.planSlide li {
  position: absolute; top: 0; left: 0;  width: 100%; height: 100%; border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
  pointer-events: none;
}
.planSlide li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.planSlide li.on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}


.home .program-section {background-image: url(../images/program_bg.jpg); background-repeat: no-repeat; background-position: center bottom; background-size: 100% 1000px; background-color: #fff;}
.home .program-section .title {text-align: center;}
.home .program-section .planBox h2 {text-align: center; margin-bottom: 30px;}

.home .program-section .imgBox { position: relative; overflow: hidden;}
.home .program-section .imgBox img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 160ms ease-out;}

.home .trade .trade-result {position: relative; height: 550px; overflow-y: auto;}
.home .trade .trade-result th {height: 40px;}
.home .trade .trade-result td {height: 50px;}
.home .trade .trade-result thead {position: sticky; top: 0; background: var(--surface);}



.home .consult {background-color: #f2f6ff; }
.home .consult .container {position: relative; height: 540px; background-image: url(../images/home_consult.png); background-repeat: no-repeat; background-position: right -180px bottom; background-size: contain;}
.home .consult .planBox {position: absolute; top: 50%; left: 10%; flex-direction: column; transform: translateY(-50%);}
.home .consult .phone {display: flex; align-items: center; color: #2f3b84; font-weight: 800; margin-top: 20px;}
.home .consult .phone::before {content: ''; width: 40px; height: 40px; background: url(../images/icon.png) -80px -40px; background-size: auto 80px;}
.home .consult .btn {display: flex; width: 360px; align-items: center; justify-content: center; font-size: 30px; padding: 5px 20px; text-align: center;}
.home .consult .btn::after {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url(../images/icon.png);
    background-position: -30px -30px;
    background-size: auto 60px;
    filter: brightness(100);
}


.sub {min-height: calc(100vh - var(--height-top) - var(--height-bottom));}
.sub_visual {text-align: center; display: none;}
.sub_visual .title {font-size: 30px; padding: 10px 0; margin-bottom: 20px;}

.video-wrap {position: relative; max-width: 1500px; height: 900px; margin: 0 auto; background-color: #fafbfe;}
.video-wrap::before,
.video-wrap::after {content: ''; position: absolute; top: 50%; width: auto; height: 100%; aspect-ratio: 1 / 1.5; background-position: center; background-repeat: no-repeat; background-size: cover; transform: translateY(-50%);}
.video-wrap::before {left: 0; background-image: url(../images/service_01.png);}
.video-wrap::after {right: 0; background-image: url(../images/service_02.png);}
.video-top {position: relative; height: 100px;}
.video-top ul {position: absolute; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 10;} 
.video-top .title_type1 {font-weight: 800;}
.video-mid {position: relative; height: 405px; max-width: 720px; margin: 0 auto;}
.video-mid video {position: absolute; display: block; width: 100%; height: auto; border-radius: 10px; z-index: 2;}
.video-bot {position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; padding: 30px 0;}

.video-bot ul {display: flex; gap: 20px; width: 450px;}
.video-bot .video-bot-price li {flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 10px 20px; text-align: center;}
.video-bot .video-bot-price li h3 {display: flex; align-items: baseline; justify-content: center; font-size: 1.5em; font-weight: 800; padding: 5px 0;}
.video-bot .video-bot-price li h3 span {font-size: 2em; }
.video-bot .video-bot-price li p {border-top: 1px solid var(--line); padding: 5px 0;}
.video-bot .video-bot-price li:last-child {background-color: #e4effe;} 
.video-bot .video-bot-price li:last-child {border: 1px solid #bfd6f6;}
.video-bot .video-bot-price li:last-child p {border-top: 1px solid #bfd6f6;}

.video-bot .video-bot-btn li {flex: 1;}

.title-wrap {text-align: center; padding: 20px 0;}

.title_type1 {font-size: 42px; font-family: 'NanumSquare';}
.title_type2 {font-size: 30px; font-family: 'NanumSquare';}
.txt_type1 {font-size: 24px; opacity: .75;}
.txt_type2 {font-size: 18px; opacity: .75;}


/* 이용방법 */
.video {position: fixed; width: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); left: 50%; z-index: 110;}

.hidden {display: none;}
.thumbnail {border: none; background-color: transparent;}

.video_header { margin-bottom: 5px; text-align: right;}
.video_inner {width: 100%;}
.video.video_pop_area {z-index: 120;}
.video_dim_box { position: fixed; left: 0; top: 0;width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100;}


.portfolio {position: relative; max-width: 1500px; height: 700px; margin: 0 auto; background-color: #fcfdfe;}
.portfolio::before,
.portfolio::after {content: ''; position: absolute; top: 50%; width: auto; height: 100%; aspect-ratio: 1 / 1; background-position: center; background-repeat: no-repeat; background-size: cover; transform: translateY(-50%);}
.portfolio::before {left: 0; background-image: url(../images/svcPay22.png);}
.portfolio::after {right: 0; background-image: url(../images/svcPay23.png);}

.portfolio article {position: absolute; top: 80px; left: 50%; width: 1200px; transform: translateX(-50%); z-index: 10;}
.portfolio .title-wrap label {display: block; margin-bottom: 10px; color: var(--muted);}
.portfolio-wrap {display: flex; align-items: center; gap: 20px;}
.portfolio-chart { width: 60%; margin: 0 auto;}
.portfolio-chart img { display: block; width: 100%; height: 100%; object-fit: contain;}

.chart-background { fill: #edf1f7; stroke: #ccc; stroke-width: 3;}
.chart-hole { fill: #fff;}
.chart-slice { stroke: #fff; stroke-width: 2;}
.chart-label { fill: #fff; text-anchor: middle; dominant-baseline: middle; font-size: 24px; font-weight: 600; opacity: 0;  transition: opacity 0.4s ease; pointer-events: none;}

.chart-label.show {opacity: 1;}
.chart-label .percent { font-size: 20px; font-weight: 400;}

.portfolio-text { font-size: 24px; display: flex; flex-direction: column; gap: 10px;}
.portfolio-text dt {font-weight: 700;}

.easy_cube .title-wrap {margin-bottom: 30px;}
.easy_cube_list {display: flex; flex-direction: column; gap: 30px;}
.easy_cube_list dl {display: flex; align-items: center; height: 450px; background-color: #fefdfd; color: var(--text); border-radius: 15px; background-size: contain; background-repeat: no-repeat; background-position: bottom right;}
.easy_cube_list dl:nth-child(1) {background-image: url(../images/svcPay11.png);}
.easy_cube_list dl:nth-child(2) {background-image: url(../images/svcPay12.png);}
.easy_cube_list dl:nth-child(3) {background-image: url(../images/svcPay13.png);}
.easy_cube_list dl:nth-child(4) {background-image: url(../images/svcPay14.png);}
.easy_cube_list dl dt { margin-left: 10%; width: 33%;}
.easy_cube_list dl dt label {display: inline-block; min-width: 180px; padding: 5px 20px; text-align: center; border-radius: 20px; font-size: large; color: var(--primary); margin-bottom: 30px; background: #e3f0fd;}
.easy_cube_list dl dt h3 {font-size: 36px; word-break: keep-all; margin-bottom: 30px;}
.easy_cube_list dl dt p { font-size: 24px; word-break: keep-all;}

.price-list {display: flex; gap: 30px;}
.price-list .price-item {display: flex; flex-direction: column; align-items: center; flex: 1; padding: 30px; background: var(--bg); color: var(--text); border-radius: 15px;}
.price-list .price-item dt {font-size: 24px;}
.price-list .price-item dd {font-size: 30px; font-weight: 700;}

.price .consult {display: flex; flex-direction: column;}
.price .consult ul {display: flex; align-items: center; gap: 20px;}
.price .consult button {width: 200px; height: 100px; border: none; font-size: 18px; border-radius: 10px; background: var(--bg);}


/* 유료플랜 */
.plan_wrap {display: flex; justify-content: center; flex-direction: column; gap: 20px; padding: 10px; margin-bottom: 30px; border: 1px solid var(--line); background: var(--surface);}
.plan_box { display: flex; justify-content: center; flex-direction: column; gap: 20px;  }
.plan_box dt { padding: 5px 0; background: var(--bg);}
.plan_box dt h2 {font-size: 42px; text-align: center;}
.plan_box dd p {font-size: 30px; text-align: center;}
.plan_box dd u {text-decoration: none}
.plan_box input { width: 180px; font-size: 30px; text-align: right; border: none; }

.plan_box .btn_area {text-align: center; margin-bottom: 20px;}
.plan_box .btn_area button { border: none; border-radius: 15px; padding: 10px 15px; color: #fff; font-size: 18px; background: var(--primary);}

/* 무료서비스 */
.surface {background: #fdfdfe;}

.svc_free {}

.free-top {max-width: 960px; margin: 0 auto; padding-top: 50px;}
.free-top dl {position: relative; justify-content:flex-start;  padding: 50px 0;}
.free-top dl dt {position: relative; margin-bottom: 50px; padding-bottom: 30px;}
.free-top dl dt h2 {font-weight: 800;}
.free-top dl dt::after {content: ''; display: block; width: 60px; height: 4px; position: absolute; bottom: 0; left: 0; background-color: var(--primary);}
.free-top dl dd h4 {padding: 0; font-weight: 800;}
.free-top dl dd p {font-size: 24px;}
.free-top dl:has(.phone) {padding: 0;}
.free-top .phone {display: flex; align-items: center; justify-content: center; height: 640px; }
.free-top .phone img { width: 100%; height: 100%; object-fit: contain;}

.cube-guide {display: flex; flex-direction: column; gap: 50px; margin-bottom: 50px;} 
.cube-guide-box {display: flex; min-height: 240px; gap: 50px;}
.cube-guide-box ul {width: 50%; display: flex; justify-content: flex-end;}
.cube-guide-box dl {width: calc(50% - 50px);}
.cube-guide-box dl::before {content: ''; display: block; width: 1px; position: absolute; top: 150px; bottom: -50px; background-color: var(--muted);}
.cube-guide-box:last-child dl::before {display: none;}
.cube-guide-box dl dt {position: relative; display: flex; align-items: center; gap: 30px; font-size: 30px; padding-top: 50px;}
.cube-guide-box dl dt label { position: relative; display: flex; justify-content: center; align-items: center; margin-left: -40px; width: 80px; height: 80px; border-radius: 50%;
  font-size: 30px; font-weight: 800; color: var(--primary); background-color: #e6f1fe;}
.cube-guide-box dl dd {padding-left: 70px; word-break: keep-all;}

.table-info {margin-bottom: 15px; color: #999; font-size: 13px;}

.table-tab {margin-bottom: 18px;}
.table-tab ul {display: inline-flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);}
.table-tab li {min-width: 98px; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;}
.table-tab li:hover {background: #eef3ff; color: #315ed8;}
.table-tab li.active {background: var(--primary); color: #fff;}

.trade-result table {width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--muted); background: var(--surface);}
.trade-result th, .trade-result td {padding: 8px 10px; border-bottom: 1px solid #ddd; text-align: center;}
.trade-result th {color: #666; font-size: 13px; font-weight: 500;}
.trade-result td {font-size: 14px; font-weight: 600;}
.trade-result .profit {color: var(--red);}
.trade-result .day h3 {font-size: 42px; line-height: 1;}
.trade-result .day span {color: var(--muted);}
.trade-result .subject {text-align: left;}
.trade-result .subject h4 {font-size: 18px; line-height: 1.2;}
.trade-result .subject p {color: var(--muted); display: none;}
.trade-result .subject.off p { display: block;}
.trade-result .adm button {width: auto; height: 28px; padding: 0 10px; border: 0; background: var(--muted); cursor: pointer;}

.scd .freeWrap { position: fixed; top: 100px;  left: 0; width: 40%; height: calc(100% - 100px); transition: width 360ms ease, height 360ms ease; background: var(--surface); z-index: 10;}
.scd .container:has(.freeWrap) {max-width: 100%; margin: 0; margin-left: 40%; border-left: 1px solid var(--line); transition: max-width 360ms ease, margin 360ms ease;}
.scd .view section {padding: 0;}
.scd .view .inner { background: var(--bg);}
.scd .view .comment {min-height: 1200px; justify-content: flex-end; }
.scd .board-footer-btn button {border-color: var(--primary); background: var(--primary); color: #fff;}
.scd footer {position: fixed; bottom: -360px; transition: bottom 360ms ease;}

.freeWrap .ytb {margin-bottom: 30px;}

.plan_write_box {position: relative; width: 100%; height: 400px; min-height: 220px; max-height: 80vh; overflow: hidden; resize: vertical; background: var(--bg);}
.plan-write-resize-handle {position: absolute; top: 0; left: 0; width: 100%; z-index: 1;}
.plan_write_box .ql-container {height: calc(100% - 70px); background: var(--surface);}
.plan_write_box .ql-container .ql-editor {height: 100%; overflow-y: auto;}

.comment {display: flex; flex-direction: column; gap: 10px;}
.tail {padding: 10px 15px 15px; line-height: 1.5em; border: 1px solid var(--line); border-radius: 20px; background: var(--surface);} 
.tail .time {display: flex; align-items: center; margin-bottom: 10px; gap: 10px; color: var(--muted);}
.tail .time::before {content: ''; width: 50px; height: 50px; border-radius: 50%; background: url(../images/logo.svg) #e7edf6 center no-repeat; background-size: 44px auto;}
.tail .time label {color: var(--text);}

/* Program */
.program.home .program-section { background-image: url(../images/program_bg2.jpg); background-size: cover; background-color: transparent;}
.program .pro02 { background-image: url(../images/pro21.jpg); background-size: cover; background-color: transparent;}

.program.sub .pro03 {
  box-sizing: border-box;
  height: 900px;
  padding: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.program.sub .pro03::-webkit-scrollbar {
  display: none;
}
.program.sub .pro03 article {
  padding: 30px 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.program.sub .pro04 {
  box-sizing: border-box;
  height: 900px;
  padding: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.program.sub .pro04::-webkit-scrollbar {
  display: none;
}
.program.sub .pro04 article {
  box-sizing: border-box;
  height: 100%;
  padding: 30px 10px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.pro-concept {display: flex; justify-content: center; gap: 50px; margin-bottom: 50px;}
.pro-concept dl {flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 0 20px 40px; background: var(--surface);}
.pro-concept dl::before {content: ''; width: 200px; height: 200px; background-image: url(../images/pro_ico21.png); background-size: auto 200px;}
.pro-concept dl dt {font-size: 24px; font-weight: 800; margin-top: -30px;}
.pro-concept dl dd {font-size: 18px;}
.pro-concept dl:nth-child(2)::before {background-position: -200px 0;} 
.pro-concept dl:nth-child(3)::before {background-position: -400px 0;} 

.pro03 { position: relative; height: auto; background: url(../images/tri_bg21.jpg) #00112d center / cover no-repeat;}

.media {width: 640px; margin: 0 auto;}

.pro04-box {width: 1000px; margin: 0 auto;}

.sub-top {margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;}
.sub-top label {padding: 5px 15px; border-radius: 15px; background: #0d74fe80;}
.sub-top h2 {font-size: 54px; font-weight: 800; text-align: center;}
.sub-top h4 {font-size: 24px; color: var(--muted);}

.dark {color: #fff;}
.dark .prime { color: #1d9efd; background: linear-gradient(180deg, #1d9efd, #017bfb);
   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}

/* trial */
.trial article {display: flex; align-items: center; height: 100%; gap: 50px;}
.tri-01 {position: relative; height: 800px; color: #fff; background: url(../images/tri_bg01.jpg) #00050f center bottom -50px / contain no-repeat;}

.tri-wrap {margin-left: 5%;}
.tri-wrap dt {display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-bottom: 50px;}
.tri-wrap dt h2 {font-size: 54px; font-weight: 800;}
.tri-wrap dt h3 {font-size: 24px;}
.tri-wrap dd {display: flex; flex-direction: column; justify-content: center; gap: 20px; font-size: 24px; line-height: 1.2;}
.tri-wrap dd a.btn {margin: 0;}



.tri-02 {position: relative; height: 800px; background: url(../images/tri_bg11.png) #f4f6fc right 50px bottom / auto 90% no-repeat;}
.tri-02 article {flex-direction: column; align-items: flex-start;}

.tri-box {margin-left: 5%; display: flex; flex-direction: column; gap: 20px;}
.tri-box div {display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 20px; background-color: var(--surface);}
.tri-box div::before { content: ''; width: 60px; height: 60px; background-image: url(../images/tri_ico11.png); background-repeat: no-repeat; background-size:  auto 120px;}
.tri-box div:nth-child(2)::before {background-position: 0 -60px;}
.tri-box div:nth-child(3)::before {background-position: -60px -60px;}
.tri-box div dt {font-size: 24px; font-weight: 800;}
.tri-box div dt span {color: var(--primary);}
.tri-box div dd {color: var(--muted);}

.tri-03 {position: relative;  height: 800px; background: url(../images/tri_bg21.jpg) #00112d center / contain no-repeat;}
.tri-03 article {justify-content: center; flex-direction: column; color: #fff;}
.media {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 32px;
    position: relative;
    z-index: 1;
    --space-shadow-blur: 56px;
    box-shadow: 16px 0 var(--space-shadow-blur) -12px #0567cc, -16px 0 var(--space-shadow-blur) -12px #003088;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    border-image: none;
    border-radius: 10px;
    overflow: clip;
    animation: 3.5s ease-in-out 0s infinite normal none running glow-a5fdpAr6;
    background: linear-gradient(285deg, rgb(5, 100, 200), rgb(17, 190, 245)) border-box;
}




/* view */
.view .inner {min-height: 50vh; padding: 10px; border-top: 1px solid var(--muted); background:  var(--surface);}
.view .inner img {max-width: 100%;}

.post-nav {display: flex; align-items: flex-start; gap: 8px; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface);}
.post-nav-item {display: flex; align-items: center; gap: 8px; width: 100%; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); padding: 8px;}
.post-nav-label {font-weight: 700; color: var(--text);}
.post-nav-link {color: var(--text); text-decoration: none; transition: color 160ms ease;}
.post-nav-link:hover {color: var(--primary);}

.board-footer-btn { text-align: right; margin-top: 24px;}

.ytb {position: relative; width: 100%; padding-top: 56.25%;}
.ytb iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}

.attach-list-view {padding: 10px; border-top: 1px solid var(--line);}
.attach-list-view a {color: var(--primary);}

.attach-row { padding: 4px 0; font-size: 13px; display: flex; align-items: center; min-width: 0; }
#write-file-selected { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary, #666); }
#write-file-selected .file-name { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
#write-file-selected .remove-file { flex-shrink: 0; color: #e5484d; cursor: pointer; text-decoration: underline; }
.bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.attach-row { flex: 1; }
.btn-area { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }

.tail-attach { margin-top: 6px; }
.tail-attach a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f0f2f5; border: 1px solid var(--line); border-radius: 14px; color: var(--text, #333); font-size: 12px; text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tail-attach a::before {  flex-shrink: 0; font-size: 12px; }
.tail-attach a:hover { background: #e4e6ea; }

/* page */
.page {margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px;}

.page button {border: 1px solid var(--line); background: var(--surface); color: #5f6d82; font-weight: 700; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;}
.page button:hover {border-color: #a9bbdd; background: #f3f7ff; color: #315ed8;}

.page .page-nav {min-width: 68px; height: 30px; padding: 0 14px; border-radius: 18px; font-size: 13px;}

.page .page-list {display: flex; align-items: center; gap: 8px;}
.page .page-list button {width: 30px; height: 30px; border-radius: 50%; font-size: 14px;}
.page .page-list button.active {border-color: var(--primary); background: var(--primary); color: #fff;}
.page .page-list button.active:hover {border-color: var(--primary); background: var(--primary); color: #fff;}

.list table {width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--muted); background: var(--surface);}
.list th {padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: center; background: var(--bg-light);}
.list td {padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: center;}



/* login */
body:has(.login) header, 
body:has(.login) footer { display: none; }
.login {height: 100dvh;}

.login input {
  background-color: #fff;
}


.login .logo {width: 150px; height: 80px; margin: 0 auto; background: url(../images/logo.png) no-repeat; background-size: contain;}
.login .container { max-width: 480px; margin: 0 auto; padding: 60px 10px; }
.login-top {display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; margin-bottom: 20px;}

.login-box {background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px 12px;}
.login-box h2, .login-box h3 {color: #2f3f56;}
.login-box ul {margin-bottom: 20px;}

.login-form {display: flex; flex-direction: column; gap: 10px; padding: 0 24px;}
.login-form li {display: flex; flex-direction: column; gap: 5px;}
.login-form li label {font-size: 12px;}
.login-form input {height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;}

.quick-auth {display: none;}
.quick-auth p {margin-bottom: 12px; color: var(--muted);}

.btn_login, 
.btn_quick {width: 100%; height: 44px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer;}
.btn_quick {background: var(--muted);}


footer {background: #f6f8fb; border-top: 1px solid #e2e8f1; padding: 26px 0 24px; color: var(--muted); font-size: 16px; line-height: 1.65;}

footer .bottom-link {display: flex; align-items: center; gap: 46px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid #e2e8f1;}
footer .bottom-link a {color: var(--muted); white-space: nowrap;}
footer .bottom-link a:hover {color: #2e5eff;}

footer .info {display: grid; grid-template-columns: minmax(280px, 1fr) minmax(520px, 1.4fr); gap: 38px; padding-bottom: 18px;}
footer .info dt {font-size: 16px; font-weight: 700; line-height: 1.2; color: #2f3f56; margin-bottom: 12px;}
footer .info dd {font-size: 14px; line-height: 1.45; color: #99a6b5;}
footer .info dd span + span::before {content: "|"; display: inline-block; margin: 0 9px; color: #c0c9d5;}

footer .container > div:last-child p {font-size: 13px; color: #a5b0be;}


/* home popup */

#popupLayerWrap { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9999; }
.popup-layer { position: fixed; width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); border-radius: 8px; overflow: hidden; background: #fff; }
.popup-layer img { display: block; width: 100%; height: auto; }
.popup-layer .popup-actions { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #222; }
.popup-layer .popup-actions button { background: none; border: none; color: #fff; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.popup-layer .popup-actions button:hover { text-decoration: underline; }

.content-box {width: 100%; border-top: 1px solid var(--muted); padding: 15px 30px; background: var(--surface);}
.content-box h4 {font-size: 18px;}
.content-box p {margin-bottom: 24px;}