/* =========================================================
* MakeMonLab Academy Theme — academy.css (enhancement layer)
* Loaded AFTER main.css. Overrides are scoped; no blanket !important.
*
* Sections:
* 1. Demo banner (top) + footer demo notice
* 2. Hero background image adapter
* 3. Page hero background image adapter
* 4. Floating CTA (scroll-reveal, kakao/phone/consult)
* 5. Event banner (legacy)
* 6. Success cases grid
* 7. Lead magnet section
* 8. Location map enhanced
* 9. Blog category filter chips
* 10. Testimonial list title
* 11. Responsive
* =========================================================*/
/* ---------- 1. Demo banner + footer demo notice ------------- */
.demo-banner {
background: linear-gradient(90deg, #0f1b2d 0%, #1e3a5f 100%);
color: #fff;
padding: 10px 0;
font-size: 12.5px;
border-bottom: 2px solid #d4a843;
position: relative;
z-index: 101;
}
.demo-banner-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
text-align: center;
}
.demo-badge {
background: #d4a843;
color: #131313;
padding: 3px 10px;
border-radius: 3px;
font-weight: 800;
font-size: 10px;
letter-spacing: 1.2px;
flex-shrink: 0;
}
.demo-text {
color: rgba(255, 255, 255, 0.92);
line-height: 1.45;
}
.demo-text strong { color: #d4a843; font-weight: 700; }
.demo-link {
color: #d4a843;
text-decoration: none;
font-weight: 700;
white-space: nowrap;
border-bottom: 1px dotted rgba(212, 168, 67, 0.6);
padding-bottom: 1px;
transition: color .15s, border-color .15s;
}
.demo-link:hover { color: #fff; border-bottom-color: #fff; }
.footer-demo-notice {
background: rgba(212, 168, 67, 0.08);
border-top: 1px solid rgba(212, 168, 67, 0.25);
padding: 18px 0;
font-size: 12.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
}
.footer-demo-notice p { margin: 0; }
.footer-demo-notice strong { color: #d4a843; margin-right: 6px; }
.footer-demo-notice a { color: #d4a843; text-decoration: underline; }
.footer-demo-notice a:hover { color: #fff; }
/* ---------- 2. Hero with background image ------------------- */
.hero.hero-with-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1e3a5f;
min-height: 600px;
padding-top: 96px;
padding-bottom: 120px;
}
.hero.hero-with-bg .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(30, 58, 95, 0.88) 0%, rgba(30, 58, 95, 0.55) 55%, rgba(212, 168, 67, 0.28) 100%);
z-index: 1;
pointer-events: none;
}
.hero.hero-with-bg .container { position: relative; z-index: 2; }
.hero.hero-with-bg .hero-eyebrow {
background: rgba(255, 255, 255, 0.18);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero.hero-with-bg .hero-title,
.hero.hero-with-bg .hero-title .accent {
color: #fff;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.hero.hero-with-bg .hero-title .accent { color: #f2d375; }
.hero.hero-with-bg .hero-desc { color: rgba(255, 255, 255, 0.92); }
.hero.hero-with-bg .hero-badges { color: rgba(255, 255, 255, 0.85); }
.hero.hero-with-bg .hero-badges .ico { color: #6ee7b7; }
.hero.hero-with-bg .btn-outline {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.hero.hero-with-bg .btn-outline:hover {
background: #fff;
color: #1e3a5f;
border-color: #fff;
}
.hero.hero-with-bg .hero-card {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ---------- 3. Page hero with background image -------------- */
.page-hero-with-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1e3a5f;
padding: 120px 0 80px;
position: relative;
text-align: center;
}
.page-hero-with-bg .page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(30, 58, 95, 0.78) 0%, rgba(15, 27, 45, 0.70) 100%);
z-index: 1;
pointer-events: none;
}
.page-hero-with-bg .container { position: relative; z-index: 2; }
.page-hero-with-bg .page-hero-title {
color: #fff;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.page-hero-with-bg .page-hero-sub { color: rgba(255, 255, 255, 0.88); }
.page-hero-with-bg .page-hero-badge {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
/* page-hero without bg still needs centered text on inner pages */
.page-hero { text-align: center; }
.page-hero .page-hero-sub { margin-left: auto; margin-right: auto; }
/* ---------- 4. Floating CTA --------------------------------- */
.floating-cta {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9000;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
transform: translateY(16px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
.floating-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.floating-btn {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
color: #fff;
background: #1e3a5f;
transition: transform .18s ease, box-shadow .18s ease;
position: relative;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.floating-btn:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.floating-btn-kakao { background: #FEE500; color: #3C1E1E; }
.floating-btn-phone { background: #10b981; }
.floating-btn-consult { background: #d4a843; color: #131313; }
.floating-btn-icon {
width: 22px;
height: 22px;
display: block;
margin-bottom: 2px;
flex-shrink: 0;
}
.floating-btn-label {
font-size: 9px;
letter-spacing: 0.3px;
display: block;
}
.floating-btn[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: #0f172a;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
.floating-btn:hover[data-tooltip]::before { opacity: 1; }
/* ---------- 5. Event banner (legacy, optional) -------------- */
.event-banner {
background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
color: #fff;
position: relative;
z-index: 10;
}
.event-banner.is-hidden { display: none; }
.event-banner-inner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
flex-wrap: wrap;
}
.event-banner-badge {
background: rgba(0, 0, 0, 0.28);
padding: 3px 8px;
border-radius: 4px;
font-weight: 700;
font-size: 11px;
letter-spacing: .8px;
}
.event-banner-copy { margin: 0; flex: 1 1 auto; font-size: 14px; }
.event-banner-cta { color: #fff; text-decoration: underline; font-weight: 600; font-size: 14px; }
.event-banner-close { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 4px; display: flex; align-items: center; }
.event-banner-close svg { width: 18px; height: 18px; }
/* ---------- 6. Success cases -------------------------------- */
.success-cases { padding: 48px 0; }
.success-year-block { margin-bottom: 32px; }
.success-year-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
border-left: 4px solid #1e3a5f;
padding-left: 12px;
margin-bottom: 16px;
}
.success-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.success-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 6px; transition: transform .18s ease, box-shadow .18s ease; }
.success-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.success-card-univ { font-size: 12px; color: #1e3a5f; font-weight: 700; letter-spacing: .5px; }
.success-card-dept { font-size: 18px; color: #0f172a; font-weight: 700; }
.success-card-name { font-size: 13px; color: #6b7280; }
.success-note { text-align: center; color: #6b7280; font-size: 13px; margin-top: 24px; }
/* ---------- 7. Lead magnet ---------------------------------- */
.lead-magnet { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); color: #fff; padding: 56px 0; }
.lead-magnet-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.lead-magnet-copy h2 { font-size: 28px; color: #fff; margin: 12px 0 12px; line-height: 1.3; }
.lead-magnet-copy p { color: rgba(255, 255, 255, 0.88); margin-bottom: 16px; }
.lead-magnet-badge { display: inline-block; background: #fbbf24; color: #0f172a; padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.lead-magnet-list { list-style: none; padding: 0; margin: 0; }
.lead-magnet-list li { padding-left: 22px; position: relative; margin-bottom: 8px; color: rgba(255, 255, 255, 0.9); }
.lead-magnet-list li::before { content: "\2713"; position: absolute; left: 0; color: #fbbf24; font-weight: 700; }
.lead-magnet-form { background: #fff; color: #0f172a; padding: 28px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.lead-magnet-form label { display: block; font-weight: 600; margin-bottom: 8px; color: #0f172a; }
.lead-magnet-form input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 12px; font-size: 15px; }
.lead-magnet-note { font-size: 12px; color: #6b7280; margin-top: 10px; text-align: center; }
.lead-magnet-success h3 { color: #0f172a; margin: 0 0 8px; font-size: 20px; }
.lead-magnet-success p { color: #4b5563; margin: 0 0 16px; }
/* ---------- 8. Enhanced location map ------------------------ */
.location-map-wrap { position: relative; margin-bottom: 24px; }
.location-map-wrap iframe { width: 100%; height: 420px; border: 0; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.location-map-overlay { position: absolute; bottom: 20px; left: 20px; background: #fff; padding: 16px 20px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-width: 320px; }
.location-map-overlay h3 { margin: 0 0 6px; font-size: 16px; color: #0f172a; }
.location-map-overlay p { margin: 0 0 4px; font-size: 13px; color: #4b5563; }
.location-map-overlay .btn { margin-top: 10px; }
/* ---------- 9. Blog category filter ------------------------- */
.blog-cat-filter {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 32px;
justify-content: center;
}
.blog-cat-chip {
display: inline-block;
padding: 8px 16px;
border: 1.5px solid #e5e7eb;
background: #fff;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: #4b5563;
transition: all .15s ease;
}
.blog-cat-chip:hover { border-color: #1e3a5f; color: #1e3a5f; }
.blog-cat-chip.is-active { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
/* ---------- 10. Testimonial list title ---------------------- */
.testimonial-title {
font-size: 1.15rem;
font-family: "Playfair Display", Georgia, serif;
color: #0f172a;
margin: 0 0 .6em;
line-height: 1.35;
}
/* ---------- 11. Responsive ---------------------------------- */
@media (max-width: 768px) {
.demo-banner { font-size: 11.5px; padding: 8px 0; }
.demo-banner-inner { gap: 8px; }
.demo-badge { font-size: 9px; padding: 2px 7px; }
.floating-cta { right: 12px; bottom: 12px; gap: 8px; }
.floating-btn { width: 50px; height: 50px; }
.floating-btn-icon { width: 20px; height: 20px; }
.floating-btn-label { font-size: 8.5px; }
.floating-btn[data-tooltip]::before { display: none; }
.event-banner-inner { font-size: 12px; gap: 8px; }
.event-banner-copy { font-size: 12px; }
.lead-magnet-inner { grid-template-columns: 1fr; gap: 24px; }
.lead-magnet-copy h2 { font-size: 22px; }
.location-map-wrap iframe { height: 320px; }
.location-map-overlay { position: static; max-width: none; margin-top: 12px; }
.hero.hero-with-bg { min-height: 480px; padding-top: 56px; padding-bottom: 72px; }
.page-hero-with-bg { padding: 72px 0 56px; }
}
@media (max-width: 480px) {
.demo-banner-inner { flex-direction: column; gap: 6px; }
.demo-link { font-size: 11.5px; }
}
/* =========================================================
* 12. Mobile responsive guardrails (2026-04-20)
* Prevent any overflow-x on mobile by enforcing safe
* width/max-width on root + containers + media + grids.
* ========================================================= */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
.hero-inner, .section { overflow-x: hidden; }
/* .container keeps original max-width */
img, video, iframe {
max-width: 100%;
height: auto;
}
/* Grid auto-shrink safety — min(260px, 100%) lets narrow
* viewports collapse to 1 column without forcing horizontal scroll. */
.class-grid,
.teacher-grid,
.teacher-grid-full,
.blog-grid,
.testimonial-grid,
.review-grid,
.values-grid,
.tuition-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
gap: 16px;
max-width: 100%;
}
/* Mobile (<=640px): single-column grids + size reductions */
@media (max-width: 640px) {
.class-grid,
.teacher-grid,
.teacher-grid-full,
.blog-grid,
.testimonial-grid,
.review-grid,
.values-grid,
.tuition-grid,
.location-grid,
.tuition-extras-grid {
grid-template-columns: 1fr !important;
}
/* Footer main grid: force single column on mobile
* (main.css default is 4-column, not overridden below 768px) */
.footer-main,
.footer-grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
/* Hero on mobile — constrain aspect + prefer background-position
* that keeps the subject (right-anchored person) visible. */
.hero.hero-with-bg {
aspect-ratio: auto;
min-height: 460px;
background-size: cover;
background-position: right center;
}
/* Demo banner / top bar wrap */
.demo-banner-inner,
.topbar-inner {
flex-wrap: wrap;
gap: 8px;
padding: 8px 16px;
}
.demo-text {
font-size: 11px;
line-height: 1.4;
}
/* Hero copy padding + title size */
.hero-copy { padding: 20px 16px 0; }
.hero-title { font-size: 28px; line-height: 1.25; }
/* Stats floating cards: hero-visual is already display:none via main.css,
* but in case variants appear, force static+centered */
.hero-stats {
position: static;
margin-top: 20px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* Section / container horizontal gutters */
.section, .container {
padding-left: 16px;
padding-right: 16px;
}
/* Tables: horizontal scroll fallback (tuition prices, etc.) */
table {
display: block;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
}
/* Consultation form: single column */
.consult-layout,
.consult-inner {
grid-template-columns: 1fr !important;
}
/* Blog thumbnails: force 16:9 crop for consistent card height */
.blog-card-thumb img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
}
/* FAQ items: looser padding */
.faq-item { padding: 14px 16px; }
/* Floating CTA — smaller tap targets on mobile */
.floating-btn { width: 48px; height: 48px; }
/* Testimonials slider dot gap */
.testimonial-dots { gap: 8px; }
/* Footer map iframe fits container */
.footer-map iframe { width: 100%; height: 240px; }
}
/* Very small screens <=375px (iPhone SE / older Android) */
@media (max-width: 375px) {
.hero-title { font-size: 24px; }
.section-title { font-size: 22px; }
.container, .section { padding-left: 12px; padding-right: 12px; }
.floating-cta { right: 8px; bottom: 8px; }
}
/* PC: force 4 columns for main home-section grids (class/teacher/blog) */
@media (min-width: 1024px) {
.class-grid, .teacher-grid, .blog-grid, .blog-grid-home {
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* Tuition page — 3 cards, force 3 columns on PC */
@media (min-width: 1024px) {
.tuition-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.tuition-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* About page fixed-count grids */
@media (min-width: 768px) {
.values-grid, .success-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.location-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.tuition-extras-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* About page narrative sections - center align with readable max-width */
.about-story, .about-values, .about-timeline, .about-cta {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.about-story h2, .about-values h2, .about-timeline h2, .about-cta h2,
.section-title-sm {
text-align: center;
}
.about-story p {
text-align: center;
font-size: 1.05rem;
line-height: 1.75;
color: var(--ink);
}
.about-timeline {
max-width: 720px;
}
.about-cta-inner {
text-align: center;
}
/* About narrative p — force block centering inside max-width */
.about-story p,
.about-values p,
.about-timeline p,
.about-cta p {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.about-story, .about-values, .about-timeline, .about-cta {
text-align: center;
}
.about-story > *, .about-values > *, .about-timeline > *, .about-cta > * {
margin-left: auto;
margin-right: auto;
}
/* Korean-aware line break — prevent word mid-break */
body, p, li, h1, h2, h3, h4, h5, h6, .hero-copy, .page-hero-title, .page-hero-subtitle, .section-title, .card-title, .testimonial-text, .about-story, .about-values, .about-timeline, .about-cta {
word-break: keep-all;
line-break: strict;
overflow-wrap: break-word;
}
/* FAQ section — tighten top gap + widen content */
.faq-section {
padding-top: 40px !important;
padding-bottom: 56px !important;
}
.faq-inner {
max-width: 1040px !important;
}
/* ===== Agent 1: Notice + FAQ expanded (2026-04-20) ===== */
/* Notice preview section */
.notice-preview {
padding-top: 72px;
padding-bottom: 72px;
background: #fafbfc;
border-top: 1px solid #eef1f5;
border-bottom: 1px solid #eef1f5;
}
.notice-preview .section-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
text-align: left;
margin-bottom: 32px;
}
.notice-preview .section-head-text {
flex: 1 1 auto;
text-align: left;
}
.notice-preview .section-head-text .section-title {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.notice-preview .section-head-text .section-sub {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.notice-preview .section-head-action {
flex: 0 0 auto;
padding-bottom: 6px;
}
.notice-preview-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.notice-preview-card {
background: #ffffff;
border: 1px solid #e6e9ee;
border-radius: 12px;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
overflow: hidden;
}
.notice-preview-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
border-color: #3b82f6;
}
.notice-preview-link {
display: block;
padding: 22px 22px 20px;
color: inherit;
text-decoration: none;
height: 100%;
}
.notice-preview-link:hover {
text-decoration: none;
}
.notice-preview-badge {
display: inline-block;
background: #eff6ff;
color: #1d4ed8;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
margin-right: 10px;
vertical-align: middle;
}
.notice-preview-date {
display: inline-block;
color: #64748b;
font-size: 13px;
vertical-align: middle;
}
.notice-preview-title {
font-size: 17px;
line-height: 1.45;
margin: 12px 0 10px;
color: #0f172a;
font-weight: 700;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notice-preview-excerpt {
color: #475569;
font-size: 14px;
line-height: 1.6;
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notice-preview-more {
display: inline-flex;
align-items: center;
gap: 6px;
color: #1d4ed8;
font-size: 13px;
font-weight: 600;
}
.notice-preview-arrow {
transition: transform 180ms ease;
}
.notice-preview-card:hover .notice-preview-arrow {
transform: translateX(3px);
}
/* FAQ 4-category tabs */
.faq-section-expanded .faq-list {
margin-top: 0;
}
.faq-categories {
margin-top: 12px;
}
.faq-category-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 28px;
padding: 6px;
background: #f1f5f9;
border-radius: 12px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.faq-category-tab {
flex: 1 1 auto;
min-width: 140px;
background: transparent;
border: none;
padding: 11px 16px;
font-size: 14px;
font-weight: 600;
color: #475569;
cursor: pointer;
border-radius: 8px;
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
}
.faq-category-tab:hover {
color: #0f172a;
background: rgba(255, 255, 255, 0.6);
}
.faq-category-tab.is-active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.faq-category-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: #e2e8f0;
color: #64748b;
font-size: 11px;
font-weight: 700;
border-radius: 999px;
}
.faq-category-tab.is-active .faq-category-tab-count {
background: #dbeafe;
color: #1d4ed8;
}
.faq-category-panel {
display: none;
}
.faq-category-panel.is-active {
display: block;
animation: faq-panel-fade 220ms ease;
}
@keyframes faq-panel-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Tablet: 2 columns for notice */
@media (max-width: 1023px) {
.notice-preview-grid {
grid-template-columns: repeat(2, 1fr);
}
.notice-preview .section-head-row {
align-items: flex-start;
}
}
/* Mobile: 1 column, stack header action */
@media (max-width: 639px) {
.notice-preview {
padding-top: 48px;
padding-bottom: 48px;
}
.notice-preview-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.notice-preview .section-head-row {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.notice-preview .section-head-action {
padding-bottom: 0;
}
.faq-category-tabs {
gap: 4px;
padding: 4px;
}
.faq-category-tab {
min-width: 0;
flex: 1 1 45%;
padding: 9px 8px;
font-size: 13px;
}
.faq-category-tab-label {
white-space: nowrap;
}
}
/* ===== Agent 2: Gallery (2026-04-20) ===== */
.gallery-section { padding-top: 24px; padding-bottom: 64px; }
/* Filter tabs */
.gallery-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 0 auto 32px;
padding: 0 16px;
}
.gallery-filter-btn {
appearance: none;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
color: #0f172a;
padding: 10px 22px;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
line-height: 1.2;
}
.gallery-filter-btn:hover { background: #f1f5f9; }
.gallery-filter-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.gallery-filter-btn.is-active {
background: #0f172a;
color: #fff;
border-color: #0f172a;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
/* Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 1024px) {
.gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* Item card */
.gallery-item {
position: relative;
margin: 0;
padding: 0;
border-radius: 14px;
overflow: hidden;
background: #f8fafc;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item.is-hidden { display: none; }
.gallery-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.gallery-item-trigger {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
overflow: hidden;
}
.gallery-item-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.gallery-item-trigger img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform .35s ease;
}
.gallery-item:hover .gallery-item-trigger img { transform: scale(1.04); }
/* Caption overlay */
.gallery-item-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 38px 16px 14px;
color: #fff;
font-size: 0.95rem;
font-weight: 500;
text-align: left;
background: linear-gradient(to top, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0) 100%);
opacity: 0;
transform: translateY(6px);
transition: opacity .22s ease, transform .22s ease;
pointer-events: none;
word-break: keep-all;
}
.gallery-item:hover .gallery-item-caption,
.gallery-item:focus-within .gallery-item-caption {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 639px) {
.gallery-item-caption { opacity: 1; transform: none; font-size: 0.82rem; padding: 24px 10px 10px; }
}
/* Empty state */
.gallery-empty {
text-align: center;
color: #64748b;
margin: 32px 0;
font-size: 0.95rem;
}
/* Lightbox */
.gallery-lightbox {
position: fixed;
inset: 0;
background: rgba(2, 6, 23, 0.92);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: gallery-lightbox-fade .18s ease both;
}
.gallery-lightbox[hidden] { display: none; }
@keyframes gallery-lightbox-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.gallery-lightbox-inner {
margin: 0;
max-width: min(1100px, 92vw);
max-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.gallery-lightbox-img {
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
background: #0f172a;
}
.gallery-lightbox-caption {
color: #e2e8f0;
font-size: 0.95rem;
text-align: center;
max-width: 90%;
word-break: keep-all;
}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
position: absolute;
appearance: none;
border: 0;
background: rgba(15, 23, 42, 0.7);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
transition: background-color .18s ease, transform .18s ease;
line-height: 1;
}
.gallery-lightbox-close {
top: 18px;
right: 18px;
width: 44px;
height: 44px;
font-size: 1.8rem;
font-weight: 300;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
font-size: 1.5rem;
}
.gallery-lightbox-prev { left: 18px; }
.gallery-lightbox-next { right: 18px; }
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
background: rgba(37, 99, 235, 0.9);
}
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
transform: translateY(-50%) scale(1.06);
}
.gallery-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 639px) {
.gallery-lightbox { padding: 12px; }
.gallery-lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 1.6rem; }
.gallery-lightbox-prev, .gallery-lightbox-next {
width: 44px; height: 44px; font-size: 1.2rem;
}
.gallery-lightbox-prev { left: 6px; }
.gallery-lightbox-next { right: 6px; }
.gallery-lightbox-img { max-height: 72vh; }
}
/* Prefer body scroll lock when lightbox open */
body.gallery-lightbox-open { overflow: hidden; }
/* ===== /Agent 2: Gallery ===== */
/* ===== Agent 4: Inquiry + FAQ page (2026-04-20) ===== */
/* ---------- Inquiry page: layout ---------- */
.inquiry-hero {
padding-top: 56px;
padding-bottom: 80px;
}
.inquiry-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 40px;
align-items: start;
}
@media (max-width: 1024px) {
.inquiry-layout {
grid-template-columns: 1fr;
}
}
/* ---------- Inquiry form card ---------- */
.inquiry-form-col {
position: relative;
}
.inquiry-form {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 36px;
box-shadow: 0 6px 24px rgba(15, 23, 42, .04);
}
.inquiry-form-intro {
border-bottom: 1px solid #f1f5f9;
padding-bottom: 20px;
margin-bottom: 28px;
}
.inquiry-form-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 8px;
color: #0f172a;
}
.inquiry-form-lead {
font-size: 0.95rem;
color: #475569;
margin: 0;
line-height: 1.6;
}
.inquiry-fieldset {
border: 0;
padding: 0;
margin: 0 0 28px;
}
.inquiry-legend {
font-weight: 600;
font-size: 1rem;
color: #0f172a;
padding: 0;
margin-bottom: 16px;
display: block;
border-left: 3px solid #1e3a5f;
padding-left: 10px;
line-height: 1.3;
}
.inquiry-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 640px) {
.inquiry-row { grid-template-columns: 1fr; gap: 14px; }
}
.inquiry-field {
margin-bottom: 16px;
display: flex;
flex-direction: column;
}
.inquiry-row .inquiry-field { margin-bottom: 0; }
.inquiry-label {
font-size: 0.875rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 6px;
display: inline-block;
}
.inquiry-required { color: #dc2626; margin-left: 2px; }
.inquiry-input,
.inquiry-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 0.95rem;
font-family: inherit;
color: #0f172a;
background: #fff;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.inquiry-input:focus,
.inquiry-textarea:focus {
border-color: #1e3a5f;
box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
outline: none;
}
.inquiry-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.inquiry-input.has-error,
.inquiry-textarea.has-error {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}
.inquiry-error {
display: block;
font-size: 0.8125rem;
color: #dc2626;
margin-top: 6px;
min-height: 1em;
}
.inquiry-hint-row {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 6px;
font-size: 0.8125rem;
color: #64748b;
}
.inquiry-counter { white-space: nowrap; }
/* Checkbox + radio grids */
.inquiry-checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.inquiry-check,
.inquiry-radio {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
color: #1e293b;
background: #fff;
transition: all .15s;
}
.inquiry-check:hover,
.inquiry-radio:hover {
border-color: #1e3a5f;
background: #f8fafc;
}
.inquiry-check input[type="checkbox"],
.inquiry-radio input[type="radio"] {
accent-color: #1e3a5f;
flex-shrink: 0;
}
.inquiry-check input:checked + .inquiry-check-label,
.inquiry-radio input:checked + .inquiry-radio-label {
color: #1e3a5f;
font-weight: 600;
}
.inquiry-radio-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.inquiry-radio { flex: 1 1 auto; min-width: 90px; justify-content: center; }
/* Consent */
.inquiry-consent {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px 22px;
margin-bottom: 24px;
}
.inquiry-consent .inquiry-legend { margin-bottom: 14px; }
.inquiry-consent-row {
display: flex;
gap: 10px;
margin-bottom: 12px;
font-size: 0.9rem;
color: #334155;
line-height: 1.5;
cursor: pointer;
}
.inquiry-consent-row:last-of-type { margin-bottom: 0; }
.inquiry-consent-row input[type="checkbox"] {
margin-top: 3px;
accent-color: #1e3a5f;
flex-shrink: 0;
}
.inquiry-consent-row strong { color: #1e3a5f; margin-right: 4px; }
.inquiry-consent-row a { color: #1e3a5f; text-decoration: underline; }
.inquiry-consent-detail {
display: block;
font-size: 0.8125rem;
color: #64748b;
margin-top: 4px;
}
/* Honeypot — visually hidden but not display:none */
.inquiry-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden;
}
/* Submit */
.inquiry-submit-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.inquiry-submit {
width: 100%;
max-width: 360px;
padding: 16px 28px;
font-size: 1.05rem;
font-weight: 700;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.inquiry-submit:disabled { opacity: 0.65; cursor: wait; }
.inquiry-spinner {
width: 18px;
height: 18px;
border: 2.5px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: inquiry-spin .7s linear infinite;
display: inline-block;
}
@keyframes inquiry-spin { to { transform: rotate(360deg); } }
.inquiry-guarantee {
font-size: 0.8125rem;
color: #64748b;
margin: 0;
}
.inquiry-general-error {
margin-top: 16px;
padding: 12px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #b91c1c;
font-size: 0.9rem;
}
/* Success panel */
.inquiry-success {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 56px 36px;
text-align: center;
box-shadow: 0 6px 24px rgba(15, 23, 42, .04);
}
.inquiry-success-icon {
color: #16a34a;
margin-bottom: 20px;
}
.inquiry-success-title {
font-size: 1.5rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 10px;
}
.inquiry-success-msg {
font-size: 0.95rem;
color: #475569;
max-width: 480px;
margin: 0 auto 28px;
line-height: 1.6;
}
.inquiry-success-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ---------- Inquiry sidebar ---------- */
.inquiry-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 100px;
}
@media (max-width: 1024px) {
.inquiry-sidebar { position: static; }
}
.inquiry-sidebar-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 22px;
}
.inquiry-sidebar-primary {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
text-align: center;
}
.inquiry-sidebar-eyebrow {
font-size: 0.8125rem;
opacity: 0.8;
margin: 0 0 6px;
letter-spacing: .04em;
}
.inquiry-sidebar-headline {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 8px;
line-height: 1.2;
}
.inquiry-sidebar-sub {
font-size: 0.85rem;
margin: 0;
opacity: 0.9;
line-height: 1.5;
}
.inquiry-sidebar-title {
font-size: 1rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 14px;
}
.inquiry-phone-big {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 1.5rem;
font-weight: 800;
color: #1e3a5f;
text-decoration: none;
margin-bottom: 6px;
line-height: 1.2;
}
.inquiry-phone-ico { color: #1e3a5f; }
.inquiry-sidebar-meta {
font-size: 0.85rem;
color: #64748b;
margin: 6px 0 16px;
}
.inquiry-kakao-btn {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
padding: 11px 14px;
background: #FEE500;
color: #3c1e1e;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
font-size: 0.92rem;
transition: transform .1s;
}
.inquiry-kakao-btn:hover { transform: translateY(-1px); }
.inquiry-hours-list {
list-style: none;
padding: 0;
margin: 0;
}
.inquiry-hours-list li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed #e2e8f0;
font-size: 0.9rem;
}
.inquiry-hours-list li:last-child { border-bottom: 0; }
.inquiry-hours-day { color: #475569; }
.inquiry-hours-time { color: #0f172a; font-weight: 600; }
.inquiry-hours-closed { color: #dc2626; }
.inquiry-map-wrap {
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
}
.inquiry-address {
font-size: 0.9rem;
color: #334155;
margin: 0 0 8px;
}
.inquiry-sidebar-link {
color: #1e3a5f;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
}
.inquiry-sidebar-link:hover { text-decoration: underline; }
.inquiry-sidebar-trust { background: #f8fafc; }
.inquiry-trust-list {
list-style: none;
padding: 0;
margin: 0;
}
.inquiry-trust-list li {
position: relative;
padding: 6px 0 6px 22px;
font-size: 0.9rem;
color: #334155;
}
.inquiry-trust-list li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 14px;
height: 14px;
background: #1e3a5f;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Mobile inquiry form tweaks */
@media (max-width: 640px) {
.inquiry-form { padding: 24px 20px; }
.inquiry-form-title { font-size: 1.25rem; }
.inquiry-submit { font-size: 1rem; padding: 14px 20px; }
}
/* ---------- FAQ page ---------- */
.faq-page {
padding-top: 48px;
padding-bottom: 80px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.faq-toolbar {
margin-bottom: 24px;
}
.faq-search {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 0 14px;
margin-bottom: 20px;
transition: border-color .15s, box-shadow .15s;
}
.faq-search:focus-within {
border-color: #1e3a5f;
box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.faq-search-icon {
color: #64748b;
display: flex;
align-items: center;
flex-shrink: 0;
}
.faq-search-input {
flex: 1;
border: 0;
background: transparent;
padding: 14px 12px;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
outline: none;
min-width: 0;
}
.faq-search-clear {
background: none;
border: 0;
cursor: pointer;
color: #94a3b8;
font-size: 1.25rem;
padding: 4px 8px;
line-height: 1;
}
.faq-search-clear:hover { color: #475569; }
.faq-category-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.faq-category-tab {
background: #fff;
border: 1px solid #e2e8f0;
color: #475569;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all .15s;
font-family: inherit;
}
.faq-category-tab:hover { border-color: #cbd5e1; color: #0f172a; }
.faq-category-tab.is-active {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
font-weight: 600;
}
.faq-count {
font-size: 0.875rem;
color: #64748b;
margin: 0 0 16px;
}
.faq-count span { font-weight: 700; color: #1e3a5f; }
.faq-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-accordion-item {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.faq-accordion-item.is-open {
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}
.faq-accordion-item.is-hidden { display: none; }
.faq-accordion-heading { margin: 0; }
.faq-accordion-trigger {
width: 100%;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 1rem;
color: #0f172a;
line-height: 1.5;
}
.faq-accordion-trigger:hover { background: #f8fafc; }
.faq-q-label {
flex-shrink: 0;
width: 28px;
height: 28px;
background: #1e3a5f;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.875rem;
}
.faq-q-text {
flex: 1;
font-weight: 600;
}
.faq-chevron {
flex-shrink: 0;
color: #94a3b8;
margin-top: 4px;
transition: transform .2s;
}
.faq-accordion-item.is-open .faq-chevron { transform: rotate(180deg); color: #1e3a5f; }
.faq-accordion-panel {
border-top: 1px solid #f1f5f9;
background: #fafbfc;
}
.faq-accordion-body {
display: flex;
gap: 14px;
padding: 18px 20px 20px;
color: #334155;
line-height: 1.7;
}
.faq-a-label {
flex-shrink: 0;
width: 28px;
height: 28px;
background: #fff;
color: #dc2626;
border: 1.5px solid #dc2626;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.875rem;
}
.faq-accordion-body p { margin: 0; flex: 1; font-size: 0.95rem; }
.faq-empty {
text-align: center;
padding: 48px 24px;
color: #64748b;
font-size: 0.95rem;
background: #f8fafc;
border-radius: 10px;
margin-top: 16px;
}
/* Search highlight */
.faq-highlight {
background: #fef3c7;
padding: 1px 2px;
border-radius: 3px;
font-weight: 600;
color: #92400e;
}
.faq-cta {
margin-top: 48px;
padding: 40px 32px;
background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
border-radius: 14px;
text-align: center;
color: #fff;
}
.faq-cta-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 8px;
color: #fff;
}
.faq-cta-desc {
font-size: 0.95rem;
opacity: 0.9;
margin: 0 0 22px;
line-height: 1.6;
}
.faq-cta-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.faq-cta-actions .btn-outline {
background: transparent;
border-color: rgba(255, 255, 255, .5);
color: #fff;
}
.faq-cta-actions .btn-outline:hover {
background: rgba(255, 255, 255, .1);
border-color: #fff;
}
@media (max-width: 640px) {
.faq-accordion-trigger { padding: 14px 16px; font-size: 0.95rem; }
.faq-accordion-body { padding: 14px 16px 18px; }
.faq-cta { padding: 32px 20px; }
.faq-cta-title { font-size: 1.25rem; }
}
/* ===== end Agent 4 ===== */
/* ===== Agent 7: Schedule/Calendar/MockExam (2026-04-20) ===== */
/* -------- Shared page hero tweaks (namespaced) -------- */
.page-schedule .page-hero,
.page-calendar .page-hero,
.page-mock-exam .page-hero {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: #f8fafc;
padding: 60px 0 48px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.page-schedule .page-hero-title,
.page-calendar .page-hero-title,
.page-mock-exam .page-hero-title {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
margin: 10px 0 8px;
color: #fff;
}
.page-schedule .page-hero-subtitle,
.page-calendar .page-hero-subtitle,
.page-mock-exam .page-hero-subtitle {
color: #cbd5e1;
font-size: 1.05rem;
margin: 0;
}
.page-schedule .breadcrumbs,
.page-calendar .breadcrumbs,
.page-mock-exam .breadcrumbs {
font-size: 0.9rem;
color: #94a3b8;
display: flex;
gap: 8px;
align-items: center;
}
.page-schedule .breadcrumbs a,
.page-calendar .breadcrumbs a,
.page-mock-exam .breadcrumbs a {
color: #93c5fd;
text-decoration: none;
}
.page-schedule .breadcrumbs a:hover,
.page-calendar .breadcrumbs a:hover,
.page-mock-exam .breadcrumbs a:hover { text-decoration: underline; }
/* -------- Schedule page -------- */
.schedule-section { padding: 40px 0 80px; }
.schedule-filter {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: flex-end;
margin-bottom: 28px;
padding: 18px 20px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.schedule-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 160px;
}
.schedule-filter-label {
font-size: 0.85rem;
color: #475569;
font-weight: 600;
}
.schedule-filter-select {
height: 40px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
font-size: 0.95rem;
color: #1e293b;
cursor: pointer;
}
.schedule-filter-select:focus {
outline: 2px solid #3b82f6;
outline-offset: 1px;
}
.schedule-filter-actions { margin-left: auto; }
.schedule-pdf-btn {
height: 40px;
padding: 0 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: #0f172a;
color: #fff;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease;
}
.schedule-pdf-btn:hover { background: #1e293b; }
.schedule-grid-wrapper {
overflow-x: auto;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
}
.schedule-grid {
width: 100%;
min-width: 900px;
border-collapse: collapse;
font-size: 0.92rem;
}
.schedule-grid thead th {
background: #0f172a;
color: #fff;
padding: 14px 10px;
font-weight: 600;
text-align: center;
border-right: 1px solid #1e293b;
}
.schedule-grid thead th.is-weekend { background: #334155; }
.schedule-grid thead th:last-child { border-right: none; }
.schedule-grid-time { width: 120px; }
.schedule-grid-time-label {
text-align: center;
padding: 14px 10px;
background: #f1f5f9;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
}
.schedule-grid-time-label strong {
display: block;
font-size: 1rem;
color: #0f172a;
margin-bottom: 4px;
}
.schedule-grid-time-label span {
font-size: 0.8rem;
color: #64748b;
}
.schedule-grid-cell {
padding: 10px 8px;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
vertical-align: top;
min-width: 110px;
height: 110px;
}
.schedule-grid-cell:last-child { border-right: none; }
.schedule-cell-empty {
display: block;
text-align: center;
color: #cbd5e1;
font-size: 1.2rem;
padding: 20px 0;
}
.schedule-cell {
display: block;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 6px;
border-left: 3px solid transparent;
background: #f8fafc;
font-size: 0.82rem;
line-height: 1.4;
}
.schedule-cell:last-child { margin-bottom: 0; }
.schedule-cell-name {
display: block;
font-weight: 700;
color: #0f172a;
margin-bottom: 3px;
}
.schedule-cell-meta {
display: block;
color: #475569;
font-size: 0.78rem;
}
.schedule-cell-time {
display: block;
color: #64748b;
font-size: 0.75rem;
margin-top: 2px;
}
.schedule-cell--elementary { border-left-color: #60a5fa; background: #eff6ff; }
.schedule-cell--middle { border-left-color: #34d399; background: #ecfdf5; }
.schedule-cell--high { border-left-color: #f59e0b; background: #fffbeb; }
.schedule-cell--n_year { border-left-color: #f472b6; background: #fdf2f8; }
/* Filter hidden state */
.schedule-cell.is-hidden,
.schedule-mobile-item.is-hidden,
.schedule-mobile-group.is-hidden { display: none !important; }
.schedule-mobile-list { display: none; }
.schedule-mobile-group {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
margin-bottom: 12px;
overflow: hidden;
}
.schedule-mobile-group > summary {
padding: 14px 16px;
font-weight: 700;
font-size: 1rem;
color: #0f172a;
cursor: pointer;
list-style: none;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.schedule-mobile-group > summary::-webkit-details-marker { display: none; }
.schedule-mobile-group[open] > summary { background: #e0f2fe; }
.schedule-mobile-count {
color: #64748b;
font-weight: 500;
font-size: 0.85rem;
}
.schedule-mobile-items {
list-style: none;
padding: 0;
margin: 0;
}
.schedule-mobile-item {
padding: 14px 16px;
border-bottom: 1px solid #f1f5f9;
}
.schedule-mobile-item:last-child { border-bottom: none; }
.schedule-mobile-item-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.schedule-mobile-item-name {
font-weight: 700;
color: #0f172a;
font-size: 0.95rem;
}
.schedule-mobile-item-grade {
font-size: 0.8rem;
color: #475569;
background: #e0f2fe;
padding: 2px 8px;
border-radius: 4px;
}
.schedule-mobile-item-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
font-size: 0.85rem;
color: #475569;
}
.schedule-mobile-item-body strong {
color: #0f172a;
font-weight: 600;
}
.schedule-legend {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin: 24px 0 16px;
padding: 14px 18px;
background: #f8fafc;
border-radius: 10px;
font-size: 0.9rem;
color: #475569;
}
.schedule-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.schedule-legend-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
}
.schedule-note {
font-size: 0.88rem;
color: #64748b;
line-height: 1.6;
}
.schedule-note p { margin: 4px 0; }
.schedule-note a { color: #2563eb; }
@media print {
.page-hero, .schedule-filter-actions, .schedule-mobile-list, footer, header,
.schedule-note, .schedule-legend, .breadcrumbs { display: none !important; }
body { background: #fff; }
.schedule-grid { font-size: 0.8rem; }
.schedule-grid-cell { height: auto; }
}
/* -------- Calendar page -------- */
.calendar-section { padding: 40px 0 80px; }
.calendar-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 24px;
padding: 14px 18px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.calendar-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
color: #334155;
transition: border-color .15s, background .15s;
}
.calendar-filter-chip:hover { border-color: #3b82f6; }
.calendar-filter-checkbox { accent-color: #3b82f6; }
.calendar-filter-color {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
}
.calendar-ical-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #0f172a;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: background .15s;
}
.calendar-ical-btn:hover { background: #1e293b; color: #fff; }
.calendar-container {
background: #fff;
padding: 18px;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
min-height: 620px;
}
.calendar-container .fc {
font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
}
.calendar-container .fc-toolbar-title {
font-size: 1.3rem !important;
font-weight: 700;
color: #0f172a;
}
.calendar-container .fc-button-primary {
background: #0f172a !important;
border-color: #0f172a !important;
}
.calendar-container .fc-button-primary:hover { background: #1e293b !important; }
.calendar-container .fc-button-primary:not(:disabled).fc-button-active {
background: #3b82f6 !important;
border-color: #3b82f6 !important;
}
.calendar-container .fc-event {
cursor: pointer;
border: none;
padding: 2px 4px;
font-size: 0.82rem;
font-weight: 500;
}
.calendar-container .fc-daygrid-day-number { color: #0f172a; }
.calendar-container .fc-col-header-cell-cushion {
color: #475569;
font-weight: 600;
}
.calendar-container .fc-day-today {
background: rgba(59, 130, 246, .08) !important;
}
/* Modal */
.calendar-event-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.calendar-event-modal[hidden] { display: none; }
.calendar-event-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .6);
}
.calendar-event-modal-content {
position: relative;
background: #fff;
border-radius: 12px;
padding: 30px;
max-width: 480px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
z-index: 1;
}
.calendar-event-modal-close {
position: absolute;
top: 12px;
right: 16px;
background: transparent;
border: none;
font-size: 1.6rem;
color: #64748b;
cursor: pointer;
line-height: 1;
}
.calendar-event-modal-close:hover { color: #0f172a; }
.calendar-event-modal-category {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 12px;
}
.calendar-event-modal-title {
font-size: 1.3rem;
margin: 0 0 12px;
color: #0f172a;
}
.calendar-event-modal-meta {
font-size: 0.9rem;
color: #475569;
margin-bottom: 14px;
line-height: 1.6;
}
.calendar-event-modal-body {
font-size: 0.95rem;
color: #1e293b;
line-height: 1.65;
}
.calendar-note {
margin-top: 20px;
font-size: 0.88rem;
color: #64748b;
line-height: 1.6;
}
.calendar-note p { margin: 4px 0; }
.calendar-note a { color: #2563eb; }
/* -------- Mock exam schedule -------- */
.mock-exam-section { padding: 40px 0 80px; }
.mock-exam-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.mock-exam-filter-btn {
padding: 10px 18px;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 999px;
font-size: 0.9rem;
color: #475569;
cursor: pointer;
font-weight: 500;
transition: all .15s;
}
.mock-exam-filter-btn:hover {
border-color: #3b82f6;
color: #3b82f6;
}
.mock-exam-filter-btn.is-active {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.mock-exam-months {
display: flex;
flex-direction: column;
gap: 28px;
}
.mock-exam-month {
display: flex;
flex-direction: column;
gap: 14px;
}
.mock-exam-month-title {
font-size: 1.25rem;
color: #0f172a;
margin: 0 0 6px;
padding-bottom: 10px;
border-bottom: 2px solid #0f172a;
font-weight: 700;
}
.mock-exam-month-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 22px 24px;
box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
position: relative;
transition: transform .15s, box-shadow .15s;
}
.mock-exam-month-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(15, 23, 42, .08);
}
.mock-exam-month-card.is-past { opacity: 0.75; }
.mock-exam-month-card.is-hidden { display: none !important; }
.mock-exam-month-card--external { border-left: 4px solid #3b82f6; }
.mock-exam-month-card--internal { border-left: 4px solid #f59e0b; }
.mock-exam-card-header {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px;
}
.mock-exam-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
color: #fff;
}
.mock-exam-badge--external { background: #3b82f6; }
.mock-exam-badge--internal { background: #f59e0b; }
.mock-exam-status {
font-size: 0.75rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 4px;
}
.mock-exam-status--past { background: #e2e8f0; color: #64748b; }
.mock-exam-status--upcoming { background: #dcfce7; color: #166534; }
.mock-exam-name {
font-size: 1.1rem;
color: #0f172a;
margin: 0 0 16px;
font-weight: 700;
}
.mock-exam-info-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px 16px;
margin-bottom: 16px;
}
.mock-exam-info-item {
display: flex;
flex-direction: column;
gap: 3px;
}
.mock-exam-info-label {
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
}
.mock-exam-info-value {
font-size: 0.95rem;
color: #0f172a;
font-weight: 600;
}
.mock-exam-result {
display: flex;
gap: 20px;
padding: 12px 16px;
background: #f1f5f9;
border-radius: 8px;
margin-bottom: 16px;
font-size: 0.9rem;
}
.mock-exam-result-item {
display: inline-flex;
gap: 6px;
align-items: baseline;
}
.mock-exam-result-label { color: #64748b; }
.mock-exam-result-item strong { color: #0f172a; }
.mock-exam-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mock-exam-btn {
display: inline-block;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
border: none;
transition: all .15s;
}
.mock-exam-btn--primary {
background: #0f172a;
color: #fff;
}
.mock-exam-btn--primary:hover {
background: #1e293b;
color: #fff;
}
.mock-exam-btn--secondary {
background: #fff;
color: #0f172a;
border: 1px solid #cbd5e1;
}
.mock-exam-btn--secondary:hover { border-color: #0f172a; }
.mock-exam-btn--disabled {
background: #f1f5f9;
color: #94a3b8;
cursor: not-allowed;
}
.mock-exam-footnote {
margin-top: 30px;
padding: 18px 20px;
background: #f8fafc;
border-radius: 10px;
font-size: 0.88rem;
color: #64748b;
line-height: 1.6;
}
.mock-exam-footnote p { margin: 4px 0; }
/* -------- Mobile -------- */
@media (max-width: 768px) {
.schedule-grid-wrapper { display: none; }
.schedule-mobile-list { display: block; }
.schedule-filter { flex-direction: column; align-items: stretch; }
.schedule-filter-actions { margin-left: 0; }
.calendar-container { padding: 8px; min-height: 500px; }
.calendar-container .fc-toolbar {
flex-direction: column;
gap: 10px;
}
.calendar-filters { flex-direction: column; align-items: stretch; }
.calendar-ical-btn { margin-left: 0; justify-content: center; }
.mock-exam-month-card { padding: 18px; }
.mock-exam-info-row { grid-template-columns: 1fr 1fr; }
.mock-exam-actions { flex-direction: column; }
.mock-exam-actions .mock-exam-btn { text-align: center; }
}
/* ===== end Agent 7 ===== */
/* ===== Agent 10: Location/JSON-LD/Tel/EN/A11y (2026-04-20) ===== */
/* ---------- Location: Hero address + phone ---------- */
.location-detail { padding-top: 40px; }
.location-hero-card {
background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
border-radius: 18px;
padding: 36px 40px;
margin-bottom: 40px;
color: #fff;
box-shadow: 0 10px 30px rgba(30, 58, 95, 0.2);
}
.location-hero-inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 36px;
align-items: center;
}
.location-hero-label {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 8px;
}
.location-hero-addr {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 8px;
line-height: 1.35;
color: #fff;
}
.location-hero-sub {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.6;
}
.location-hero-tel { text-align: right; }
.location-hero-number {
display: inline-block;
font-size: 2.2rem;
font-weight: 800;
color: #fff;
text-decoration: none;
letter-spacing: -0.02em;
line-height: 1.2;
transition: opacity 0.15s ease;
}
.location-hero-number:hover { opacity: 0.85; }
.location-hero-hours {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
margin: 6px 0 0;
}
/* ---------- Location: Maps (google + kakao) ---------- */
.location-maps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 48px;
}
.location-map-box {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
}
.location-map-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.location-map-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #1e293b;
}
.location-map-link {
font-size: 0.875rem;
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
.location-map-link:hover { text-decoration: underline; }
.location-map iframe {
width: 100%;
height: 340px;
border: 0;
display: block;
}
.location-kakao-fallback {
display: flex;
flex-direction: column;
gap: 8px;
padding: 40px 24px;
text-align: center;
text-decoration: none;
background: #fef3c7;
color: #78350f;
min-height: 340px;
justify-content: center;
transition: background 0.2s ease;
}
.location-kakao-fallback:hover { background: #fde68a; }
.location-kakao-fallback-title {
font-size: 1.25rem;
font-weight: 800;
}
.location-kakao-fallback-desc {
font-size: 0.9rem;
opacity: 0.85;
}
.location-kakao-fallback-cta {
display: inline-block;
margin-top: 10px;
font-weight: 700;
}
/* ---------- Location: Parking ---------- */
.location-section-title {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 24px;
color: #1e293b;
border-left: 5px solid #dc2626;
padding-left: 16px;
line-height: 1.3;
}
.parking-info { margin-bottom: 56px; }
.parking-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 32px;
align-items: start;
}
.parking-photo-ph {
width: 100%;
height: 260px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(30, 58, 95, 0.1), rgba(44, 79, 124, 0.1)),
repeating-linear-gradient(45deg, #e5e7eb 0, #e5e7eb 10px, #f3f4f6 10px, #f3f4f6 20px);
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #94a3b8;
}
.parking-photo-label {
font-size: 0.95rem;
font-weight: 600;
color: #475569;
background: #fff;
padding: 8px 14px;
border-radius: 6px;
}
.parking-info-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.parking-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 20px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.parking-item-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
background: #dc2626;
color: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.parking-item h3 {
margin: 0 0 4px;
font-size: 1.05rem;
font-weight: 700;
color: #1e293b;
}
.parking-item p {
margin: 0;
font-size: 0.95rem;
color: #475569;
line-height: 1.55;
}
/* ---------- Location: Transport routes ---------- */
.transport-routes { margin-bottom: 56px; }
.route-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.route-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.route-card:hover {
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
.route-card-head {
padding: 20px 22px 14px;
border-bottom: 1px solid #f1f5f9;
}
.route-subway { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.route-bus { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.route-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 800;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 8px;
color: #fff;
}
.route-badge-2 { background: #00a84d; }
.route-badge-9 { background: #d4a843; color: #1e293b; }
.route-badge-bus { background: #dc2626; }
.route-title {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: #1e293b;
line-height: 1.35;
}
.route-steps {
list-style: none;
margin: 0;
padding: 18px 22px 0;
counter-reset: route-step;
}
.route-steps li {
position: relative;
padding: 10px 0 10px 34px;
font-size: 0.92rem;
color: #475569;
line-height: 1.55;
border-bottom: 1px dashed #e2e8f0;
counter-increment: route-step;
}
.route-steps li:last-child { border-bottom: 0; }
.route-steps li::before {
content: counter(route-step);
position: absolute;
left: 0;
top: 12px;
width: 24px;
height: 24px;
background: #1e3a5f;
color: #fff;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.route-meta {
margin: 0;
padding: 14px 22px 20px;
font-size: 0.9rem;
color: #64748b;
border-top: 1px solid #f1f5f9;
background: #fafbfc;
}
.route-meta strong { color: #dc2626; font-weight: 800; }
/* ---------- Location: Photo story guide ---------- */
.photo-guide { margin-bottom: 56px; }
.photo-guide-intro {
font-size: 1rem;
color: #475569;
margin: 0 0 24px;
line-height: 1.7;
max-width: 760px;
}
.photo-guide-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.photo-guide-step {
display: grid;
grid-template-columns: 340px 1fr;
gap: 28px;
align-items: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 20px;
}
.photo-guide-step:nth-child(even) {
grid-template-columns: 1fr 340px;
}
.photo-guide-step:nth-child(even) .photo-guide-img { order: 2; }
.photo-guide-step:nth-child(even) .photo-guide-caption { order: 1; }
.photo-guide-ph {
width: 100%;
height: 220px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
color: #fff;
text-align: center;
overflow: hidden;
}
.photo-guide-ph-1 { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.photo-guide-ph-2 { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
.photo-guide-ph-3 { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); }
.photo-guide-ph-4 { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
.photo-guide-ph-5 { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
.photo-guide-step-num {
font-size: 3rem;
font-weight: 900;
line-height: 1;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.photo-guide-ph-label {
font-size: 1rem;
font-weight: 700;
background: rgba(0, 0, 0, 0.25);
padding: 6px 14px;
border-radius: 999px;
}
.photo-guide-caption h3 {
margin: 0 0 10px;
font-size: 1.2rem;
font-weight: 800;
color: #1e293b;
}
.photo-guide-caption p {
margin: 0 0 12px;
font-size: 0.95rem;
color: #475569;
line-height: 1.65;
}
.photo-guide-time {
display: inline-block;
font-size: 0.85rem;
color: #64748b;
background: #f1f5f9;
padding: 4px 12px;
border-radius: 6px;
}
.photo-guide-time strong { color: #dc2626; font-weight: 800; }
/* ---------- Location CTA ---------- */
.location-cta-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 16px;
}
/* ---------- Tel widget (mobile sticky bar + desktop copy) ---------- */
.tel-widget { display: none; }
.tel-widget-mobile {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
display: flex;
gap: 0;
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
transform: translateY(100%);
transition: transform 0.28s ease;
}
.tel-widget-mobile.is-visible { transform: translateY(0); }
.tel-widget-call,
.tel-widget-kakao {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 12px;
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
min-height: 56px;
}
.tel-widget-call {
background: #dc2626;
flex: 1.4;
}
.tel-widget-kakao {
background: #fee500;
color: #3c1e1e;
}
.tel-widget-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
}
.tel-widget-label { font-size: 0.72rem; opacity: 0.88; }
.tel-widget-number { font-size: 1rem; font-weight: 800; }
.tel-copy-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(30px);
background: #1e293b;
color: #fff;
padding: 10px 20px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
z-index: 60;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
}
.tel-copy-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Show/hide by viewport */
@media (min-width: 769px) {
.tel-widget-mobile { display: none !important; }
}
@media (max-width: 768px) {
.tel-widget-mobile { display: flex; }
body.has-tel-mobile { padding-bottom: 64px; }
/* Nudge floating CTA above the sticky bar */
.floating-cta { bottom: 80px !important; }
}
/* ---------- EN landing page ---------- */
.en-notice-strip {
background: linear-gradient(90deg, #1e3a5f, #2c4f7c);
color: #fff;
padding: 10px 0;
font-size: 0.9rem;
}
.en-notice-strip .container {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.en-notice-flag {
background: #fff;
color: #1e3a5f;
font-weight: 900;
padding: 2px 10px;
border-radius: 4px;
letter-spacing: 0.05em;
font-size: 0.75rem;
}
.en-notice-text { flex: 1; min-width: 260px; }
.en-notice-link {
color: #fde68a;
text-decoration: none;
font-weight: 700;
}
.en-notice-link:hover { text-decoration: underline; }
.en-content h2 {
font-size: 1.85rem;
font-weight: 800;
color: #1e293b;
margin: 0 0 16px;
border-bottom: 3px solid #dc2626;
padding-bottom: 10px;
display: inline-block;
}
.en-content section { margin-bottom: 56px; }
.en-lead { font-size: 1.1rem; line-height: 1.75; color: #334155; margin-bottom: 20px; }
.en-content p { font-size: 1rem; line-height: 1.7; color: #475569; }
.en-highlight-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.en-highlight-card {
padding: 24px 26px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.en-highlight-icon {
width: 48px;
height: 48px;
border-radius: 10px;
background: #1e3a5f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.en-highlight-card h3 {
margin: 0 0 6px;
font-size: 1.15rem;
font-weight: 800;
color: #1e293b;
}
.en-highlight-card p {
margin: 0;
font-size: 0.95rem;
color: #475569;
}
.en-programs-list {
list-style: none;
padding: 0;
margin: 20px 0 0;
}
.en-programs-list li {
padding: 14px 18px;
background: #fff;
border-left: 4px solid #dc2626;
border-radius: 8px;
margin-bottom: 10px;
font-size: 0.95rem;
color: #334155;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
}
.en-contact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.en-contact-card {
padding: 22px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.en-contact-card h3 {
margin: 0 0 8px;
font-size: 1rem;
font-weight: 800;
color: #1e3a5f;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.en-contact-link {
font-size: 1.25rem;
font-weight: 700;
color: #dc2626;
text-decoration: none;
}
.en-contact-link:hover { text-decoration: underline; }
.en-contact-note { font-size: 0.85rem; color: #64748b; margin-top: 6px; }
.en-footer-notice {
text-align: center;
padding: 36px 24px;
background: linear-gradient(135deg, #1e3a5f, #2c4f7c);
color: #fff;
border-radius: 14px;
}
.en-footer-notice p { color: rgba(255, 255, 255, 0.95); font-size: 1rem; margin-bottom: 18px; }
/* ---------- A11y content ---------- */
.a11y-content h2 {
font-size: 1.5rem;
font-weight: 800;
color: #1e293b;
margin: 0 0 16px;
}
.a11y-meta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: #f1f5f9;
border-radius: 999px;
font-size: 0.875rem;
color: #475569;
margin-bottom: 32px;
}
.a11y-meta-label { font-weight: 700; color: #1e293b; }
.a11y-section {
padding: 28px 32px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
margin-bottom: 20px;
}
.a11y-section p {
font-size: 1rem;
line-height: 1.75;
color: #334155;
margin: 0 0 12px;
}
.a11y-list {
margin: 12px 0 0;
padding-left: 22px;
}
.a11y-list li {
font-size: 0.95rem;
line-height: 1.8;
color: #334155;
margin-bottom: 8px;
}
.a11y-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 18px;
}
.a11y-feature {
padding: 18px 20px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.a11y-feature h3 {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 800;
color: #dc2626;
}
.a11y-feature p {
margin: 0;
font-size: 0.92rem;
line-height: 1.65;
color: #475569;
}
.a11y-limits {
list-style: none;
padding: 0;
margin: 14px 0 0;
}
.a11y-limits li {
position: relative;
padding: 10px 12px 10px 36px;
font-size: 0.95rem;
line-height: 1.65;
color: #475569;
background: #fef3c7;
border-radius: 8px;
margin-bottom: 8px;
}
.a11y-limits li::before {
content: '!';
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #d97706;
color: #fff;
border-radius: 50%;
font-weight: 800;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.a11y-contact-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 18px;
padding: 20px 22px;
background: #f1f5f9;
border-radius: 10px;
}
.a11y-contact-label {
display: block;
font-size: 0.8rem;
color: #64748b;
font-weight: 600;
margin-bottom: 4px;
}
.a11y-contact-mail {
font-size: 1rem;
font-weight: 700;
color: #dc2626;
text-decoration: none;
}
.a11y-contact-mail:hover { text-decoration: underline; }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.location-hero-inner { grid-template-columns: 1fr; gap: 20px; text-align: left; }
.location-hero-tel { text-align: left; }
.location-hero-number { font-size: 1.75rem; }
.location-maps { grid-template-columns: 1fr; gap: 18px; }
.parking-grid { grid-template-columns: 1fr; gap: 20px; }
.route-grid { grid-template-columns: 1fr; }
.photo-guide-step,
.photo-guide-step:nth-child(even) {
grid-template-columns: 1fr;
gap: 16px;
}
.photo-guide-step:nth-child(even) .photo-guide-img { order: 0; }
.photo-guide-step:nth-child(even) .photo-guide-caption { order: 0; }
.photo-guide-ph { height: 180px; }
.en-highlight-grid,
.en-contact-grid,
.a11y-feature-grid,
.a11y-contact-box {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.location-hero-card { padding: 24px 20px; }
.location-hero-addr { font-size: 1.35rem; }
.location-hero-number { font-size: 1.5rem; }
.location-section-title { font-size: 1.35rem; }
.a11y-section { padding: 20px 18px; }
.a11y-content h2 { font-size: 1.25rem; }
.en-content h2 { font-size: 1.4rem; }
}
/* ===== end Agent 10 ===== */
/* ===== Agent 9: IntroVideo/VirtualTour/SNS (2026-04-20) ===== */
/* ---------- Intro Video ---------- */
.intro-video-hero { padding: 64px 0 80px; background: #f8fafc; }
.intro-video-player {
max-width: 960px;
margin: 0 auto 48px;
}
.intro-video-frame {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
border-radius: 18px;
overflow: hidden;
background: #0f172a;
box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(30, 58, 95, 0.08);
}
.intro-video-frame iframe,
.intro-video-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.intro-video-caption {
margin: 18px 0 0;
text-align: center;
color: #64748b;
font-size: 0.95rem;
}
.video-chapter-list {
max-width: 880px;
margin: 0 auto 56px;
padding: 36px 36px 28px;
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px #e2e8f0;
}
.video-chapter-title {
font-size: 1.375rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 22px;
padding-bottom: 14px;
border-bottom: 2px solid #f1f5f9;
}
.video-chapter-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.video-chapter-item {
display: grid;
grid-template-columns: 42px 44px 1fr;
gap: 16px;
align-items: flex-start;
padding: 16px 14px;
border-radius: 10px;
transition: background .15s;
}
.video-chapter-item:hover { background: #f8fafc; }
.video-chapter-num {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: #d4a843;
line-height: 1;
padding-top: 4px;
}
.video-chapter-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(30, 58, 95, 0.08);
color: #1e3a5f;
display: inline-flex;
align-items: center;
justify-content: center;
}
.video-chapter-body { min-width: 0; }
.video-chapter-head {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
flex-wrap: wrap;
}
.video-chapter-name {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.video-chapter-time {
font-size: 0.8rem;
color: #94a3b8;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.video-chapter-desc {
margin: 0;
color: #475569;
font-size: 0.93rem;
line-height: 1.55;
}
.intro-video-summary {
max-width: 880px;
margin: 0 auto 56px;
padding: 32px 36px;
background: #fff;
border-left: 4px solid #d4a843;
border-radius: 10px;
box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.08);
}
.intro-video-summary-title {
font-size: 1.125rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 14px;
}
.intro-video-summary-body {
margin: 0;
color: #334155;
font-size: 0.98rem;
line-height: 1.85;
}
.intro-video-cta {
max-width: 720px;
margin: 0 auto;
padding: 40px 32px;
text-align: center;
background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
border-radius: 14px;
color: #fff;
}
.intro-video-cta-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 8px;
color: #fff;
}
.intro-video-cta-desc {
font-size: 0.95rem;
margin: 0 0 22px;
opacity: 0.88;
}
.intro-video-cta-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.intro-video-cta-actions .btn-outline {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.intro-video-cta-actions .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
/* ---------- Virtual Tour ---------- */
.virtual-tour-container { padding: 56px 0 80px; background: #f8fafc; }
.virtual-tour-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 24px;
padding: 6px;
background: #fff;
border-radius: 999px;
box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.1);
}
.virtual-tour-tab {
padding: 10px 20px;
border: 0;
background: transparent;
color: #475569;
font-size: 0.92rem;
font-weight: 600;
border-radius: 999px;
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
}
.virtual-tour-tab:hover { background: #f1f5f9; color: #1e3a5f; }
.virtual-tour-tab.is-active {
background: #1e3a5f;
color: #fff;
}
.virtual-tour-stage {
position: relative;
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
background: #0f172a;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.4);
}
.virtual-tour-panorama {
width: 100%;
height: 540px;
background: #0f172a;
}
.virtual-tour-info {
padding: 28px 24px;
color: #e2e8f0;
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
display: flex;
flex-direction: column;
gap: 14px;
}
.virtual-tour-info-name {
font-size: 1.4rem;
font-weight: 700;
color: #f2d375;
margin: 0;
font-family: 'Playfair Display', serif;
}
.virtual-tour-info-sub {
font-size: 0.93rem;
color: #cbd5e1;
line-height: 1.55;
margin: 0;
}
.virtual-tour-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: auto;
}
.virtual-tour-actions .btn {
flex: 1;
justify-content: center;
min-width: 110px;
}
.virtual-tour-share {
display: inline-flex;
align-items: center;
gap: 6px;
color: #e2e8f0;
border-color: rgba(255, 255, 255, 0.3);
background: transparent;
}
.virtual-tour-share:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-color: #fff;
}
.virtual-tour-share-toast {
font-size: 0.85rem;
color: #6ee7b7;
margin: 6px 0 0;
text-align: center;
}
.virtual-tour-help {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
margin-top: 22px;
padding: 18px 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.1);
}
.virtual-tour-help-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: #475569;
font-size: 0.9rem;
}
.virtual-tour-help-item svg { color: #1e3a5f; flex-shrink: 0; }
/* Pannellum custom hotspot */
.pnlm-hotspot-base.virtual-tour-hotspot {
height: 34px;
width: 34px;
background: #d4a843;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.35), 0 4px 10px rgba(0,0,0,0.3);
cursor: pointer;
animation: mmlTourPulse 2s infinite;
}
@keyframes mmlTourPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.35), 0 4px 10px rgba(0,0,0,0.3); }
50% { box-shadow: 0 0 0 10px rgba(212, 168, 67, 0.15), 0 4px 10px rgba(0,0,0,0.3); }
}
/* ---------- SNS Feed ---------- */
.sns-feed { padding: 56px 0 80px; background: #f8fafc; }
.sns-channel-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
}
.sns-channel-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
color: #334155;
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
transition: border-color .15s, color .15s, transform .15s;
}
.sns-channel-badge:hover { transform: translateY(-2px); }
.sns-channel-instagram:hover { border-color: #e1306c; color: #e1306c; }
.sns-channel-facebook:hover { border-color: #1877f2; color: #1877f2; }
.sns-channel-kakao:hover { border-color: #fae100; color: #3c1e1e; }
.sns-channel-youtube:hover { border-color: #ff0000; color: #ff0000; }
.sns-badge-handle {
color: #94a3b8;
font-weight: 500;
font-size: 0.85rem;
}
.sns-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.sns-post-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.1);
transition: transform .2s, box-shadow .2s;
}
.sns-post-card:hover,
.sns-post-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.22);
}
.sns-post-media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f1f5f9;
}
.sns-post-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.sns-post-card:hover .sns-post-media img,
.sns-post-card:focus-within .sns-post-media img {
transform: scale(1.06);
}
.sns-hover-overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
opacity: 0;
transition: opacity .2s;
pointer-events: none;
}
.sns-post-card:hover .sns-hover-overlay,
.sns-post-card:focus-within .sns-hover-overlay {
opacity: 1;
}
.sns-overlay-stat {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.05rem;
}
.sns-overlay-stat svg { flex-shrink: 0; }
.sns-post-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sns-post-text {
margin: 0;
font-size: 0.93rem;
line-height: 1.55;
color: #334155;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sns-post-tags {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sns-post-tag {
font-size: 0.82rem;
color: #1e3a5f;
font-weight: 600;
}
.sns-post-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px 0 0;
padding-top: 10px;
border-top: 1px solid #f1f5f9;
color: #94a3b8;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
}
.sns-post-handle { font-weight: 600; color: #64748b; }
.sns-empty {
grid-column: 1 / -1;
text-align: center;
color: #94a3b8;
padding: 56px 24px;
background: #fff;
border-radius: 12px;
}
.sns-cta {
max-width: 720px;
margin: 0 auto;
padding: 40px 32px;
text-align: center;
background: #fff;
border-radius: 14px;
border: 1px dashed #d4a843;
}
.sns-cta-title {
font-size: 1.375rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 8px;
}
.sns-cta-desc {
color: #64748b;
margin: 0 0 22px;
font-size: 0.95rem;
}
.sns-cta-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.virtual-tour-stage {
grid-template-columns: 1fr;
}
.virtual-tour-panorama { height: 420px; }
.virtual-tour-info { padding: 22px 20px; }
}
@media (max-width: 768px) {
.sns-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.video-chapter-list { padding: 24px 18px; }
.video-chapter-item {
grid-template-columns: 32px 36px 1fr;
gap: 12px;
padding: 12px 8px;
}
.video-chapter-num { font-size: 1.25rem; }
.video-chapter-icon { width: 36px; height: 36px; }
.video-chapter-icon svg { width: 22px; height: 22px; }
.intro-video-summary { padding: 26px 22px; }
.intro-video-cta { padding: 32px 20px; }
.intro-video-cta-title, .sns-cta-title { font-size: 1.2rem; }
.virtual-tour-tab { padding: 8px 14px; font-size: 0.85rem; }
.virtual-tour-panorama { height: 340px; }
}
@media (max-width: 480px) {
.sns-channel-badge { padding: 10px 14px; font-size: 0.85rem; }
.sns-badge-handle { display: none; }
.sns-overlay-stat { font-size: 0.9rem; }
.sns-post-body { padding: 12px 14px 14px; }
.virtual-tour-panorama { height: 280px; }
}
/* ===== end Agent 9 ===== */
/* ===== Agent 11: Marketing widgets (2026-04-20) ===== */
/* --- 1. Home-page counter bar + discount banner --- */
.counter-bar {
background: linear-gradient(90deg, #0f1b2d 0%, #1e3a5f 100%);
color: #fff;
padding: 14px 20px;
text-align: center;
font-size: 0.95rem;
line-height: 1.5;
border-top: 1px solid rgba(212,168,67,0.3);
border-bottom: 1px solid rgba(212,168,67,0.3);
position: relative;
}
.counter-bar strong {
color: #d4a843;
font-weight: 700;
margin: 0 4px;
}
.counter-bar .counter-bar-inner {
max-width: 1140px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.counter-bar .countdown-timer {
background: rgba(212,168,67,0.15);
border: 1px solid rgba(212,168,67,0.4);
padding: 4px 10px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: #ffe6a8;
}
.counter-bar .counter-bar-close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: rgba(255,255,255,0.7);
font-size: 1.1rem;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.counter-bar .counter-bar-close:hover { color: #fff; }
.discount-banner {
background: #d4a843;
color: #131313;
padding: 12px 20px;
text-align: center;
font-size: 0.95rem;
font-weight: 600;
position: relative;
}
.discount-banner-inner {
max-width: 1140px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.discount-banner-cta {
background: #131313;
color: #d4a843;
padding: 6px 14px;
border-radius: 4px;
text-decoration: none;
font-weight: 700;
transition: background 0.15s;
}
.discount-banner-cta:hover { background: #000; color: #ffe6a8; }
.discount-banner-close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: #131313;
font-size: 1.1rem;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
opacity: 0.7;
}
.discount-banner-close:hover { opacity: 1; }
@media (max-width: 640px) {
.counter-bar { padding: 12px 36px 12px 16px; font-size: 0.85rem; }
.discount-banner { padding: 10px 36px 10px 16px; font-size: 0.85rem; }
.counter-bar .counter-bar-inner,
.discount-banner-inner { gap: 8px; }
}
/* --- 2. Referral page --- */
.page-referral .referral-perk-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.referral-perk-card {
background: #fff;
border: 1px solid #e7ebf2;
border-radius: 12px;
padding: 28px 24px;
text-align: center;
}
.referral-perk-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
background: #fdf6e3;
color: #d4a843;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
border: 2px solid #d4a843;
}
.referral-perk-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.referral-perk-desc { color: #4a5568; font-size: 0.95rem; line-height: 1.6; }
.referral-code-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.referral-code-box, .referral-redeem-box {
background: #fff;
border: 1px solid #e7ebf2;
border-radius: 14px;
padding: 32px;
}
.referral-box-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; }
.referral-code-display {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #f7f9fc;
border: 2px dashed #d4a843;
border-radius: 8px;
padding: 18px 20px;
margin-bottom: 12px;
}
.referral-code-value {
font-family: 'Courier New', monospace;
font-size: 1.4rem;
font-weight: 700;
color: #0f1b2d;
letter-spacing: 1px;
}
.referral-code-hint { color: #677; font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px; }
.referral-issue-form .referral-inline {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.referral-issue-form input[type="email"] {
flex: 1;
padding: 10px 14px;
border: 1px solid #d3dbe5;
border-radius: 6px;
font-size: 1rem;
}
.referral-label {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin: 12px 0 6px;
color: #2d3748;
}
.referral-redeem-form input {
width: 100%;
padding: 10px 14px;
border: 1px solid #d3dbe5;
border-radius: 6px;
font-size: 1rem;
margin-bottom: 4px;
}
.referral-redeem-form .btn-block {
display: block;
width: 100%;
margin-top: 16px;
}
.referral-share { margin-top: 24px; border-top: 1px solid #edf0f5; padding-top: 20px; }
.referral-share-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; color: #2d3748; }
.referral-share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-share {
padding: 8px 16px;
border: 0;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
color: #fff;
transition: opacity 0.15s;
}
.btn-share:hover { opacity: 0.85; }
.share-kakao { background: #fee500; color: #3c1e1e; }
.share-sms { background: #0f1b2d; }
.share-facebook { background: #1877f2; }
.referral-issue-result, .referral-redeem-result, .newsletter-subscribe-result, .promo-code-result {
margin-top: 14px;
padding: 10px 14px;
border-radius: 6px;
font-size: 0.9rem;
line-height: 1.5;
}
.referral-issue-result.is-success,
.referral-redeem-result.is-success,
.newsletter-subscribe-result.is-success,
.promo-code-result.is-success { background: #e6f7ee; color: #14532d; border: 1px solid #bbe5cf; }
.referral-issue-result.is-error,
.referral-redeem-result.is-error,
.newsletter-subscribe-result.is-error,
.promo-code-result.is-error { background: #fdecec; color: #7f1d1d; border: 1px solid #f5c2c2; }
.referral-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-top: 20px;
}
.referral-stat {
background: #fff;
border: 1px solid #e7ebf2;
border-radius: 10px;
padding: 20px 16px;
text-align: center;
}
.referral-stat-value {
font-size: 2rem;
font-weight: 800;
color: #d4a843;
line-height: 1.1;
}
.referral-stat-label { color: #4a5568; font-size: 0.9rem; margin-top: 4px; }
.referral-rules-list {
list-style: disc;
padding-left: 20px;
color: #2d3748;
line-height: 1.8;
max-width: 820px;
}
@media (max-width: 820px) {
.referral-code-layout { grid-template-columns: 1fr; gap: 20px; }
.referral-code-box, .referral-redeem-box { padding: 24px 20px; }
}
/* --- 3. Newsletter page --- */
.page-newsletter .newsletter-intro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.newsletter-intro-card {
background: #fff;
border: 1px solid #e7ebf2;
border-radius: 10px;
padding: 20px;
}
.newsletter-intro-title { font-size: 0.95rem; color: #d4a843; font-weight: 700; margin-bottom: 6px; }
.newsletter-intro-card p { color: #2d3748; margin: 0; font-size: 0.95rem; }
.newsletter-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 20px;
}
.newsletter-preview-card {
background: #fff;
border: 1px solid #e7ebf2;
border-left: 4px solid #d4a843;
border-radius: 8px;
padding: 20px;
transition: transform 0.15s, box-shadow 0.15s;
}
.newsletter-preview-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15,27,45,0.08);
}
.newsletter-preview-meta {
display: flex;
gap: 12px;
font-size: 0.8rem;
color: #677;
margin-bottom: 8px;
}
.newsletter-preview-rate {
color: #16a34a;
font-weight: 700;
}
.newsletter-preview-title { font-size: 1.05rem; font-weight: 600; color: #0f1b2d; line-height: 1.5; }
.newsletter-sections-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 20px;
}
.newsletter-section-card {
background: #fdf6e3;
border-radius: 10px;
padding: 22px 20px;
}
.newsletter-section-title { font-size: 1.05rem; color: #0f1b2d; font-weight: 700; margin-bottom: 8px; }
.newsletter-section-card p { color: #4a5568; margin: 0; font-size: 0.92rem; line-height: 1.55; }
.newsletter-subscribe-box {
background: linear-gradient(135deg, #0f1b2d 0%, #1e3a5f 100%);
color: #fff;
border-radius: 16px;
padding: 48px 40px;
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.newsletter-subscribe-title { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.newsletter-subscribe-desc { color: rgba(255,255,255,0.85); margin-bottom: 24px; }
.newsletter-subscribe-form {
max-width: 480px;
margin: 0 auto;
text-align: left;
}
.newsletter-subscribe-form input {
width: 100%;
padding: 14px 18px;
border: 0;
border-radius: 8px;
font-size: 1rem;
margin-bottom: 10px;
}
.newsletter-subscribe-form .btn {
width: 100%;
padding: 14px;
font-size: 1.05rem;
}
.newsletter-subscribe-privacy {
color: rgba(255,255,255,0.6);
font-size: 0.8rem;
margin-top: 12px;
text-align: center;
}
@media (max-width: 640px) {
.newsletter-subscribe-box { padding: 32px 22px; }
.newsletter-subscribe-title { font-size: 1.4rem; }
}
/* --- 4. Exit-intent modal --- */
.exit-intent-modal {
position: fixed;
inset: 0;
background: rgba(10,16,28,0.72);
display: none;
align-items: center;
justify-content: center;
z-index: 9990;
padding: 20px;
opacity: 0;
transition: opacity 0.25s ease;
}
.exit-intent-modal.is-open {
display: flex;
opacity: 1;
}
.exit-intent-dialog {
background: #fff;
border-radius: 16px;
max-width: 460px;
width: 100%;
padding: 40px 32px 32px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
transform: translateY(20px);
transition: transform 0.25s ease;
}
.exit-intent-modal.is-open .exit-intent-dialog {
transform: translateY(0);
}
.exit-intent-close {
position: absolute;
top: 12px;
right: 12px;
background: transparent;
border: 0;
font-size: 1.4rem;
color: #9aa5b1;
cursor: pointer;
padding: 8px;
line-height: 1;
}
.exit-intent-close:hover { color: #0f1b2d; }
.exit-intent-eyebrow {
display: inline-block;
background: #fdf6e3;
color: #d4a843;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.exit-intent-title {
font-size: 1.5rem;
font-weight: 700;
color: #0f1b2d;
margin-bottom: 10px;
line-height: 1.3;
}
.exit-intent-desc { color: #4a5568; margin-bottom: 20px; line-height: 1.55; font-size: 0.95rem; }
.exit-intent-list {
background: #f7f9fc;
border-radius: 8px;
padding: 14px 18px 14px 36px;
margin-bottom: 20px;
font-size: 0.9rem;
color: #2d3748;
line-height: 1.7;
}
.exit-intent-form input {
width: 100%;
padding: 12px 16px;
border: 1px solid #d3dbe5;
border-radius: 8px;
font-size: 1rem;
margin-bottom: 10px;
}
.exit-intent-form .btn {
width: 100%;
padding: 12px;
font-size: 1rem;
}
.exit-intent-result {
margin-top: 12px;
padding: 10px 14px;
border-radius: 6px;
font-size: 0.9rem;
}
.exit-intent-result.is-success { background: #e6f7ee; color: #14532d; }
.exit-intent-result.is-error { background: #fdecec; color: #7f1d1d; }
.exit-intent-fineprint {
font-size: 0.75rem;
color: #9aa5b1;
margin-top: 10px;
text-align: center;
}
@media (max-width: 520px) {
.exit-intent-dialog { padding: 32px 22px 24px; }
.exit-intent-title { font-size: 1.25rem; }
}
/* --- 5. Promo code page --- */
.page-promo-code .promo-codes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 20px;
}
.promo-code-card {
background: #fff;
border: 2px dashed #d4a843;
border-radius: 12px;
padding: 24px 20px;
text-align: center;
}
.promo-code-badge {
display: inline-block;
background: #d4a843;
color: #131313;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 10px;
}
.promo-code-discount {
font-size: 2.4rem;
font-weight: 800;
color: #0f1b2d;
line-height: 1;
margin-bottom: 6px;
}
.promo-code-desc { color: #2d3748; font-weight: 600; margin-bottom: 8px; }
.promo-code-hint { color: #9aa5b1; font-size: 0.8rem; }
.promo-code-form-box {
background: #fff;
border: 1px solid #e7ebf2;
border-radius: 14px;
padding: 36px;
max-width: 560px;
margin: 0 auto;
}
.promo-code-form-title { font-size: 1.4rem; margin-bottom: 20px; font-weight: 700; }
.promo-code-label {
display: block;
font-weight: 600;
margin: 14px 0 6px;
font-size: 0.9rem;
color: #2d3748;
}
.promo-code-form input {
width: 100%;
padding: 10px 14px;
border: 1px solid #d3dbe5;
border-radius: 6px;
font-size: 1rem;
}
.promo-code-form input[name="code"] {
font-family: 'Courier New', monospace;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
}
.promo-code-form .btn-block {
display: block;
width: 100%;
margin-top: 24px;
padding: 14px;
font-size: 1.05rem;
}
.promo-code-faq-list { max-width: 820px; }
.promo-code-faq-item {
background: #fff;
border: 1px solid #e7ebf2;
border-radius: 8px;
padding: 20px 24px;
margin-bottom: 12px;
}
.promo-code-faq-item h3 { font-size: 1rem; font-weight: 700; color: #0f1b2d; margin-bottom: 6px; }
.promo-code-faq-item p { color: #4a5568; margin: 0; font-size: 0.95rem; line-height: 1.6; }
/* --- 6. Shared helpers used by marketing pages --- */
.section-pad { padding: 48px 0; }
.page-referral .section-title,
.page-newsletter .section-title,
.page-promo-code .section-title {
font-size: 1.6rem;
font-weight: 700;
color: #0f1b2d;
margin-bottom: 10px;
}
.page-referral .section-lead,
.page-newsletter .section-lead,
.page-promo-code .section-lead {
color: #4a5568;
margin-bottom: 24px;
max-width: 720px;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ===== end Agent 11 ===== */
/* ===== Agent 5: Trial/Booking/Brochure (2026-04-20) ===== */
/* ---------- Shared form-grid wrapper ---------- */
.trial-layout,
.booking-layout,
.brochure-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
align-items: start;
}
.trial-form-col,
.booking-main-col,
.brochure-main-col {
min-width: 0;
}
.trial-side-col,
.booking-side-col,
.brochure-side-col {
display: flex;
flex-direction: column;
gap: 18px;
position: sticky;
top: 90px;
}
.trial-section-title,
.booking-section-title,
.brochure-section-title {
font-size: 1.35rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px;
}
.trial-section-desc,
.booking-section-desc {
color: #475569;
margin: 0 0 24px;
line-height: 1.7;
}
.trial-intro {
margin-bottom: 16px;
}
.trial-form-grid,
.booking-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
margin-bottom: 4px;
}
/* Sidebar cards shared between Trial/Booking/Brochure */
.trial-sidebar-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 22px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.trial-card-highlight {
border-color: #1e3a5f;
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
box-shadow: 0 4px 14px rgba(30, 58, 95, .08);
}
.trial-card-title {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
}
.trial-feature-list,
.booking-hours,
.booking-tips,
.trial-reason-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.95rem;
color: #334155;
line-height: 1.6;
}
.trial-feature-list li {
padding-left: 22px;
position: relative;
}
.trial-feature-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #1e3a5f;
}
.trial-steps {
list-style: none;
padding: 0;
margin: 0;
counter-reset: trial-step;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.95rem;
color: #334155;
line-height: 1.6;
}
.trial-steps li {
padding-left: 4px;
}
.trial-steps li strong {
color: #1e3a5f;
display: inline-block;
min-width: 40px;
}
.trial-reason-list li {
padding-left: 20px;
position: relative;
}
.trial-reason-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #22c55e;
font-weight: 700;
}
.trial-contact-card {
text-align: center;
}
.trial-phone {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: #1e3a5f;
text-decoration: none;
letter-spacing: 0.02em;
margin: 8px 0 6px;
}
.trial-phone:hover { color: #0f172a; }
.trial-contact-card .muted {
font-size: 0.85rem;
color: #64748b;
margin: 0;
}
/* ---------- TRIAL FORM ---------- */
.trial-form {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 28px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.trial-subjects {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
/* ---------- BOOKING CALENDAR ---------- */
.booking-calendar {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 22px;
margin-bottom: 28px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.booking-calendar-legend {
display: flex;
gap: 18px;
margin-bottom: 16px;
font-size: 0.85rem;
color: #475569;
flex-wrap: wrap;
}
.booking-legend-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 3px;
margin-right: 6px;
vertical-align: middle;
border: 1px solid transparent;
}
.booking-legend--free { background: #ffffff; border-color: #94a3b8; }
.booking-legend--selected { background: #1e3a5f; border-color: #1e3a5f; }
.booking-legend--booked { background: #e2e8f0; border-color: #cbd5e1; }
.booking-calendar-body {
display: flex;
flex-direction: column;
gap: 14px;
max-height: 520px;
overflow-y: auto;
padding-right: 4px;
}
.booking-loading {
text-align: center;
color: #64748b;
padding: 40px 0;
font-size: 0.95rem;
}
.booking-day-row {
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 12px 14px;
background: #f8fafc;
}
.booking-day-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
font-weight: 700;
color: #0f172a;
}
.booking-day-head .booking-dow {
font-size: 0.82rem;
font-weight: 500;
color: #64748b;
padding: 2px 8px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
}
.booking-day-head .booking-dow--sat { color: #1e3a5f; border-color: #c7d2fe; background: #eef2ff; }
.booking-slot-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
gap: 6px;
}
.booking-slot {
display: inline-block;
text-align: center;
padding: 8px 4px;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #fff;
color: #334155;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
.booking-slot:hover {
border-color: #1e3a5f;
color: #1e3a5f;
background: #f1f5f9;
}
.booking-slot.is-selected {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
}
.booking-slot--booked {
background: #e2e8f0;
color: #94a3b8;
cursor: not-allowed;
border-color: #cbd5e1;
text-decoration: line-through;
}
.booking-slot--booked:hover {
background: #e2e8f0;
color: #94a3b8;
border-color: #cbd5e1;
}
.booking-form-section {
margin-top: 16px;
}
.booking-form {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 28px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.booking-selected-label {
padding: 14px 16px;
background: #f1f5f9;
border-left: 3px solid #94a3b8;
color: #475569;
font-size: 0.95rem;
border-radius: 6px;
margin-bottom: 20px;
}
.booking-selected-label.is-ready {
background: #eef4ff;
border-color: #1e3a5f;
color: #0f172a;
font-weight: 600;
}
.radio-grid.booking-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px;
}
.radio-btn {
position: relative;
display: block;
text-align: center;
padding: 12px 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #334155;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.15s ease;
}
.radio-btn input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-btn:hover {
border-color: #1e3a5f;
color: #1e3a5f;
}
.radio-btn input[type="radio"]:checked + span {
color: #fff;
}
.radio-btn:has(input[type="radio"]:checked) {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
}
/* ---------- BROCHURE ---------- */
.brochure-hero-section {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
align-items: start;
padding: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 14px;
margin-bottom: 36px;
}
.brochure-cover-wrap {
position: relative;
aspect-ratio: 210 / 297;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
}
.brochure-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.brochure-cover-overlay {
position: absolute;
top: 12px;
left: 12px;
}
.brochure-cover-badge {
display: inline-block;
padding: 4px 10px;
background: #d4a843;
color: #0f172a;
font-size: 0.8rem;
font-weight: 700;
border-radius: 4px;
letter-spacing: 0.02em;
}
.brochure-title {
font-size: 1.75rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px;
line-height: 1.3;
}
.brochure-desc {
color: #475569;
margin: 0 0 18px;
line-height: 1.7;
}
.brochure-bullet-list {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
font-size: 0.92rem;
color: #334155;
}
.brochure-bullet-list li {
padding-left: 18px;
position: relative;
}
.brochure-bullet-list li::before {
content: "▸";
position: absolute;
left: 0;
color: #1e3a5f;
font-weight: 700;
}
.brochure-cta-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.brochure-size-meta {
font-size: 0.82rem;
color: #64748b;
margin: 0;
}
.brochure-preview-section {
margin-bottom: 40px;
}
.brochure-thumb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 18px;
margin-bottom: 24px;
}
.brochure-page {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.brochure-page-frame {
position: relative;
aspect-ratio: 210 / 297;
border: 1px solid #cbd5e1;
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brochure-page-frame:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.brochure-page-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.brochure-page-fallback-label {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
color: #94a3b8;
font-size: 0.9rem;
font-weight: 600;
display: none;
}
.brochure-page-frame--fallback {
background: repeating-linear-gradient(45deg, #f8fafc 0, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
}
.brochure-page-frame--fallback .brochure-page-fallback-label { display: block; }
.brochure-page-num {
position: absolute;
bottom: 8px;
right: 10px;
padding: 2px 7px;
background: rgba(15, 23, 42, .78);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
border-radius: 3px;
letter-spacing: 0.03em;
}
.brochure-page figcaption {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 4px;
font-size: 0.88rem;
line-height: 1.4;
}
.brochure-page figcaption strong { color: #0f172a; }
.brochure-page figcaption span { color: #64748b; font-size: 0.82rem; }
.brochure-preview-cta {
text-align: center;
padding: 8px 0;
}
.brochure-toc-section {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 28px;
}
.brochure-toc-list {
list-style: none;
padding: 0;
margin: 16px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.95rem;
color: #334155;
line-height: 1.6;
}
.brochure-toc-list li {
display: flex;
align-items: baseline;
gap: 12px;
padding: 10px 14px;
background: #f8fafc;
border-radius: 6px;
border-left: 3px solid #1e3a5f;
}
.brochure-toc-list .toc-num {
font-family: "Courier New", monospace;
font-weight: 700;
color: #1e3a5f;
min-width: 60px;
font-size: 0.85rem;
}
.brochure-toc-list strong { color: #0f172a; }
/* ---------- BROCHURE MODAL ---------- */
.brochure-modal {
position: fixed;
inset: 0;
z-index: 1060;
display: none;
}
.brochure-modal[aria-hidden="false"],
.brochure-modal.is-open { display: block; }
.brochure-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .65);
animation: brochureFadeIn 0.18s ease-out;
}
.brochure-modal-dialog {
position: relative;
background: #fff;
width: min(92%, 480px);
margin: 8vh auto 0;
border-radius: 14px;
padding: 32px 28px;
box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
animation: brochureSlideUp 0.22s ease-out;
}
@keyframes brochureFadeIn {
from { opacity: 0; } to { opacity: 1; }
}
@keyframes brochureSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.brochure-modal-close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: 0;
font-size: 1.6rem;
line-height: 1;
color: #64748b;
cursor: pointer;
padding: 6px 10px;
border-radius: 4px;
}
.brochure-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.brochure-modal-title {
font-size: 1.2rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px;
}
.brochure-modal-desc {
font-size: 0.9rem;
color: #475569;
line-height: 1.65;
margin: 0 0 18px;
}
.brochure-modal-form .form-group { margin-bottom: 14px; }
.brochure-modal-privacy-hint {
margin-top: 16px;
font-size: 0.78rem;
color: #94a3b8;
line-height: 1.5;
text-align: center;
}
.form-help-inline {
font-size: 0.78rem;
font-weight: 400;
color: #94a3b8;
margin-left: 4px;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.trial-layout,
.booking-layout,
.brochure-layout {
grid-template-columns: 1fr;
gap: 28px;
}
.trial-side-col,
.booking-side-col,
.brochure-side-col {
position: static;
}
.trial-form-grid,
.booking-form-grid {
grid-template-columns: 1fr;
}
.brochure-hero-section {
grid-template-columns: 1fr;
gap: 20px;
}
.brochure-cover-wrap {
max-width: 260px;
margin: 0 auto;
}
.brochure-bullet-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.trial-form,
.booking-form,
.brochure-toc-section {
padding: 20px 16px;
}
.booking-slot-row {
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
.booking-slot {
padding: 7px 2px;
font-size: 0.82rem;
}
}
/* ===== end Agent 5 ===== */
/* ===== Agent 3: Resources (2026-04-20) ===== */
.resources-hero {
background: linear-gradient(135deg, #1f3a68 0%, #2b4a82 100%);
color: #ffffff;
padding: 64px 0 72px;
text-align: left;
margin-top: 0;
}
.resources-hero-inner {
max-width: 720px;
}
.resources-hero-badge {
display: inline-block;
background: rgba(255, 138, 61, 0.18);
color: #ffbe92;
border: 1px solid rgba(255, 138, 61, 0.45);
padding: 6px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 20px;
}
.resources-hero-title {
font-size: 44px;
line-height: 1.18;
font-weight: 800;
color: #ffffff;
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.resources-hero-subtitle {
font-size: 17px;
line-height: 1.6;
color: #cbd5e1;
margin: 0 0 22px;
max-width: 560px;
}
.resources-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
list-style: none;
padding: 0;
margin: 0;
}
.resources-hero-meta li {
color: #e2e8f0;
font-size: 14px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
}
.resources-hero-meta strong {
color: #ff8a3d;
font-weight: 700;
}
.resources-intro {
text-align: center;
margin-bottom: 40px;
}
.resources-intro-text {
max-width: 680px;
margin: 12px auto 0;
color: #475569;
font-size: 15px;
line-height: 1.7;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
margin-bottom: 56px;
}
.resource-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.resource-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(31, 58, 104, 0.14);
border-color: #c7d2e0;
}
.resource-card-thumb {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
background: #1f3a68;
}
.resource-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.resource-card-pages {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.72);
color: #ffffff;
font-size: 12px;
font-weight: 700;
padding: 5px 10px;
border-radius: 6px;
letter-spacing: 0.02em;
}
.resource-card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.resource-card-meta {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.resource-card-subject,
.resource-card-grade {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.resource-card-subject {
background: #eef4ff;
color: #1f3a68;
}
.resource-card-grade {
background: #fff2e8;
color: #c96a1a;
}
.resource-card-title {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
color: #111827;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.resource-card-subtitle {
font-size: 13px;
line-height: 1.5;
color: #64748b;
margin: 0 0 10px;
font-weight: 500;
}
.resource-card-desc {
font-size: 13px;
line-height: 1.65;
color: #475569;
margin: 0 0 16px;
flex: 1;
}
.resource-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
.resource-card-badge {
font-size: 11px;
font-weight: 700;
color: #0f766e;
background: #e6f7f4;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.resource-download-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #1f3a68;
color: #ffffff !important;
font-size: 13px;
font-weight: 700;
padding: 9px 14px;
border-radius: 8px;
text-decoration: none;
transition: background 0.18s ease, transform 0.18s ease;
}
.resource-download-btn:hover {
background: #ff8a3d;
color: #ffffff !important;
transform: translateY(-1px);
text-decoration: none;
}
.resource-download-btn svg {
flex-shrink: 0;
}
.resources-cta {
text-align: center;
padding: 40px 24px;
background: #f6f7fb;
border: 1px solid #e5e7eb;
border-radius: 14px;
margin-bottom: 32px;
}
.resources-cta-title {
font-size: 22px;
font-weight: 700;
color: #111827;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.resources-cta-desc {
font-size: 15px;
line-height: 1.65;
color: #475569;
margin: 0 0 20px;
}
.resources-cta-btn {
display: inline-block;
background: #ff8a3d;
color: #ffffff !important;
font-size: 15px;
font-weight: 700;
padding: 12px 28px;
border-radius: 8px;
text-decoration: none;
transition: background 0.18s ease, transform 0.18s ease;
}
.resources-cta-btn:hover {
background: #1f3a68;
color: #ffffff !important;
transform: translateY(-1px);
text-decoration: none;
}
.resources-note {
max-width: 800px;
margin: 0 auto;
padding: 24px 28px;
background: #fafbfc;
border-left: 3px solid #1f3a68;
border-radius: 6px;
}
.resources-note h4 {
font-size: 15px;
font-weight: 700;
color: #1f3a68;
margin: 0 0 10px;
}
.resources-note ul {
margin: 0;
padding-left: 20px;
}
.resources-note li {
font-size: 13px;
line-height: 1.7;
color: #475569;
margin-bottom: 4px;
}
/* Mobile responsive */
@media (max-width: 768px) {
.resources-hero { padding: 48px 0 56px; }
.resources-hero-title { font-size: 32px; }
.resources-hero-subtitle { font-size: 15px; }
.resources-hero-meta li { font-size: 12px; padding: 6px 12px; }
.resources-grid { grid-template-columns: 1fr; gap: 18px; }
.resource-card-body { padding: 18px; }
.resource-card-title { font-size: 16px; }
.resources-cta { padding: 32px 18px; }
.resources-cta-title { font-size: 19px; }
.resources-note { padding: 18px 20px; }
}
@media (max-width: 420px) {
.resource-card-footer { flex-direction: column; align-items: stretch; gap: 8px; }
.resource-download-btn { justify-content: center; }
.resource-card-badge { text-align: center; }
}
/* ===== End Agent 3 Resources ===== */
/* ===== Agent 6: Success/Reviews/Interviews (2026-04-20) ===== */
/* ---------- Shared color tokens ---------- */
:root {
--agent6-primary: #1e3a5f;
--agent6-primary-soft: #2c4f7c;
--agent6-gold: #d4a843;
--agent6-sky-tint: #dbeafe;
--agent6-medi-tint: #fee2e2;
--agent6-seoul-tint: #dcfce7;
--agent6-local-tint: #f3e8ff;
--agent6-border: #e2e8f0;
--agent6-muted: #64748b;
--agent6-card-bg: #fff;
}
/* ===== /success/ 합격자 명단 ===== */
.success-hero-gradient {
display: none;
}
.success-section {
padding-top: 40px;
padding-bottom: 80px;
}
.success-stats-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin: 0 0 32px;
padding: 28px 20px;
background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
border-radius: 14px;
color: #fff;
}
.success-stat {
text-align: center;
padding: 8px 6px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.success-stat:last-child { border-right: 0; }
.success-stat-num {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
color: var(--agent6-gold);
margin-bottom: 6px;
}
.success-stat-label {
font-size: 0.85rem;
opacity: 0.9;
letter-spacing: 0.02em;
}
.success-stat-total .success-stat-num { color: #fff; }
.success-year-tabs {
display: flex;
gap: 8px;
margin: 0 0 24px;
padding: 6px;
background: #f1f5f9;
border-radius: 12px;
flex-wrap: wrap;
}
.success-year-tab {
flex: 1 1 0;
min-width: 100px;
padding: 12px 16px;
background: transparent;
border: 0;
border-radius: 8px;
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
color: #64748b;
cursor: pointer;
transition: all 0.18s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.success-year-tab:hover { background: #fff; color: #1e3a5f; }
.success-year-tab.is-active {
background: #fff;
color: #1e3a5f;
box-shadow: 0 2px 8px rgba(30, 58, 95, 0.12);
}
.success-year-label { font-size: 1.1rem; }
.success-year-badge {
font-family: 'Pretendard Variable', sans-serif;
font-size: 0.7rem;
padding: 2px 8px;
background: #22c55e;
color: #fff;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.02em;
}
.success-filters {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 32px;
padding: 18px 20px;
background: #f8fafc;
border: 1px solid var(--agent6-border);
border-radius: 10px;
}
.success-filter-group {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.success-filter-label {
font-size: 0.8rem;
font-weight: 700;
color: #1e3a5f;
min-width: 40px;
letter-spacing: 0.04em;
}
.success-filter-btns {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.success-filter-btn,
.success-subject-btn {
padding: 6px 12px;
background: #fff;
border: 1px solid var(--agent6-border);
border-radius: 999px;
font-size: 0.82rem;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
}
.success-filter-btn:hover,
.success-subject-btn:hover {
border-color: #1e3a5f;
color: #1e3a5f;
}
.success-filter-btn.is-active,
.success-subject-btn.is-active {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
font-weight: 600;
}
.success-year-panel { display: none; }
.success-year-panel.is-active { display: block; }
.success-year-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 0 18px;
padding: 0 4px;
}
.success-year-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: #1e3a5f;
margin: 0;
}
.success-year-count {
font-size: 0.9rem;
color: var(--agent6-muted);
font-weight: 600;
}
.success-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.success-card {
position: relative;
background: var(--agent6-card-bg);
border: 1px solid var(--agent6-border);
border-radius: 12px;
padding: 20px 18px 16px;
transition: all 0.18s ease;
}
.success-card:hover {
border-color: #1e3a5f;
box-shadow: 0 6px 20px rgba(30, 58, 95, 0.08);
transform: translateY(-2px);
}
.success-card.is-hidden { display: none; }
.success-card-badge {
position: absolute;
top: 14px;
right: 14px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.success-card-badge--sky { background: var(--agent6-sky-tint); color: #1e40af; }
.success-card-badge--medi { background: var(--agent6-medi-tint); color: #991b1b; }
.success-card-badge--seoul { background: var(--agent6-seoul-tint); color: #166534; }
.success-card-badge--local { background: var(--agent6-local-tint); color: #6b21a8; }
.success-card-name {
font-family: 'Playfair Display', serif;
font-size: 1.35rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 4px;
}
.success-card-univ {
font-size: 0.95rem;
color: #334155;
margin: 0 0 14px;
font-weight: 500;
}
.success-card-meta {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin: 0;
padding-top: 12px;
border-top: 1px dashed var(--agent6-border);
}
.success-card-meta > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.success-card-meta dt {
font-size: 0.7rem;
color: var(--agent6-muted);
font-weight: 500;
letter-spacing: 0.02em;
}
.success-card-meta dd {
font-size: 0.82rem;
color: #1e293b;
font-weight: 600;
margin: 0;
}
.success-empty {
text-align: center;
padding: 48px 20px;
color: var(--agent6-muted);
background: #f8fafc;
border-radius: 10px;
}
.success-cta {
margin-top: 48px;
padding: 36px 28px;
background: #fff;
border: 2px solid #1e3a5f;
border-radius: 14px;
text-align: center;
}
.success-cta-title {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 8px;
}
.success-cta-desc {
font-size: 0.95rem;
color: #475569;
margin: 0 0 22px;
line-height: 1.6;
}
.success-cta-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.success-disclaimer {
margin-top: 36px;
text-align: center;
color: #94a3b8;
font-size: 0.8rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.success-stats-strip {
grid-template-columns: repeat(2, 1fr);
padding: 20px 14px;
gap: 10px;
}
.success-stat {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 10px;
}
.success-stat:nth-last-child(-n+2) { border-bottom: 0; }
.success-stat-num { font-size: 2rem; }
.success-year-tab { font-size: 1rem; padding: 10px 12px; min-width: 80px; }
.success-grid { grid-template-columns: 1fr; }
.success-filter-group { flex-direction: column; align-items: flex-start; gap: 6px; }
.success-cta-title { font-size: 1.3rem; }
}
/* ===== /reviews/ 수강 후기 ===== */
.reviews-section {
padding-top: 40px;
padding-bottom: 80px;
}
.reviews-summary {
display: grid;
grid-template-columns: 260px 1fr 180px;
gap: 28px;
padding: 32px;
background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
border: 1px solid var(--agent6-border);
border-radius: 14px;
margin: 0 0 32px;
align-items: center;
}
.reviews-summary-main { text-align: center; }
.reviews-summary-rating {
font-family: 'Playfair Display', serif;
font-size: 3.8rem;
font-weight: 800;
color: #1e3a5f;
line-height: 1;
margin-bottom: 8px;
}
.reviews-summary-stars {
font-size: 1.4rem;
color: #d4a843;
letter-spacing: 2px;
margin-bottom: 6px;
}
.reviews-summary-total {
color: var(--agent6-muted);
font-size: 0.9rem;
}
.reviews-star { color: #e2e8f0; }
.reviews-star.is-full { color: #d4a843; }
.reviews-star.is-half {
color: #d4a843;
opacity: 0.5;
}
.reviews-distribution { display: flex; flex-direction: column; gap: 6px; }
.reviews-dist-row {
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
gap: 10px;
}
.reviews-dist-label {
font-size: 0.85rem;
color: #475569;
font-weight: 600;
}
.reviews-dist-bar {
background: #e2e8f0;
height: 10px;
border-radius: 6px;
overflow: hidden;
}
.reviews-dist-fill {
display: block;
background: linear-gradient(90deg, #d4a843 0%, #eab308 100%);
height: 100%;
border-radius: 6px;
transition: width 0.4s ease;
}
.reviews-dist-count {
font-size: 0.82rem;
color: var(--agent6-muted);
text-align: right;
}
.reviews-summary-cta { text-align: center; }
.reviews-summary-cta .btn { width: 100%; }
.reviews-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0 0 24px;
padding: 14px 18px;
background: #f8fafc;
border-radius: 10px;
flex-wrap: wrap;
}
.reviews-sort {
display: flex;
align-items: center;
gap: 10px;
}
.reviews-sort label {
font-size: 0.85rem;
font-weight: 600;
color: #475569;
}
.reviews-sort-select {
padding: 6px 10px;
border: 1px solid var(--agent6-border);
border-radius: 6px;
background: #fff;
font-size: 0.88rem;
color: #1e293b;
}
.reviews-filter {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.reviews-filter-btn {
padding: 6px 12px;
background: #fff;
border: 1px solid var(--agent6-border);
border-radius: 999px;
font-size: 0.82rem;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
}
.reviews-filter-btn:hover { border-color: #1e3a5f; color: #1e3a5f; }
.reviews-filter-btn.is-active {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.review-card {
background: var(--agent6-card-bg);
border: 1px solid var(--agent6-border);
border-radius: 12px;
padding: 22px 20px;
transition: all 0.18s ease;
}
.review-card:hover {
border-color: #1e3a5f;
box-shadow: 0 6px 20px rgba(30, 58, 95, 0.06);
}
.review-card.is-hidden { display: none; }
.review-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.review-card-stars {
font-size: 1.05rem;
letter-spacing: 1.5px;
color: #d4a843;
}
.review-card-date {
font-size: 0.78rem;
color: var(--agent6-muted);
}
.review-card-title {
font-size: 1.08rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 10px;
line-height: 1.4;
}
.review-card-body {
font-size: 0.9rem;
color: #334155;
line-height: 1.65;
margin: 0 0 14px;
}
.review-card-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.review-card-tag {
padding: 3px 10px;
background: #f1f5f9;
color: #475569;
font-size: 0.72rem;
border-radius: 4px;
font-weight: 500;
}
.review-card-author {
font-size: 0.82rem;
color: var(--agent6-muted);
text-align: right;
font-style: italic;
}
.reviews-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--agent6-muted);
background: #f8fafc;
border-radius: 10px;
}
.reviews-disclaimer {
margin-top: 36px;
text-align: center;
color: #94a3b8;
font-size: 0.8rem;
line-height: 1.6;
}
/* Review Form Modal */
.review-form-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.review-form-modal[hidden] { display: none; }
.review-form-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
}
.review-form-modal-panel {
position: relative;
background: #fff;
border-radius: 14px;
padding: 32px 28px;
max-width: 640px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.review-form-modal-close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: 0;
font-size: 1.8rem;
color: #64748b;
cursor: pointer;
line-height: 1;
padding: 4px 10px;
}
.review-form-modal-close:hover { color: #1e3a5f; }
.review-form-title {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 8px;
}
.review-form-desc {
color: var(--agent6-muted);
font-size: 0.88rem;
margin: 0 0 22px;
line-height: 1.6;
}
.review-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.review-form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.review-form-field label {
font-size: 0.85rem;
font-weight: 600;
color: #1e293b;
}
.review-form-field .req {
color: #dc2626;
}
.review-form-field input[type="text"],
.review-form-field select,
.review-form-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--agent6-border);
border-radius: 8px;
font-size: 0.92rem;
font-family: inherit;
background: #fff;
color: #1e293b;
transition: border-color 0.15s ease;
}
.review-form-field input[type="text"]:focus,
.review-form-field select:focus,
.review-form-field textarea:focus {
outline: none;
border-color: #1e3a5f;
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}
.review-form-field textarea { resize: vertical; min-height: 120px; }
/* Star rating input */
.review-form-rating {
display: inline-flex;
flex-direction: row-reverse;
gap: 4px;
font-size: 2rem;
}
.review-form-rating input { display: none; }
.review-form-rating label {
color: #e2e8f0;
cursor: pointer;
font-weight: 400;
transition: color 0.1s ease;
line-height: 1;
}
.review-form-rating input:checked ~ label,
.review-form-rating label:hover,
.review-form-rating label:hover ~ label {
color: #d4a843;
}
.review-form-check {
flex-direction: row !important;
align-items: center;
gap: 8px !important;
font-weight: 500 !important;
font-size: 0.85rem !important;
color: #475569 !important;
}
.review-form-check input { width: auto !important; }
.review-form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--agent6-border);
}
.review-form-result {
margin-top: 14px;
padding: 12px 14px;
border-radius: 8px;
font-size: 0.9rem;
line-height: 1.5;
}
.review-form-result.is-success {
background: #dcfce7;
color: #166534;
border: 1px solid #86efac;
}
.review-form-result.is-error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
@media (max-width: 768px) {
.reviews-summary {
grid-template-columns: 1fr;
gap: 18px;
padding: 24px 18px;
}
.reviews-summary-rating { font-size: 3rem; }
.reviews-grid { grid-template-columns: 1fr; }
.reviews-toolbar { flex-direction: column; align-items: stretch; }
.review-form-modal-panel { padding: 24px 18px; }
.review-form-row { grid-template-columns: 1fr; gap: 0; }
}
/* ===== /instructor-interviews/ 강사 인터뷰 ===== */
.interviews-section {
padding-top: 40px;
padding-bottom: 80px;
}
.interviews-intro {
text-align: center;
max-width: 680px;
margin: 0 auto 48px;
}
.interviews-intro-text {
font-size: 1.05rem;
color: #334155;
line-height: 1.75;
margin: 0;
}
.interview-card {
background: #fff;
border: 1px solid var(--agent6-border);
border-radius: 16px;
padding: 36px 32px;
margin-bottom: 40px;
transition: all 0.2s ease;
}
.interview-card:hover {
box-shadow: 0 10px 30px rgba(30, 58, 95, 0.08);
}
.interview-header {
display: grid;
grid-template-columns: 140px 1fr;
gap: 24px;
align-items: center;
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid var(--agent6-border);
}
.interview-thumb {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
background: #f1f5f9;
flex-shrink: 0;
border: 3px solid #d4a843;
}
.interview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.interview-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: #1e3a5f;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.interview-head-meta { min-width: 0; }
.interview-name {
font-family: 'Playfair Display', serif;
font-size: 1.9rem;
font-weight: 800;
color: #1e3a5f;
margin: 0 0 4px;
}
.interview-role {
font-size: 0.92rem;
color: #475569;
font-weight: 500;
margin-bottom: 12px;
}
.interview-tagline {
font-size: 1.05rem;
color: #1e293b;
font-style: italic;
line-height: 1.5;
margin: 0 0 10px;
padding-left: 12px;
border-left: 3px solid #d4a843;
}
.interview-teacher-link {
display: inline-block;
color: #1e3a5f;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
border-bottom: 1px dashed #94a3b8;
padding-bottom: 1px;
}
.interview-teacher-link:hover {
color: #d4a843;
border-bottom-color: #d4a843;
}
.interview-video-wrap {
margin: 0 0 32px;
}
.interview-video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
border-radius: 10px;
overflow: hidden;
background: #0f172a;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.interview-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.interview-video-note {
margin: 10px 4px 0;
font-size: 0.78rem;
color: #94a3b8;
line-height: 1.5;
}
.interview-qa-title {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 2px solid #d4a843;
display: inline-block;
}
.interview-qa-list {
list-style: none;
padding: 0;
margin: 0;
}
.interview-qa-item {
padding: 18px 0;
border-bottom: 1px dashed var(--agent6-border);
}
.interview-qa-item:last-child { border-bottom: 0; }
.interview-q {
display: flex;
gap: 10px;
margin-bottom: 10px;
align-items: baseline;
}
.interview-q-label {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 800;
color: #d4a843;
flex-shrink: 0;
}
.interview-q-text {
font-size: 1rem;
color: #1e3a5f;
font-weight: 700;
line-height: 1.5;
}
.interview-a {
display: flex;
gap: 10px;
align-items: baseline;
padding-left: 22px;
}
.interview-a-label {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: #64748b;
flex-shrink: 0;
}
.interview-a-text {
font-size: 0.95rem;
color: #334155;
line-height: 1.75;
margin: 0;
}
.interviews-cta {
margin-top: 32px;
padding: 40px 28px;
background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
border-radius: 14px;
text-align: center;
color: #fff;
}
.interviews-cta-title {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
margin: 0 0 8px;
color: #fff;
}
.interviews-cta-desc {
font-size: 0.95rem;
opacity: 0.9;
margin: 0 0 22px;
line-height: 1.6;
}
.interviews-cta-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.interviews-cta-actions .btn-outline {
background: transparent;
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.interviews-cta-actions .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
.interviews-disclaimer {
margin-top: 28px;
text-align: center;
color: #94a3b8;
font-size: 0.8rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.interview-card { padding: 24px 20px; }
.interview-header {
grid-template-columns: 1fr;
text-align: center;
gap: 14px;
}
.interview-thumb {
width: 120px;
height: 120px;
margin: 0 auto;
}
.interview-name { font-size: 1.5rem; }
.interview-tagline {
padding-left: 0;
border-left: 0;
padding-top: 8px;
border-top: 2px solid #d4a843;
}
.interview-a { padding-left: 0; }
.interview-qa-item { padding: 14px 0; }
.interviews-cta-title { font-size: 1.3rem; }
}
/* ===== end Agent 6 ===== */
/* ===== Agent 8: StudyTips/Diagnostic/Textbooks (2026-04-20) ===== */
/* Shared page heroes */
.diagnostic-page .diagnostic-hero,
.textbook-page .textbook-hero {
background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
color: #ffffff;
padding: 80px 0 60px;
text-align: center;
}
.diagnostic-page .diagnostic-hero h1,
.textbook-page .textbook-hero h1 {
font-size: 2.4rem;
font-weight: 800;
margin: 0 0 12px;
color: #ffffff;
}
.diagnostic-page .diagnostic-hero .lead,
.textbook-page .textbook-hero .lead {
font-size: 1.15rem;
opacity: 0.9;
margin: 0 0 14px;
}
.diagnostic-page .diagnostic-hero .sub,
.textbook-page .textbook-hero .sub {
font-size: 0.95rem;
opacity: 0.75;
line-height: 1.7;
margin: 0;
}
/* Study tip card on blog archive */
.study-tip-card {
display: flex;
flex-direction: column;
padding: 24px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.study-tip-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.study-tip-card h3 {
font-size: 1.15rem;
line-height: 1.5;
margin: 0 0 10px;
color: #111827;
}
.study-tip-card p {
color: #4b5563;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Diagnostic quiz */
.diagnostic-wrap {
padding: 60px 0 100px;
background: #f8fafc;
}
.diagnostic-quiz {
max-width: 720px;
margin: 0 auto;
}
.diagnostic-intro .intro-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 40px;
text-align: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.diagnostic-intro h2 {
font-size: 1.6rem;
color: #1e3a8a;
margin: 0 0 20px;
}
.diagnostic-intro .intro-list {
text-align: left;
max-width: 480px;
margin: 0 auto 30px;
padding: 0 0 0 20px;
color: #374151;
line-height: 1.8;
}
.diagnostic-btn-start {
display: inline-block;
padding: 14px 40px;
background: #1e3a8a;
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.diagnostic-btn-start:hover {
background: #1e40af;
}
.diagnostic-progress {
margin: 0 0 30px;
}
.diagnostic-progress .progress-bar {
width: 100%;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.diagnostic-progress .progress-bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
transition: width 0.3s ease;
width: 0%;
}
.diagnostic-progress .progress-text {
text-align: right;
margin-top: 8px;
font-size: 0.9rem;
color: #6b7280;
}
.diagnostic-question {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 36px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.diagnostic-question .question-meta {
display: flex;
gap: 10px;
margin: 0 0 20px;
}
.diagnostic-question .subject-tag,
.diagnostic-question .level-tag {
font-size: 0.8rem;
padding: 4px 12px;
border-radius: 20px;
font-weight: 600;
}
.diagnostic-question .subject-tag {
background: #dbeafe;
color: #1e40af;
}
.diagnostic-question .level-tag {
background: #fef3c7;
color: #92400e;
}
.diagnostic-question h3 {
font-size: 1.25rem;
line-height: 1.6;
color: #111827;
margin: 0 0 24px;
}
.diagnostic-question .question-choices {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 28px;
}
.diagnostic-question .choice {
padding: 14px 18px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
cursor: pointer;
text-align: left;
font-size: 1rem;
color: #374151;
transition: all 0.15s ease;
}
.diagnostic-question .choice:hover {
border-color: #3b82f6;
background: #eff6ff;
}
.diagnostic-question .choice.selected {
border-color: #1e3a8a;
background: #1e3a8a;
color: #ffffff;
font-weight: 600;
}
.diagnostic-question .question-nav {
display: flex;
justify-content: space-between;
gap: 12px;
}
.diagnostic-btn-prev,
.diagnostic-btn-next {
padding: 10px 24px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #ffffff;
color: #374151;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.diagnostic-btn-next {
background: #1e3a8a;
color: #ffffff;
border-color: #1e3a8a;
}
.diagnostic-btn-next:hover:not(:disabled) {
background: #1e40af;
}
.diagnostic-btn-prev:disabled,
.diagnostic-btn-next:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Result */
.diagnostic-result .result-score-card {
background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
color: #ffffff;
border-radius: 14px;
padding: 40px;
text-align: center;
margin: 0 0 24px;
}
.diagnostic-result .score-circle {
display: inline-flex;
align-items: baseline;
gap: 4px;
margin: 0 0 14px;
}
.diagnostic-result .score-number {
font-size: 4rem;
font-weight: 800;
line-height: 1;
}
.diagnostic-result .score-unit {
font-size: 1.2rem;
opacity: 0.85;
}
.diagnostic-result .result-level {
font-size: 1.8rem;
margin: 0 0 10px;
color: #fbbf24;
}
.diagnostic-result .result-description {
font-size: 0.95rem;
line-height: 1.7;
opacity: 0.9;
margin: 0;
}
.diagnostic-result .result-breakdown,
.diagnostic-result .result-recommend,
.diagnostic-result .result-share {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 28px;
margin: 0 0 20px;
}
.diagnostic-result h3 {
font-size: 1.1rem;
color: #1e3a8a;
margin: 0 0 16px;
}
.diagnostic-result .subject-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.diagnostic-result .subject-bar {
display: grid;
grid-template-columns: 80px 1fr 40px;
gap: 12px;
align-items: center;
}
.diagnostic-result .subject-bar .label {
font-weight: 600;
color: #374151;
}
.diagnostic-result .subject-bar .bar-track {
height: 10px;
background: #e5e7eb;
border-radius: 5px;
overflow: hidden;
}
.diagnostic-result .subject-bar .bar-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #1e3a8a);
transition: width 0.5s ease;
}
.diagnostic-result .subject-bar .score {
text-align: right;
font-weight: 600;
color: #1e3a8a;
font-size: 0.9rem;
}
.diagnostic-result .recommend-class {
font-size: 1.15rem;
color: #111827;
font-weight: 600;
margin: 0 0 20px;
padding: 16px;
background: #eff6ff;
border-left: 4px solid #1e3a8a;
border-radius: 4px;
}
.diagnostic-result .result-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.diagnostic-result .btn-primary,
.diagnostic-result .btn-secondary {
flex: 1;
min-width: 180px;
padding: 14px 24px;
border-radius: 8px;
text-align: center;
font-weight: 600;
text-decoration: none;
transition: all 0.15s ease;
}
.diagnostic-result .btn-primary {
background: #1e3a8a;
color: #ffffff;
}
.diagnostic-result .btn-primary:hover {
background: #1e40af;
}
.diagnostic-result .btn-secondary {
background: #ffffff;
color: #1e3a8a;
border: 2px solid #1e3a8a;
}
.diagnostic-result .btn-secondary:hover {
background: #eff6ff;
}
.diagnostic-result .share-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.diagnostic-result .share-btn {
padding: 10px 18px;
border: 1px solid #d1d5db;
background: #ffffff;
color: #374151;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.15s ease;
}
.diagnostic-result .share-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
.diagnostic-result .share-kakao {
background: #fee500;
border-color: #fee500;
}
.diagnostic-result .share-kakao:hover {
background: #fde047;
border-color: #fde047;
}
.diagnostic-result .share-note {
color: #059669;
font-size: 0.85rem;
margin-top: 10px;
font-weight: 500;
}
/* Textbook grid */
.textbook-wrap {
padding: 60px 0 100px;
background: #f8fafc;
}
.textbook-sort {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin: 0 0 30px;
}
.textbook-sort label {
font-size: 0.9rem;
color: #6b7280;
font-weight: 500;
}
.textbook-sort select {
padding: 8px 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #ffffff;
color: #111827;
font-size: 0.9rem;
}
.textbook-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.textbook-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.textbook-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.textbook-cover {
aspect-ratio: 3 / 4;
overflow: hidden;
background: #e5e7eb;
}
.textbook-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.textbook-body {
padding: 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.textbook-title {
font-size: 1.1rem;
color: #111827;
margin: 0 0 14px;
line-height: 1.4;
}
.textbook-meta {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.textbook-meta li {
display: flex;
justify-content: space-between;
font-size: 0.88rem;
padding: 6px 0;
border-bottom: 1px dashed #e5e7eb;
}
.textbook-meta li:last-child {
border-bottom: 0;
}
.textbook-meta li span {
color: #6b7280;
}
.textbook-meta li strong {
color: #1e3a8a;
font-weight: 600;
}
.textbook-summary {
color: #4b5563;
font-size: 0.9rem;
line-height: 1.6;
margin: 0 0 18px;
flex: 1;
}
.textbook-actions {
margin-top: auto;
}
.textbook-sample-btn {
display: block;
width: 100%;
padding: 12px;
background: #1e3a8a;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
transition: background 0.15s ease;
}
.textbook-sample-btn:hover {
background: #1e40af;
color: #ffffff;
}
.textbook-note {
margin-top: 40px;
padding: 20px;
text-align: center;
background: #eff6ff;
border-radius: 10px;
color: #374151;
font-size: 0.92rem;
}
.textbook-note a {
color: #1e3a8a;
font-weight: 600;
}
/* Responsive */
@media (max-width: 640px) {
.diagnostic-page .diagnostic-hero,
.textbook-page .textbook-hero {
padding: 50px 0 40px;
}
.diagnostic-page .diagnostic-hero h1,
.textbook-page .textbook-hero h1 {
font-size: 1.7rem;
}
.diagnostic-intro .intro-card,
.diagnostic-question {
padding: 24px;
}
.diagnostic-result .result-score-card {
padding: 28px 20px;
}
.diagnostic-result .score-number {
font-size: 3rem;
}
.diagnostic-result .result-level {
font-size: 1.4rem;
}
.diagnostic-result .subject-bar {
grid-template-columns: 64px 1fr 36px;
gap: 8px;
}
.textbook-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ===== Agent 12: Portal + Chart (2026-04-20) ===== */
.portal-login-page, .portal-dashboard-page {
background: #020617;
min-height: 100vh;
padding: 60px 20px;
color: #e2e8f0;
}
.portal-login {
max-width: 480px;
margin: 0 auto;
}
.portal-login-wrap {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 16px;
padding: 40px 32px;
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.portal-login-title {
font-family: 'Playfair Display', serif;
font-size: 2rem;
margin: 0 0 8px;
color: #d4a843;
text-align: center;
}
.portal-login-sub {
text-align: center;
color: #94a3b8;
margin: 0 0 24px;
font-size: 0.95rem;
}
.portal-login-error {
background: #7f1d1d;
color: #fecaca;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 0.9rem;
text-align: center;
}
.portal-login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.portal-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.portal-field span {
font-size: 0.85rem;
color: #cbd5e1;
}
.portal-field input {
background: #020617;
border: 1px solid #334155;
color: #e2e8f0;
border-radius: 8px;
padding: 12px 14px;
font-size: 1rem;
}
.portal-field input:focus {
outline: none;
border-color: #3b82f6;
}
.portal-remember {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #94a3b8;
}
.portal-login-btn {
background: #d4a843;
color: #020617;
border: none;
border-radius: 8px;
padding: 14px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
margin-top: 8px;
}
.portal-login-btn:hover { background: #e5b94f; }
.portal-login-notice, .portal-demo-box {
margin-top: 24px;
padding: 16px 20px;
background: #020617;
border: 1px solid #1e293b;
border-radius: 10px;
font-size: 0.88rem;
}
.portal-login-notice h3, .portal-demo-box h3 {
margin: 0 0 8px;
font-size: 1rem;
color: #d4a843;
}
.portal-demo-box { border-color: #3b82f6; }
.portal-demo-box code {
background: #1e293b;
color: #22c55e;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.85rem;
}
/* Dashboard */
.portal-dashboard {
max-width: 1100px;
margin: 0 auto;
}
.portal-dashboard-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid #1e293b;
}
.portal-dashboard-header h1 {
margin: 0;
font-family: 'Playfair Display', serif;
color: #d4a843;
font-size: 1.8rem;
}
.portal-welcome {
margin: 6px 0 0;
color: #94a3b8;
font-size: 0.95rem;
}
.portal-logout {
background: #1e293b;
color: #e2e8f0;
border: 1px solid #334155;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
font-size: 0.9rem;
}
.portal-logout:hover { background: #334155; }
.portal-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.portal-stat-card {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 12px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.portal-stat-label {
font-size: 0.8rem;
color: #94a3b8;
letter-spacing: 0.05em;
}
.portal-stat-value {
font-size: 1.4rem;
color: #e2e8f0;
font-weight: 700;
}
.portal-section {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.portal-section h2 {
margin: 0 0 16px;
font-size: 1.15rem;
color: #d4a843;
font-family: 'Playfair Display', serif;
}
.portal-attendance-cal .portal-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 6px;
font-size: 0.8rem;
color: #94a3b8;
text-align: center;
}
.portal-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.portal-cal-cell {
aspect-ratio: 1;
background: #020617;
border: 1px solid #1e293b;
border-radius: 6px;
padding: 6px;
font-size: 0.78rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.portal-cal-cell.portal-cal-empty { background: transparent; border: none; }
.portal-cal-day { color: #cbd5e1; font-weight: 600; }
.portal-cal-mark { font-size: 0.7rem; opacity: 0.85; }
.portal-cal-status-present { background: rgba(34, 197, 94, 0.15); border-color: #22c55e; }
.portal-cal-status-present .portal-cal-mark { color: #22c55e; }
.portal-cal-status-late { background: rgba(212, 168, 67, 0.15); border-color: #d4a843; }
.portal-cal-status-late .portal-cal-mark { color: #d4a843; }
.portal-cal-status-absent { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; }
.portal-cal-status-absent .portal-cal-mark { color: #ef4444; }
.portal-cal-legend {
display: flex;
gap: 18px;
margin-top: 14px;
font-size: 0.82rem;
color: #94a3b8;
}
.portal-cal-legend .lg-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
}
.lg-present { background: #22c55e; }
.lg-late { background: #d4a843; }
.lg-absent { background: #ef4444; }
.portal-exam-scores {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.portal-exam-card {
background: #020617;
border: 1px solid #1e293b;
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
}
.portal-exam-subject {
color: #94a3b8;
font-size: 0.85rem;
}
.portal-exam-score {
color: #d4a843;
font-size: 1.8rem;
font-weight: 700;
}
.portal-exam-ym {
color: #64748b;
font-size: 0.78rem;
}
.portal-chart-wrap {
background: #020617;
border-radius: 10px;
padding: 16px;
position: relative;
height: 320px;
}
.portal-notice-list {
list-style: none;
margin: 0;
padding: 0;
}
.portal-notice-list li {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #1e293b;
align-items: center;
gap: 12px;
}
.portal-notice-list li:last-child { border-bottom: none; }
.portal-notice-list a {
color: #e2e8f0;
text-decoration: none;
flex: 1;
}
.portal-notice-list a:hover { color: #3b82f6; }
.portal-notice-list time {
color: #64748b;
font-size: 0.82rem;
white-space: nowrap;
}
@media (max-width: 640px) {
.portal-dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.portal-cal-cell { font-size: 0.7rem; padding: 4px; }
.portal-cal-mark { font-size: 0.6rem; }
}
/* ===== /Agent 12 ===== */
/* ===== Agent 14: bbPress Community (2026-04-20) ===== */
/* Namespace: .bbp-forum-override wraps bbPress content; standalone .community-* classes for sidebar/hot-topics */
/* -- Container wrapper -- */
.bbp-forum-override {
max-width: 1200px;
margin: 40px auto;
padding: 24px;
color: #e5e7eb;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.bbp-forum-override .bbp-breadcrumb {
color: #94a3b8;
font-size: 0.85rem;
margin-bottom: 20px;
padding: 10px 14px;
background: rgba(15, 23, 42, 0.6);
border-radius: 6px;
border-left: 3px solid #D4A843;
}
.bbp-forum-override .bbp-breadcrumb a {
color: #D4A843;
text-decoration: none;
}
.bbp-forum-override .bbp-breadcrumb a:hover {
color: #e5b86a;
text-decoration: underline;
}
/* -- Two-column layout: main + sidebar -- */
.bbp-forum-override .bbp-layout-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: flex-start;
}
/* -- Forum archive list -- */
.bbp-forum-override #bbpress-forums,
body.forum-archive #bbpress-forums,
body.single-forum #bbpress-forums,
body.single-topic #bbpress-forums {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 20px;
color: #e5e7eb;
}
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-lead-topic {
background: transparent;
border: 1px solid #1e293b;
border-radius: 6px;
overflow: hidden;
}
#bbpress-forums li.bbp-header {
background: #1e293b !important;
color: #D4A843 !important;
font-weight: 600;
padding: 12px 14px;
border-bottom: 1px solid #334155;
font-size: 0.9rem;
letter-spacing: 0.02em;
}
#bbpress-forums li.bbp-footer {
background: #0f172a !important;
color: #94a3b8 !important;
padding: 10px 14px;
border-top: 1px solid #1e293b;
}
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
background: #0f172a;
border-bottom: 1px solid #1e293b;
padding: 16px 14px;
transition: background 0.2s ease;
}
#bbpress-forums li.bbp-body ul.forum:hover,
#bbpress-forums li.bbp-body ul.topic:hover {
background: #131c2f;
}
#bbpress-forums li.bbp-body ul.forum:last-child,
#bbpress-forums li.bbp-body ul.topic:last-child {
border-bottom: none;
}
/* -- Forum / Topic titles -- */
#bbpress-forums a.bbp-forum-title,
#bbpress-forums a.bbp-topic-permalink {
color: #f1f5f9 !important;
font-weight: 600;
text-decoration: none;
font-size: 1.02rem;
}
#bbpress-forums a.bbp-forum-title:hover,
#bbpress-forums a.bbp-topic-permalink:hover {
color: #D4A843 !important;
}
#bbpress-forums .bbp-forum-content,
#bbpress-forums .bbp-topic-content {
color: #cbd5e1;
font-size: 0.92rem;
margin-top: 6px;
line-height: 1.6;
}
/* -- Author meta -- */
#bbpress-forums .bbp-author-avatar img,
#bbpress-forums img.avatar {
border-radius: 50%;
border: 2px solid #334155;
margin-right: 8px;
}
#bbpress-forums .bbp-author-name,
#bbpress-forums .bbp-reply-author a {
color: #60a5fa !important;
font-weight: 500;
font-size: 0.88rem;
}
#bbpress-forums .bbp-meta,
#bbpress-forums .bbp-topic-meta,
#bbpress-forums .bbp-topic-freshness a,
#bbpress-forums .bbp-reply-meta {
color: #94a3b8;
font-size: 0.82rem;
}
#bbpress-forums .bbp-topic-freshness a,
#bbpress-forums .bbp-reply-ip,
#bbpress-forums .bbp-topic-freshness-author a {
color: #60a5fa !important;
}
/* -- Single topic / reply bubbles -- */
#bbpress-forums div.reply,
#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.bbp-reply-header,
#bbpress-forums .bbp-reply-content {
background: #131c2f !important;
border: 1px solid #1e293b !important;
color: #e5e7eb !important;
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
}
#bbpress-forums .bbp-reply-content,
#bbpress-forums .bbp-topic-content {
background: transparent !important;
border: none !important;
padding: 0;
margin-bottom: 0;
font-size: 0.96rem;
line-height: 1.7;
}
#bbpress-forums .bbp-reply-content p,
#bbpress-forums .bbp-topic-content p {
color: #e5e7eb;
margin-bottom: 10px;
}
#bbpress-forums .bbp-body div.even {
background: #0f172a !important;
}
#bbpress-forums .bbp-body div.odd {
background: #131c2f !important;
}
/* -- Reply form -- */
#bbpress-forums #new-reply-title h3,
#bbpress-forums #new-topic-title h3 {
background: #1e293b !important;
color: #D4A843 !important;
padding: 14px 16px;
border: 1px solid #334155 !important;
border-radius: 6px 6px 0 0;
margin: 0;
font-size: 1.05rem;
}
#bbpress-forums fieldset.bbp-form {
background: #0f172a !important;
border: 1px solid #1e293b !important;
border-radius: 0 0 6px 6px;
padding: 20px;
color: #e5e7eb;
}
#bbpress-forums fieldset.bbp-form label {
color: #cbd5e1;
font-weight: 500;
display: block;
margin-bottom: 6px;
font-size: 0.9rem;
}
#bbpress-forums fieldset.bbp-form input[type="text"],
#bbpress-forums fieldset.bbp-form input[type="password"],
#bbpress-forums fieldset.bbp-form input[type="email"],
#bbpress-forums fieldset.bbp-form select,
#bbpress-forums fieldset.bbp-form textarea {
background: #020617 !important;
color: #f1f5f9 !important;
border: 1px solid #334155 !important;
border-radius: 4px;
padding: 10px 12px;
font-size: 0.95rem;
width: 100%;
box-sizing: border-box;
}
#bbpress-forums fieldset.bbp-form input:focus,
#bbpress-forums fieldset.bbp-form textarea:focus,
#bbpress-forums fieldset.bbp-form select:focus {
border-color: #D4A843 !important;
outline: none;
box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.15);
}
#bbpress-forums button,
#bbpress-forums input[type="submit"] {
background: #D4A843 !important;
color: #0f172a !important;
border: none !important;
padding: 10px 22px !important;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
font-size: 0.95rem;
}
#bbpress-forums button:hover,
#bbpress-forums input[type="submit"]:hover {
background: #e5b86a !important;
}
/* -- TinyMCE/WP editor in reply form -- */
#bbpress-forums .wp-editor-container,
#bbpress-forums .wp-editor-tools {
background: #020617 !important;
border: 1px solid #334155 !important;
}
#bbpress-forums .mce-panel,
#bbpress-forums .mce-toolbar-grp {
background: #1e293b !important;
border-color: #334155 !important;
}
/* -- Pagination -- */
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span {
background: #1e293b;
color: #cbd5e1;
padding: 6px 12px;
border-radius: 4px;
margin: 0 3px;
text-decoration: none;
border: 1px solid #334155;
font-size: 0.88rem;
}
#bbpress-forums .bbp-pagination-links a:hover,
#bbpress-forums .bbp-pagination-links span.current {
background: #D4A843;
color: #0f172a;
border-color: #D4A843;
}
/* -- Admin/Moderator badge -- */
#bbpress-forums li.bbp-body ul.forum .bbp-author-role,
#bbpress-forums li.bbp-body ul.topic .bbp-author-role,
#bbpress-forums div.reply .bbp-author-role {
display: inline-block;
background: #D4A843;
color: #0f172a;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 6px;
}
/* -- Sidebar widgets -- */
.community-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.community-sidebar-widget {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 18px;
color: #e5e7eb;
}
.community-sidebar-widget h3 {
color: #D4A843;
font-size: 1rem;
font-weight: 700;
margin: 0 0 14px 0;
padding-bottom: 10px;
border-bottom: 2px solid #1e293b;
display: flex;
align-items: center;
gap: 8px;
}
.community-sidebar-widget h3 .widget-icon {
color: #D4A843;
font-size: 1.1rem;
}
/* -- Hot topics list -- */
.community-hot-topics {
list-style: none;
padding: 0;
margin: 0;
}
.community-hot-topics li {
padding: 10px 0;
border-bottom: 1px solid #1e293b;
display: flex;
align-items: flex-start;
gap: 10px;
}
.community-hot-topics li:last-child {
border-bottom: none;
}
.community-hot-topics .rank {
display: inline-block;
min-width: 22px;
height: 22px;
text-align: center;
line-height: 22px;
background: #1e293b;
color: #94a3b8;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
.community-hot-topics li:nth-child(1) .rank {
background: #D4A843;
color: #0f172a;
}
.community-hot-topics li:nth-child(2) .rank {
background: #cbd5e1;
color: #0f172a;
}
.community-hot-topics li:nth-child(3) .rank {
background: #a16207;
color: #fff;
}
.community-hot-topics a {
color: #e5e7eb;
text-decoration: none;
font-size: 0.88rem;
line-height: 1.5;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.community-hot-topics a:hover {
color: #D4A843;
}
.community-hot-topics .reply-count {
color: #60a5fa;
font-size: 0.76rem;
margin-left: 4px;
}
/* -- Latest replies -- */
.community-latest-replies {
list-style: none;
padding: 0;
margin: 0;
}
.community-latest-replies li {
padding: 12px 0;
border-bottom: 1px solid #1e293b;
}
.community-latest-replies li:last-child {
border-bottom: none;
}
.community-latest-replies .reply-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: #94a3b8;
margin-bottom: 4px;
}
.community-latest-replies .reply-author {
color: #60a5fa;
font-weight: 500;
}
.community-latest-replies .reply-topic-link {
color: #e5e7eb;
text-decoration: none;
font-size: 0.88rem;
line-height: 1.5;
display: block;
}
.community-latest-replies .reply-topic-link:hover {
color: #D4A843;
}
/* -- Rules box -- */
.community-rules-mini {
list-style: none;
padding: 0;
margin: 0;
counter-reset: rule-counter;
}
.community-rules-mini li {
counter-increment: rule-counter;
padding: 8px 0 8px 28px;
position: relative;
font-size: 0.86rem;
color: #cbd5e1;
line-height: 1.5;
border-bottom: 1px dashed #1e293b;
}
.community-rules-mini li:last-child {
border-bottom: none;
}
.community-rules-mini li::before {
content: counter(rule-counter);
position: absolute;
left: 0;
top: 8px;
width: 20px;
height: 20px;
background: #D4A843;
color: #0f172a;
border-radius: 50%;
text-align: center;
line-height: 20px;
font-size: 0.72rem;
font-weight: 700;
}
.community-sidebar-widget .rules-link {
display: block;
margin-top: 12px;
padding: 8px 12px;
background: #1e293b;
color: #D4A843;
text-decoration: none;
text-align: center;
border-radius: 4px;
font-size: 0.84rem;
font-weight: 500;
transition: background 0.2s ease;
}
.community-sidebar-widget .rules-link:hover {
background: #334155;
}
/* -- Community rules page -- */
.community-rules-box {
max-width: 820px;
margin: 40px auto;
padding: 32px;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 10px;
color: #e5e7eb;
font-family: 'Inter', sans-serif;
}
.community-rules-box h2 {
color: #D4A843;
font-size: 1.6rem;
font-family: 'Playfair Display', serif;
font-weight: 700;
margin: 0 0 14px 0;
padding-bottom: 14px;
border-bottom: 2px solid #1e293b;
text-align: center;
}
.community-rules-box .rules-intro {
color: #cbd5e1;
font-size: 0.96rem;
text-align: center;
margin-bottom: 24px;
padding: 14px;
background: rgba(212, 168, 67, 0.08);
border-left: 3px solid #D4A843;
border-radius: 4px;
}
.community-rules-box .rules-list {
list-style: none;
padding: 0;
counter-reset: rule-counter;
margin: 0 0 20px 0;
}
.community-rules-box .rules-list li {
counter-increment: rule-counter;
padding: 16px 16px 16px 60px;
position: relative;
margin-bottom: 12px;
background: #131c2f;
border: 1px solid #1e293b;
border-radius: 6px;
line-height: 1.7;
color: #cbd5e1;
font-size: 0.96rem;
}
.community-rules-box .rules-list li::before {
content: counter(rule-counter);
position: absolute;
left: 16px;
top: 16px;
width: 32px;
height: 32px;
background: #D4A843;
color: #0f172a;
border-radius: 50%;
text-align: center;
line-height: 32px;
font-size: 0.95rem;
font-weight: 700;
}
.community-rules-box .rules-list li strong {
color: #D4A843;
font-size: 1.02rem;
display: inline-block;
margin-right: 4px;
}
.community-rules-box .rules-footer {
padding: 14px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid #1e293b;
border-radius: 6px;
color: #94a3b8;
font-size: 0.86rem;
text-align: center;
margin: 0;
}
/* -- Responsive -- */
@media (max-width: 960px) {
.bbp-forum-override .bbp-layout-grid {
grid-template-columns: 1fr;
}
.community-sidebar {
order: 2;
}
}
@media (max-width: 640px) {
.bbp-forum-override {
padding: 14px;
margin: 20px auto;
}
#bbpress-forums li.bbp-header {
font-size: 0.82rem;
padding: 10px;
}
#bbpress-forums a.bbp-forum-title,
#bbpress-forums a.bbp-topic-permalink {
font-size: 0.94rem;
}
.community-rules-box {
padding: 20px;
}
.community-rules-box .rules-list li {
padding: 14px 14px 14px 56px;
font-size: 0.9rem;
}
.community-rules-box h2 {
font-size: 1.3rem;
}
}
/* ===== end Agent 14 ===== */
/* ===== Agent 15: WooCommerce Goods (2026-04-20) ===== */
/* ---------- Shop archive ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
padding: 0;
margin: 32px 0;
list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: #1a1f2e;
border: 1px solid rgba(212, 168, 67, 0.12);
border-radius: 12px;
padding: 20px;
margin: 0 !important;
width: 100% !important;
float: none !important;
transition: transform 0.2s ease, border-color 0.2s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
border-color: rgba(212, 168, 67, 0.35);
box-shadow: 0 8px 28px rgba(212, 168, 67, 0.12);
}
.woocommerce ul.products li.product a img {
border-radius: 8px;
margin-bottom: 14px;
background: #0f1420;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
font-size: 1rem !important;
font-weight: 600 !important;
color: #f3f4f6 !important;
padding: 0 !important;
margin: 0 0 8px 0 !important;
line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price {
color: #D4A843 !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
display: block;
}
.woocommerce ul.products li.product .price del {
color: rgba(243, 244, 246, 0.45) !important;
margin-right: 6px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
display: inline-block !important;
background: #D4A843 !important;
color: #0a0d17 !important;
border: none !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
text-transform: none !important;
margin-top: 6px !important;
transition: background 0.15s ease, transform 0.15s ease !important;
}
.woocommerce ul.products li.product .button:hover {
background: #E0B85A !important;
transform: translateY(-1px);
}
/* Categories navigation */
.woocommerce .products .onsale,
.woocommerce span.onsale {
background: #22c55e !important;
color: #0a0d17 !important;
border-radius: 999px !important;
font-weight: 700 !important;
min-height: unset !important;
min-width: unset !important;
padding: 4px 12px !important;
line-height: 1.2 !important;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
color: rgba(243, 244, 246, 0.7);
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
background: #1a1f2e;
color: #f3f4f6;
border: 1px solid rgba(212, 168, 67, 0.25);
border-radius: 8px;
padding: 8px 12px;
}
/* ---------- Single product page ---------- */
.woocommerce div.product .product_title {
color: #f3f4f6 !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: #D4A843 !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
color: rgba(243, 244, 246, 0.85);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 24px;
padding: 16px 18px;
background: rgba(212, 168, 67, 0.05);
border-left: 3px solid #D4A843;
border-radius: 0 8px 8px 0;
}
.woocommerce div.product form.cart {
margin: 22px 0;
padding: 18px;
background: #1a1f2e;
border: 1px solid rgba(212, 168, 67, 0.15);
border-radius: 10px;
}
.woocommerce div.product form.cart div.quantity input[type="number"],
.woocommerce .quantity .qty {
background: #0f1420 !important;
border: 1px solid rgba(212, 168, 67, 0.3) !important;
color: #f3f4f6 !important;
padding: 8px 10px;
border-radius: 6px;
min-width: 70px;
text-align: center;
}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
background: #D4A843 !important;
color: #0a0d17 !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 1rem !important;
text-transform: none !important;
transition: background 0.15s ease, transform 0.15s ease;
cursor: pointer;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: #E0B85A !important;
transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart .button.alt {
background: #D4A843 !important;
color: #0a0d17 !important;
}
/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0 !important;
margin: 28px 0 0 0 !important;
border-bottom: 1px solid rgba(212, 168, 67, 0.2) !important;
list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
margin: 0 4px 0 0 !important;
padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: rgba(243, 244, 246, 0.65) !important;
padding: 12px 18px !important;
font-weight: 500 !important;
display: block;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: #D4A843 !important;
border-bottom-color: #D4A843;
}
.woocommerce div.product .woocommerce-tabs .panel {
background: transparent !important;
color: rgba(243, 244, 246, 0.9) !important;
padding: 22px 4px !important;
line-height: 1.75;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
color: #f3f4f6 !important;
font-size: 1.3rem !important;
margin-bottom: 14px !important;
}
/* Variations */
.woocommerce div.product form.cart .variations {
margin: 0 0 18px 0;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
color: #f3f4f6 !important;
padding: 10px 8px !important;
background: transparent !important;
}
.woocommerce div.product form.cart .variations select {
background: #0f1420 !important;
color: #f3f4f6 !important;
border: 1px solid rgba(212, 168, 67, 0.3) !important;
padding: 8px 12px;
border-radius: 6px;
min-width: 140px;
}
.woocommerce div.product .reset_variations {
color: #D4A843 !important;
margin-left: 8px;
}
/* Stock status */
.woocommerce div.product p.stock,
.woocommerce .stock {
color: #22c55e !important;
font-weight: 600;
}
.woocommerce div.product p.out-of-stock,
.woocommerce .out-of-stock {
color: #ef4444 !important;
}
/* ---------- Cart ---------- */
.woocommerce-cart .cart_totals,
.woocommerce-cart table.cart,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cross-sells {
color: #f3f4f6;
}
.woocommerce table.shop_table {
background: #1a1f2e !important;
border: 1px solid rgba(212, 168, 67, 0.12) !important;
border-radius: 10px !important;
border-collapse: separate !important;
border-spacing: 0;
overflow: hidden;
color: #f3f4f6 !important;
}
.woocommerce table.shop_table th {
background: rgba(212, 168, 67, 0.08) !important;
color: #D4A843 !important;
font-weight: 700 !important;
padding: 14px 12px !important;
border: none !important;
}
.woocommerce table.shop_table td {
background: transparent !important;
color: rgba(243, 244, 246, 0.9) !important;
padding: 16px 12px !important;
border-top: 1px solid rgba(212, 168, 67, 0.08) !important;
}
.woocommerce table.shop_table td.product-name a {
color: #f3f4f6 !important;
font-weight: 600;
}
.woocommerce table.shop_table td.product-name a:hover {
color: #D4A843 !important;
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
color: #f3f4f6 !important;
}
.woocommerce-cart table.cart .product-thumbnail img {
width: 64px;
height: auto;
border-radius: 6px;
}
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-cart .cart input[type="text"] {
background: #0f1420 !important;
border: 1px solid rgba(212, 168, 67, 0.25) !important;
color: #f3f4f6 !important;
padding: 10px 12px !important;
border-radius: 6px !important;
}
.woocommerce .cart_totals h2 {
color: #f3f4f6 !important;
font-size: 1.25rem !important;
margin-bottom: 14px !important;
}
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
margin-top: 30px;
}
.woocommerce a.remove {
color: #ef4444 !important;
font-weight: 700;
}
.woocommerce a.remove:hover {
background: #ef4444 !important;
color: #fff !important;
}
/* ---------- Checkout ---------- */
.woocommerce-checkout h3,
.woocommerce form .form-row label {
color: #f3f4f6 !important;
}
.woocommerce-checkout #customer_details {
color: #f3f4f6;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
background: #0f1420 !important;
border: 1px solid rgba(212, 168, 67, 0.25) !important;
color: #f3f4f6 !important;
padding: 12px 14px !important;
border-radius: 8px !important;
width: 100%;
font-size: 1rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
border-color: #D4A843 !important;
outline: none;
box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.woocommerce-checkout #payment {
background: #1a1f2e !important;
border: 1px solid rgba(212, 168, 67, 0.15) !important;
border-radius: 10px !important;
padding: 18px !important;
}
.woocommerce-checkout #payment ul.payment_methods {
padding: 0 !important;
border-bottom: 1px solid rgba(212, 168, 67, 0.12) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: 10px 0;
}
.woocommerce-checkout #payment ul.payment_methods li label {
color: #f3f4f6 !important;
font-weight: 600;
}
.woocommerce-checkout #payment div.payment_box {
background: rgba(212, 168, 67, 0.06) !important;
color: rgba(243, 244, 246, 0.85) !important;
border-radius: 8px !important;
padding: 14px 16px !important;
margin: 8px 0 12px !important;
}
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: rgba(212, 168, 67, 0.12) !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}
.woocommerce-checkout-review-order-table tfoot .order-total strong {
color: #D4A843 !important;
font-size: 1.2rem;
}
/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: #1a1f2e !important;
border-top: 3px solid #D4A843 !important;
color: #f3f4f6 !important;
padding: 14px 18px !important;
border-radius: 0 0 10px 10px;
margin: 20px 0 !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
color: #D4A843 !important;
}
.woocommerce-error {
border-top-color: #ef4444 !important;
}
.woocommerce-error::before {
color: #ef4444 !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
background: #D4A843 !important;
color: #0a0d17 !important;
}
/* ---------- My account ---------- */
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
margin-bottom: 4px;
}
.woocommerce-MyAccount-navigation ul li a {
display: block;
color: rgba(243, 244, 246, 0.75) !important;
padding: 10px 14px;
border-radius: 8px;
background: #1a1f2e;
border: 1px solid rgba(212, 168, 67, 0.1);
transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
background: rgba(212, 168, 67, 0.12) !important;
color: #D4A843 !important;
border-color: rgba(212, 168, 67, 0.3);
}
.woocommerce-MyAccount-content {
color: rgba(243, 244, 246, 0.9);
}
/* Quantity buttons */
.woocommerce .quantity input[type=number]::-webkit-inner-spin-button,
.woocommerce .quantity input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
color: rgba(243, 244, 246, 0.55);
margin-bottom: 20px;
}
.woocommerce .woocommerce-breadcrumb a {
color: rgba(243, 244, 246, 0.75);
}
.woocommerce .woocommerce-breadcrumb a:hover {
color: #D4A843;
}
/* ---------- Goods about page ---------- */
.goods-about-lead {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(243, 244, 246, 0.9);
padding: 18px 22px;
background: rgba(212, 168, 67, 0.07);
border-left: 4px solid #D4A843;
border-radius: 0 10px 10px 0;
margin-bottom: 28px;
}
.goods-highlight {
margin: 24px 0 !important;
}
.goods-highlight .wp-block-column {
background: #1a1f2e;
padding: 22px 20px;
border: 1px solid rgba(212, 168, 67, 0.12);
border-radius: 12px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.goods-highlight .wp-block-column:hover {
transform: translateY(-3px);
border-color: rgba(212, 168, 67, 0.3);
}
.goods-highlight .wp-block-column h3 {
color: #D4A843 !important;
margin-top: 0;
font-size: 1.15rem;
}
.goods-highlight .wp-block-button__link {
background: #D4A843;
color: #0a0d17;
padding: 10px 18px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
}
.goods-highlight .is-style-outline .wp-block-button__link {
background: transparent;
color: #D4A843;
border: 1px solid #D4A843;
}
.goods-highlight .wp-block-button__link:hover {
background: #E0B85A;
color: #0a0d17;
}
/* Responsive */
@media (max-width: 720px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
}
.woocommerce div.product .product_title {
font-size: 1.4rem !important;
}
.woocommerce div.product form.cart .variations select {
min-width: 100%;
}
.woocommerce-cart table.cart .product-thumbnail img {
width: 48px;
}
}
/* ===== end Agent 15 ===== */
/* ===== Agent 13: Chatbot + Simulator (2026-04-20) ===== */
/* ---------- Chatbot ---------- */
.chatbot-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 28px;
align-items: start;
}
.chatbot-sidebar-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 22px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
position: sticky;
top: 90px;
}
.chatbot-sidebar-title {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 6px;
}
.chatbot-sidebar-desc {
font-size: 0.86rem;
color: #64748b;
line-height: 1.55;
margin: 0 0 14px;
}
.chatbot-quick-questions {
display: flex;
flex-direction: column;
gap: 8px;
}
.chatbot-quick-btn {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.88rem;
color: #1e293b;
text-align: left;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.chatbot-quick-btn:hover {
background: #eff6ff;
border-color: #93c5fd;
color: #1d4ed8;
}
.chatbot-quick-btn:active {
transform: scale(0.98);
}
.chatbot-sidebar-cta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.chatbot-sidebar-cta-desc {
font-size: 0.85rem;
color: #475569;
margin: 0 0 10px;
}
.chatbot-sidebar-cta-btn {
width: 100%;
display: block;
text-align: center;
}
.chatbot-main {
min-height: 600px;
}
.chatbot-ui {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
min-height: 600px;
}
.chatbot-stream {
flex: 1;
padding: 24px;
overflow-y: auto;
max-height: 560px;
background: #fafbfc;
display: flex;
flex-direction: column;
gap: 16px;
}
.chatbot-message {
display: flex;
gap: 12px;
max-width: 85%;
animation: chatbotFadeIn 0.25s ease-out;
}
@keyframes chatbotFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.chatbot-message--bot {
align-self: flex-start;
}
.chatbot-message--user {
align-self: flex-end;
flex-direction: row-reverse;
}
.chatbot-avatar {
width: 36px;
height: 36px;
border-radius: 10px;
background: #1d4ed8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.78rem;
flex-shrink: 0;
}
.chatbot-message--user .chatbot-avatar {
background: #334155;
}
.chatbot-bubble {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px 16px;
font-size: 0.93rem;
line-height: 1.65;
color: #1e293b;
word-break: break-word;
}
.chatbot-message--bot .chatbot-bubble {
border-top-left-radius: 2px;
}
.chatbot-message--user .chatbot-bubble {
background: #1d4ed8;
color: #fff;
border-color: #1d4ed8;
border-top-right-radius: 2px;
}
.chatbot-message--loading .chatbot-bubble {
color: #64748b;
font-style: italic;
}
.chatbot-input-wrap {
display: flex;
gap: 10px;
padding: 14px;
border-top: 1px solid #e5e7eb;
background: #fff;
}
.chatbot-input {
flex: 1;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.93rem;
font-family: inherit;
resize: none;
transition: border-color 0.15s;
}
.chatbot-input:focus {
outline: none;
border-color: #1d4ed8;
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}
.chatbot-send-btn {
flex-shrink: 0;
align-self: stretch;
padding-left: 22px;
padding-right: 22px;
}
.chatbot-send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.chatbot-disclaimer {
font-size: 0.78rem;
color: #64748b;
text-align: center;
padding: 10px 14px 14px;
margin: 0;
background: #fff;
}
.chatbot-disclaimer a {
color: #1d4ed8;
text-decoration: underline;
}
/* ---------- Simulator ---------- */
.simulator-layout {
display: flex;
flex-direction: column;
gap: 36px;
}
.simulator-section-title {
font-size: 1.4rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px;
}
.simulator-section-desc {
font-size: 0.95rem;
color: #475569;
margin: 0 0 20px;
line-height: 1.6;
}
.simulator-form {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 26px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.simulator-fieldset {
border: none;
padding: 0;
margin: 0 0 22px;
}
.simulator-legend {
font-size: 0.98rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
padding: 0;
}
.simulator-hint {
font-size: 0.83rem;
color: #64748b;
margin: 0 0 10px;
}
.simulator-radio-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.simulator-radio {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
cursor: pointer;
background: #f8fafc;
font-size: 0.92rem;
color: #334155;
transition: all 0.15s;
}
.simulator-radio input[type="radio"] {
accent-color: #1d4ed8;
}
.simulator-radio:has(input:checked) {
background: #dbeafe;
border-color: #1d4ed8;
color: #1d4ed8;
font-weight: 600;
}
.simulator-score-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
}
.simulator-score-field,
.simulator-target-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.simulator-score-field span,
.simulator-target-field span {
font-size: 0.85rem;
font-weight: 600;
color: #475569;
}
.simulator-score-field input,
.simulator-target-field select {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 9px 12px;
font-size: 0.95rem;
background: #fff;
color: #0f172a;
transition: border-color 0.15s;
}
.simulator-score-field input:focus,
.simulator-target-field select:focus {
outline: none;
border-color: #1d4ed8;
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}
.simulator-target-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.simulator-form-actions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.simulator-submit-btn {
flex: 1;
}
.simulator-reset-btn {
flex: 0 0 auto;
}
.simulator-result {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 26px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.simulator-result-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-bottom: 26px;
}
.simulator-summary-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px 16px;
}
.simulator-summary-label {
font-size: 0.8rem;
color: #64748b;
margin-bottom: 4px;
}
.simulator-summary-value {
font-size: 1.4rem;
font-weight: 700;
color: #0f172a;
}
.simulator-chart-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 28px;
}
.simulator-chart-col {
background: #fafbfc;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 16px;
}
.simulator-chart-title {
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px;
}
.simulator-chart-col canvas {
max-width: 100%;
height: auto !important;
}
.simulator-roadmap,
.simulator-recommend {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 18px 20px;
margin-bottom: 20px;
}
.simulator-roadmap-title,
.simulator-recommend-title {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 10px;
}
.simulator-roadmap-body,
.simulator-recommend-body {
font-size: 0.93rem;
color: #334155;
line-height: 1.75;
white-space: pre-line;
}
.simulator-college-list {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.simulator-college-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
font-size: 0.93rem;
}
.simulator-college-name {
font-weight: 600;
color: #0f172a;
}
.simulator-college-level {
font-weight: 700;
font-size: 0.88rem;
padding: 3px 10px;
border-radius: 999px;
}
.simulator-college-level.level-safe {
background: #dcfce7;
color: #166534;
}
.simulator-college-level.level-proper {
background: #dbeafe;
color: #1d4ed8;
}
.simulator-college-level.level-challenge {
background: #fef3c7;
color: #a16207;
}
.simulator-college-level.level-hold {
background: #fee2e2;
color: #b91c1c;
}
.simulator-cta {
margin-top: 8px;
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
color: #fff;
padding: 24px;
border-radius: 12px;
text-align: center;
}
.simulator-cta-title {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 8px;
color: #fff;
}
.simulator-cta-desc {
font-size: 0.92rem;
opacity: 0.92;
margin: 0 0 16px;
line-height: 1.65;
}
.simulator-cta-btn {
background: #fff;
color: #1d4ed8;
border-color: #fff;
}
.simulator-cta-btn:hover {
background: #f1f5f9;
color: #1e3a8a;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.chatbot-layout {
grid-template-columns: 1fr;
}
.chatbot-sidebar-card {
position: static;
}
.simulator-chart-wrap {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.chatbot-stream {
padding: 16px;
}
.chatbot-message {
max-width: 95%;
}
.chatbot-input-wrap {
padding: 10px;
}
.simulator-form {
padding: 18px;
}
.simulator-form-actions {
flex-direction: column;
}
.simulator-cta {
padding: 20px 16px;
}
}
/* ===== end Agent 13 ===== */
/* ===== Agent 16: Menu dropdown + CTA (2026-04-20) ===== */
#primary-menu, .nav-list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; position: relative; }
#primary-menu > .menu-item, .nav-list > .menu-item { position: relative; }
#primary-menu .sub-menu, .nav-list .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: #0f172a; border: 1px solid #1e293b; list-style: none; padding: 8px 0; margin: 0; z-index: 200; box-shadow: 0 12px 32px rgba(0,0,0,0.6); border-radius: 6px; }
#primary-menu > .menu-item:hover > .sub-menu, #primary-menu > .menu-item:focus-within > .sub-menu, .nav-list > .menu-item:hover > .sub-menu, .nav-list > .menu-item:focus-within > .sub-menu { display: block; }
#primary-menu .sub-menu .menu-item, .nav-list .sub-menu .menu-item { display: block; }
#primary-menu .sub-menu a, .nav-list .sub-menu a { display: block; padding: 10px 18px; color: #e2e8f0; white-space: nowrap; font-size: 0.95em; text-decoration: none; }
#primary-menu .sub-menu a:hover, .nav-list .sub-menu a:hover { background: #1e293b; color: #D4A843; }
#primary-menu .menu-item-has-children > a::after, .nav-list .menu-item-has-children > a::after { content: ' \25BE'; font-size: 0.7em; opacity: 0.6; margin-left: 4px; }
#primary-menu .menu-cta > a, .nav-list .menu-cta > a { background: #D4A843; color: #020617 !important; padding: 8px 18px; border-radius: 6px; font-weight: 700; }
#primary-menu .menu-cta > a:hover, .nav-list .menu-cta > a:hover { background: #e4b85e; }
@media (max-width: 900px) {
#primary-menu, .nav-list { flex-direction: column; }
#primary-menu .sub-menu, .nav-list .sub-menu { position: static; box-shadow: none; border: none; background: transparent; padding-left: 16px; display: block; min-width: 0; }
#primary-menu .sub-menu a, .nav-list .sub-menu a { padding: 8px 12px; font-size: 0.9em; }
#primary-menu .menu-item-has-children > a::after, .nav-list .menu-item-has-children > a::after { content: ''; }
}
/* ===== /Agent 16: Menu dropdown ===== */
/* ===== Agent 17: Goods contrast fix + misc (2026-04-20) ===== */
.goods-about-notice, .goods-about-yellow, .goods-notice-box { color: #1f2937 !important; background: #fef3c7 !important; }
.goods-about-notice *, .goods-about-yellow *, .goods-notice-box * { color: #1f2937 !important; }
.goods-card p, .goods-product-desc, .goods-about p { color: #e2e8f0 !important; }
.goods-about .card-description { color: #cbd5e1 !important; }
body.page-template-page-goods-about [style*='color: #fff'] { color: #1f2937 !important; }
/* WooCommerce dark theme override */
.woocommerce .button, .woocommerce button.button { background: #D4A843 !important; color: #020617 !important; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: #e2e8f0; }
.woocommerce ul.products li.product .price { color: #D4A843 !important; }
/* ===== /Agent 17 ===== */
/* ===== Agent 18: Goods-about + Interview iframe placeholder (2026-04-20) ===== */
.goods-about-lead {
background: rgba(212, 168, 67, 0.22) !important;
color: #f8fafc !important;
border-left: 4px solid #D4A843 !important;
padding: 24px 28px !important;
font-size: 1.05rem !important;
line-height: 1.8 !important;
border-radius: 6px !important;
}
.goods-about-lead strong { color: #D4A843 !important; font-weight: 700; }
.goods-about-lead a { color: #D4A843 !important; text-decoration: underline; }
/* Interview empty iframe hide + show placeholder */
.interview-video-wrap iframe[src$='/embed/'], .interview-video-wrap iframe[src='https://www.youtube.com/embed/'] {
display: none !important;
}
.interview-video-wrap:has(iframe[src$='/embed/']):after, .interview-video-wrap:has(iframe[src='https://www.youtube.com/embed/']):after {
content: '인터뷰 영상 준비 중입니다';
display: block;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 12px;
padding: 60px 24px;
text-align: center;
color: #94a3b8;
font-size: 0.95rem;
}
/* ===== /Agent 18 ===== */
/* ===== Agent 19: Menu spacing + AI Chatbot floating (2026-04-20) ===== */
#primary-menu, .nav-list { gap: 24px !important; }
#primary-menu > .menu-item, .nav-list > .menu-item { position: relative; }
#primary-menu > .menu-item > a, .nav-list > .menu-item > a {
padding: 14px 10px !important;
font-weight: 500;
letter-spacing: -0.2px;
border-bottom: 2px solid transparent;
transition: color .2s, border-color .2s;
display: inline-block;
}
#primary-menu > .menu-item > a:hover, .nav-list > .menu-item > a:hover {
color: #D4A843 !important;
border-bottom-color: #D4A843;
}
#primary-menu > .menu-item + .menu-item:not(.menu-cta)::before,
.nav-list > .menu-item + .menu-item:not(.menu-cta)::before {
content: '';
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 14px;
background: rgba(226, 232, 240, 0.2);
pointer-events: none;
}
#primary-menu .menu-cta { margin-left: 8px; }
#primary-menu .menu-cta > a { padding: 10px 22px !important; border-bottom: none !important; border-radius: 6px; }
/* Floating AI Chatbot button (위치: 카톡 위) */
.floating-cta .floating-btn-ai {
background: linear-gradient(135deg, #D4A843 0%, #F6CC4F 50%, #D4A843 100%) !important;
background-size: 200% 200% !important;
color: #020617 !important;
position: relative;
font-weight: 800;
animation: ai-pulse 2.5s ease-in-out infinite, ai-shine 4s linear infinite;
box-shadow: 0 10px 28px rgba(212, 168, 67, 0.55);
border: 2px solid #F6CC4F;
order: -1;
}
.floating-btn-ai .ai-label {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #D4A843, #F6CC4F);
color: #020617;
padding: 8px 14px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(0,0,0,0.4);
letter-spacing: -0.3px;
}
.floating-btn-ai .ai-label::after {
content: '';
position: absolute;
right: -6px; top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: #D4A843;
}
.floating-btn-ai .ai-badge-new {
position: absolute;
top: -8px; right: -8px;
background: #ef4444;
color: #fff;
font-size: 0.65rem;
padding: 3px 7px;
border-radius: 10px;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
animation: badge-bounce 1.5s ease-in-out infinite;
}
@keyframes ai-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 10px 28px rgba(212, 168, 67, 0.55), 0 0 0 0 rgba(212, 168, 67, 0.8); }
50% { transform: scale(1.1); box-shadow: 0 14px 36px rgba(212, 168, 67, 0.75), 0 0 0 18px rgba(212, 168, 67, 0); }
}
@keyframes ai-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes badge-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 900px) {
#primary-menu, .nav-list { gap: 8px !important; }
#primary-menu > .menu-item + .menu-item::before, .nav-list > .menu-item + .menu-item::before { display: none; }
}
/* ===== /Agent 19 ===== */
/* ===== Agent 20: Critical fixes — goods-about light theme + menu gap (2026-04-20) ===== */
.goods-about-lead {
background: linear-gradient(135deg, rgba(212, 168, 67, 0.28), rgba(212, 168, 67, 0.12)) !important;
color: #1f2937 !important;
border-left: 4px solid #D4A843 !important;
padding: 24px 28px !important;
border-radius: 6px !important;
}
.goods-about-lead strong { color: #92400e !important; }
.goods-about-lead a { color: #92400e !important; text-decoration: underline; }
body .site-header #primary-menu,
body .site-header .nav-list,
body header #primary-menu,
body header .nav-list,
#primary-menu.primary-menu,
.primary-menu {
gap: 24px !important;
column-gap: 24px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
}
body .site-header #primary-menu > li,
body .site-header .nav-list > li,
#primary-menu > li,
.primary-menu > li {
position: relative !important;
}
body .site-header #primary-menu > li + li:not(.menu-cta)::before,
body .site-header .nav-list > li + li:not(.menu-cta)::before,
#primary-menu > li + li:not(.menu-cta)::before,
.primary-menu > li + li:not(.menu-cta)::before {
content: '' !important;
position: absolute !important;
left: -14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 1px !important;
height: 14px !important;
background: rgba(226, 232, 240, 0.3) !important;
pointer-events: none !important;
}
/* ===== /Agent 20 ===== */
/* ===== Agent 21: Menu single-row, Shop 3-col, community hero fallback (2026-04-20) ===== */
/* Shop products: 3열 강제 (데스크톱) */
@media (min-width: 1024px) {
.woocommerce ul.products, .woocommerce-page ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (min-width: 1280px) {
.woocommerce ul.products, .woocommerce-page ul.products {
grid-template-columns: repeat(3, minmax(260px, 360px)) !important;
justify-content: start !important;
gap: 28px !important;
}
}
/* community-rules, goods-about: 배경색 gradient fallback (hero 이미지 도착 전까지) */
body.page-template-page-community-rules .page-hero:not(.page-hero-with-bg),
body.page-template-page-goods-about .page-hero:not(.page-hero-with-bg) {
background: linear-gradient(135deg, #0f172a 0%, #1f3a68 100%) !important;
}
/* 메뉴 한줄 강제: gap 축소 + 폰트 여백 최적화 */
@media (min-width: 1024px) {
body .site-header #primary-menu, body .site-header .nav-list,
body header #primary-menu, body header .nav-list {
gap: 18px !important; column-gap: 18px !important; flex-wrap: nowrap !important;
}
body .site-header #primary-menu > li > a, body .site-header .nav-list > li > a {
padding: 12px 6px !important; font-size: 0.95rem !important; white-space: nowrap !important;
}
body .site-header #primary-menu > li + li::before, body .site-header .nav-list > li + li::before {
left: -10px !important;
}
}
/* ===== /Agent 21 ===== */
/* ===== Agent 22: Dark theme enforcement + WC/bbPress override (2026-04-20) ===== */
body.woocommerce-account, body.woocommerce-page, body.woocommerce,
body.page, body.single, body.archive, body.category, body.search,
body.forum-archive, body.single-forum, body.single-topic, body.bbpress {
background: #020617 !important; color: #e2e8f0 !important;
}
body.woocommerce-account .entry-content, body.woocommerce-account .site-main,
body.woocommerce .entry-content, body.woocommerce-page .entry-content,
body.page .entry-content, body.single .entry-content {
background: transparent !important; color: #e2e8f0 !important;
}
body .entry-content p, body .entry-content li { color: #e2e8f0 !important; }
body .entry-content h1, body .entry-content h2, body .entry-content h3, body .entry-content h4 { color: #f8fafc !important; }
body .entry-content strong, body .entry-content b { color: #F6CC4F !important; }
body .entry-content a { color: #D4A843 !important; }
.woocommerce-MyAccount-navigation { background: transparent !important; }
.woocommerce-MyAccount-navigation ul {
background: #0f172a !important; border: 1px solid #1e293b !important;
border-radius: 10px !important; padding: 12px 0 !important; list-style: none !important; margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
border-bottom: 1px solid rgba(226, 232, 240, 0.05) !important; background: transparent !important;
}
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none !important; }
.woocommerce-MyAccount-navigation ul li a {
display: block !important; padding: 14px 20px !important;
color: #e2e8f0 !important; text-decoration: none !important; font-weight: 500 !important;
transition: all .2s;
}
.woocommerce-MyAccount-navigation ul li a:hover {
background: rgba(212, 168, 67, 0.1) !important; color: #D4A843 !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
background: linear-gradient(135deg, #D4A843, #F6CC4F) !important; color: #020617 !important; font-weight: 700 !important;
}
.woocommerce-MyAccount-content {
background: #0f172a !important; border: 1px solid #1e293b !important;
border-radius: 10px !important; padding: 32px !important; color: #e2e8f0 !important;
}
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content p, .woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content th, .woocommerce-MyAccount-content label {
color: #e2e8f0 !important;
}
.woocommerce-MyAccount-content mark { background: transparent !important; color: #F6CC4F !important; font-weight: 700; }
.woocommerce-MyAccount-content a { color: #D4A843 !important; }
.woocommerce-MyAccount-content a:hover { color: #F6CC4F !important; }
.woocommerce table.shop_table, .woocommerce-page table.shop_table {
background: #0f172a !important; border: 1px solid #1e293b !important; color: #e2e8f0 !important;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
background: transparent !important; color: #e2e8f0 !important;
border-color: rgba(226, 232, 240, 0.1) !important; padding: 14px !important;
}
.woocommerce table.shop_table thead th { background: rgba(212, 168, 67, 0.08) !important; color: #F6CC4F !important; }
.woocommerce form .form-row label, .woocommerce form .form-row legend {
color: #e2e8f0 !important; font-weight: 500 !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection,
body input[type=text], body input[type=email], body input[type=tel], body textarea, body select {
background: #1a1f2e !important; border: 1px solid #1e293b !important;
color: #e2e8f0 !important; border-radius: 6px !important; padding: 10px 14px !important;
}
.woocommerce form .form-row input:focus, .woocommerce form .form-row textarea:focus {
border-color: #D4A843 !important; outline: none !important;
box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.2) !important;
}
.woocommerce.woocommerce-shop ul.products,
.woocommerce-page.woocommerce-shop ul.products,
body.post-type-archive-product ul.products,
.woocommerce ul.products, .woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 28px !important; width: 100% !important;
padding: 0 !important; margin: 0 !important; list-style: none !important;
}
@media (max-width: 1023px) {
.woocommerce ul.products, .woocommerce-page ul.products,
body.post-type-archive-product ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
.woocommerce ul.products, .woocommerce-page ul.products,
body.post-type-archive-product ul.products { grid-template-columns: 1fr !important; }
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
}
body.forum-archive, body.single-forum, body.single-topic, .bbpress-wrapper,
#bbpress-forums { background: #020617 !important; color: #e2e8f0 !important; }
#bbpress-forums {
background: #0f172a !important; border: 1px solid #1e293b !important;
border-radius: 10px !important; padding: 24px !important;
}
#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer {
background: rgba(212, 168, 67, 0.1) !important; color: #F6CC4F !important;
border-color: rgba(226, 232, 240, 0.1) !important; font-weight: 700 !important;
}
#bbpress-forums ul.forums-directory, #bbpress-forums ul.topics,
#bbpress-forums div.bbp-forum-info, #bbpress-forums div.bbp-topic-title {
background: transparent !important; color: #e2e8f0 !important;
}
#bbpress-forums li.bbp-body > ul {
background: transparent !important; border-bottom: 1px solid rgba(226, 232, 240, 0.08) !important;
}
#bbpress-forums a { color: #D4A843 !important; }
#bbpress-forums a:hover { color: #F6CC4F !important; }
#bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink,
#bbpress-forums .bbp-author-name { color: #f8fafc !important; font-weight: 600 !important; }
#bbpress-forums .bbp-forum-content, #bbpress-forums .bbp-topic-content,
#bbpress-forums .bbp-reply-content { color: #e2e8f0 !important; }
#bbpress-forums .bbp-forum-freshness, #bbpress-forums .bbp-topic-freshness { color: #94a3b8 !important; }
.site-footer .footer-menu, .site-footer nav ul {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 12px !important; list-style: none !important; padding: 0 !important; margin: 20px 0 0 !important;
}
.site-footer .footer-menu li a, .site-footer nav ul li a {
display: block !important; padding: 16px 18px !important;
background: rgba(212, 168, 67, 0.05) !important;
border: 1px solid rgba(212, 168, 67, 0.15) !important;
border-radius: 8px !important; color: #e2e8f0 !important; text-decoration: none !important;
transition: all .25s !important; text-align: center !important; font-weight: 500 !important;
}
.site-footer .footer-menu li a:hover, .site-footer nav ul li a:hover {
background: rgba(212, 168, 67, 0.18) !important;
border-color: #D4A843 !important; color: #F6CC4F !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(212, 168, 67, 0.15);
}
/* ===== /Agent 22 ===== */
/* ===== Agent 24 — 2026-04-20 =====
Announcement bar + Footer 4-column restructure.
Append-only. Do not modify existing Agent 1~23 blocks.
*/
/* --- Announcement bar --- */
.mml-announcement-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 48px 0 20px;
background: linear-gradient(90deg, #D4A843, #F6CC4F, #D4A843);
color: #020617;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.mml-announcement-inner {
position: relative;
width: 100%;
max-width: 1200px;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.mml-announcement-slide {
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 40px;
opacity: 0;
visibility: hidden;
transition: opacity .5s ease;
text-align: center;
}
.mml-announcement-slide.is-active {
opacity: 1;
visibility: visible;
position: relative;
}
.mml-announcement-text {
color: #020617;
font-weight: 600;
}
.mml-announcement-cta {
color: #020617 !important;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 700;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.mml-announcement-cta:hover { color: #0b0b0b !important; }
.mml-announcement-arrow {
font-weight: 700;
transition: transform .2s ease;
display: inline-block;
}
.mml-announcement-cta:hover .mml-announcement-arrow { transform: translateX(3px); }
.mml-announcement-close {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
background: transparent;
border: none;
color: #020617;
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
opacity: 0.75;
transition: opacity .2s ease;
}
.mml-announcement-close:hover { opacity: 1; }
body.has-announcement-bar { padding-top: 40px; }
body.has-announcement-bar .site-header,
body.admin-bar.has-announcement-bar .site-header { top: 40px; }
@media (max-width: 768px) {
.mml-announcement-bar {
min-height: 44px;
font-size: 13px;
padding: 0 44px 0 12px;
}
.mml-announcement-inner,
.mml-announcement-slide { min-height: 44px; }
.mml-announcement-slide {
flex-direction: column;
gap: 2px;
padding: 6px 0;
}
body.has-announcement-bar { padding-top: 44px; }
body.has-announcement-bar .site-header { top: 44px; }
.mml-announcement-close { right: 10px; font-size: 20px; }
}
/* --- Footer 4-column restructure --- */
.site-footer .footer-main {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
padding: 56px 0 40px;
align-items: start;
}
.site-footer .footer-column { min-width: 0; }
.site-footer .footer-column-title {
font-size: 14px;
font-weight: 700;
color: #D4A843;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0 0 18px;
}
.site-footer .footer-column-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer .footer-column-list li { margin: 0; padding: 0; }
.site-footer .footer-column-list a {
color: #e2e8f0;
text-decoration: none;
font-size: 14px;
line-height: 1.5;
display: inline-block;
transition: color .2s ease, transform .2s ease;
}
.site-footer .footer-column-list a:hover {
color: #F6CC4F;
transform: translateX(4px);
}
.site-footer .footer-bottom { padding: 18px 0; border-top: 1px solid rgba(226, 232, 240, 0.08); }
.site-footer .footer-bottom-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.site-footer .footer-bottom .footer-legal {
display: inline-flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: #94a3b8;
}
.site-footer .footer-bottom .footer-legal a {
color: #94a3b8;
text-decoration: none;
transition: color .2s ease;
}
.site-footer .footer-bottom .footer-legal a:hover { color: #F6CC4F; }
.site-footer .footer-copy { color: #94a3b8; font-size: 13px; margin: 0; }
.site-footer .footer-biz { color: #94a3b8; font-size: 12px; margin: 4px 0 0; }
@media (max-width: 1023px) {
.site-footer .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 640px) {
.site-footer .footer-main { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 28px; }
.site-footer .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}
/* ===== /Agent 24 ===== */
/* ========================================================================
* Agent 23 — Features landing page (/features/)
* 학원장 대상 마케팅 랜딩. 5개 탭 (서비스 소개 / 기능 카탈로그 / 비교 / 강점 / 요금제)
* 고유 네임스페이스: .features-*
* ======================================================================== */
/* Hero */
.features-hero { min-height: 460px; }
.features-hero-cta {
display: flex; flex-wrap: wrap; gap: 14px;
justify-content: center; align-items: center;
margin-top: 32px;
}
.features-hero-cta .btn { min-width: 160px; }
/* Tabs nav */
.features-tabs-nav {
position: sticky; top: var(--header-h, 72px); z-index: 40;
background: #fff;
border-bottom: 1px solid var(--line, #e5e7eb);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.features-tabs-inner {
display: flex; gap: 4px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding: 6px 0;
}
.features-tab-btn {
flex: 0 0 auto;
padding: 14px 22px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
font-family: var(--font-body);
font-size: 15px; font-weight: 600;
color: var(--muted, #6b7280);
cursor: pointer;
white-space: nowrap;
transition: color .2s, border-color .2s, background .2s;
}
.features-tab-btn:hover { color: var(--primary, #1e3a5f); background: rgba(30, 58, 95, 0.04); }
.features-tab-btn.is-active {
color: var(--primary, #1e3a5f);
border-bottom-color: var(--accent, #d4a843);
}
.features-tab-btn:focus-visible {
outline: 2px solid var(--accent, #d4a843);
outline-offset: 2px;
}
/* Panel base */
.features-tab-panel { display: none; }
.features-tab-panel.is-active { display: block; animation: featuresFadeIn .3s var(--ease, ease); }
@keyframes featuresFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.features-page .section { padding: 64px 0; }
.features-panel-head { text-align: center; max-width: 760px; margin: 0 auto 48px; padding: 0 24px; }
.features-panel-head .section-title { margin-bottom: 14px; }
.features-panel-head .section-sub { color: var(--muted, #6b7280); font-size: 16px; line-height: 1.7; }
/* Tab 1 — Highlights */
.features-hl-cards {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin: 0 0 56px;
}
.features-hl-card {
background: #fff;
border: 1px solid var(--line, #e5e7eb);
border-radius: var(--radius, 12px);
padding: 32px 28px;
text-align: center;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.features-hl-card:hover {
transform: translateY(-4px);
border-color: var(--accent, #d4a843);
box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12));
}
.features-hl-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-soft, #f6e8c0), #fff);
color: var(--accent-dark, #b5902f);
display: grid; place-items: center;
margin: 0 auto 20px;
}
.features-hl-icon svg { width: 30px; height: 30px; }
.features-hl-card h3 {
font-family: var(--font-head);
font-size: 22px; margin: 0 0 12px;
color: var(--primary, #1e3a5f);
}
.features-hl-card p { color: var(--ink-soft, #374151); font-size: 14.5px; line-height: 1.7; margin: 0; }
/* Tab 1 — Demo links grid */
.features-demo-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.features-demo-card {
display: block;
background: var(--cream, #faf8f3);
border: 1px solid var(--line, #e5e7eb);
border-radius: var(--radius, 12px);
padding: 22px 22px 20px;
text-decoration: none;
transition: all .25s;
}
.features-demo-card:hover {
background: #fff;
border-color: var(--accent, #d4a843);
transform: translateY(-2px);
}
.features-demo-tag {
display: inline-block;
font-size: 11px; font-weight: 700;
color: var(--accent-dark, #b5902f);
text-transform: uppercase; letter-spacing: .08em;
margin-bottom: 10px;
}
.features-demo-card h4 {
font-family: var(--font-head);
font-size: 17px; font-weight: 600;
color: var(--primary, #1e3a5f);
margin: 0 0 6px;
}
.features-demo-card p { color: var(--muted, #6b7280); font-size: 13.5px; margin: 0; line-height: 1.5; }
/* Tab 2 — Catalog */
.features-cat-title {
font-family: var(--font-head);
font-size: 24px; font-weight: 600;
color: var(--primary, #1e3a5f);
margin: 56px 0 24px;
padding-bottom: 14px;
border-bottom: 2px solid var(--line, #e5e7eb);
display: flex; align-items: center; gap: 12px;
}
.features-cat-title:first-of-type { margin-top: 0; }
.features-cat-num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: var(--accent, #d4a843);
color: #fff;
border-radius: 50%;
font-family: var(--font-body);
font-size: 14px; font-weight: 700;
flex-shrink: 0;
}
.features-cat-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.features-feat-card {
background: #fff;
border: 1px solid var(--line, #e5e7eb);
border-radius: var(--radius, 12px);
padding: 24px 22px;
display: flex; flex-direction: column;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.features-feat-card:hover {
border-color: var(--accent, #d4a843);
transform: translateY(-2px);
box-shadow: var(--shadow, 0 4px 12px rgba(15, 23, 42, 0.08));
}
.features-feat-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--primary-100, #e7ecf3);
color: var(--primary, #1e3a5f);
display: grid; place-items: center;
margin-bottom: 16px;
}
.features-feat-icon svg { width: 22px; height: 22px; }
.features-feat-card h4 {
font-size: 17px; font-weight: 700;
color: var(--ink, #1a1a1a);
margin: 0 0 10px;
line-height: 1.35;
}
.features-feat-card p {
color: var(--ink-soft, #374151);
font-size: 14px; line-height: 1.65;
margin: 0 0 16px;
flex-grow: 1;
}
.features-feat-link {
font-size: 13px; font-weight: 600;
color: var(--accent-dark, #b5902f);
text-decoration: none;
align-self: flex-start;
transition: color .2s, transform .2s;
}
.features-feat-link:hover { color: var(--primary, #1e3a5f); transform: translateX(3px); }
/* Tab 3 — Compare table */
.features-compare-wrap {
overflow-x: auto;
border: 1px solid var(--line, #e5e7eb);
border-radius: var(--radius, 12px);
background: #fff;
margin: 0 0 40px;
-webkit-overflow-scrolling: touch;
}
.features-compare-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
font-size: 14.5px;
}
.features-compare-table thead th {
background: var(--primary, #1e3a5f);
color: #fff;
font-weight: 600;
padding: 16px 14px;
text-align: center;
font-size: 13.5px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
vertical-align: middle;
line-height: 1.35;
}
.features-compare-table thead th:first-child { text-align: left; padding-left: 20px; }
.features-compare-table thead th:last-child { border-right: none; }
.features-compare-table thead th.is-winner {
background: var(--accent-dark, #b5902f);
position: relative;
}
.features-compare-table thead th.is-winner::after {
content: "BEST";
position: absolute;
top: -8px; left: 50%;
transform: translateX(-50%);
background: var(--accent, #d4a843);
color: var(--primary-dark, #15283f);
font-size: 10px; font-weight: 800;
letter-spacing: .12em;
padding: 3px 8px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
.features-compare-table tbody th {
text-align: left;
padding: 14px 20px;
font-weight: 600;
color: var(--ink, #1a1a1a);
background: var(--cream, #faf8f3);
border-bottom: 1px solid var(--line, #e5e7eb);
border-right: 1px solid var(--line, #e5e7eb);
white-space: nowrap;
}
.features-compare-table tbody td {
padding: 14px 10px;
text-align: center;
border-bottom: 1px solid var(--line, #e5e7eb);
border-right: 1px solid var(--line-soft, #f1f3f5);
vertical-align: middle;
}
.features-compare-table tbody td:last-child { border-right: none; }
.features-compare-table tbody tr:last-child th,
.features-compare-table tbody tr:last-child td { border-bottom: none; }
.features-compare-table tbody td.is-winner {
background: rgba(212, 168, 67, 0.08);
}
.features-stars {
font-size: 16px;
color: var(--accent, #d4a843);
letter-spacing: 2px;
font-weight: 700;
}
.features-compare-table tbody td:not(.is-winner) .features-stars {
color: var(--muted-soft, #9ca3af);
}
.features-compare-conclusion {
background: linear-gradient(135deg, var(--primary-100, #e7ecf3) 0%, var(--cream, #faf8f3) 100%);
border-left: 4px solid var(--accent, #d4a843);
border-radius: var(--radius, 12px);
padding: 28px 32px;
}
.features-compare-conclusion h3 {
font-family: var(--font-head);
font-size: 22px;
color: var(--primary, #1e3a5f);
margin: 0 0 16px;
}
.features-compare-conclusion ol { margin: 0; padding-left: 24px; }
.features-compare-conclusion li {
margin-bottom: 10px;
line-height: 1.7;
color: var(--ink-soft, #374151);
}
.features-compare-conclusion li strong { color: var(--primary-dark, #15283f); }
/* Tab 4 — Strengths */
.features-strengths-grid {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.features-strength-card {
background: #fff;
border: 1px solid var(--line, #e5e7eb);
border-radius: var(--radius, 12px);
padding: 30px 28px;
position: relative;
transition: all .25s;
}
.features-strength-card:hover {
border-color: var(--accent, #d4a843);
box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12));
transform: translateY(-3px);
}
.features-strength-num {
font-family: var(--font-head);
font-size: 40px; font-weight: 700;
color: var(--accent, #d4a843);
line-height: 1;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.features-strength-card h3 {
font-family: var(--font-head);
font-size: 22px;
color: var(--primary, #1e3a5f);
margin: 0 0 14px;
line-height: 1.3;
}
.features-strength-card p {
color: var(--ink-soft, #374151);
font-size: 14.5px; line-height: 1.7;
margin: 0 0 16px;
}
.features-strength-card ul {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--line-soft, #f1f3f5);
padding-top: 14px;
}
.features-strength-card ul li {
position: relative;
padding-left: 22px;
font-size: 13.5px;
color: var(--muted, #6b7280);
margin-bottom: 8px;
line-height: 1.55;
}
.features-strength-card ul li::before {
content: "";
position: absolute;
left: 0; top: 8px;
width: 14px; height: 2px;
background: var(--accent, #d4a843);
}
/* Tab 5 — Pricing */
.features-pricing-grid {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin-bottom: 24px;
}
.features-price-card {
background: #fff;
border: 2px solid var(--line, #e5e7eb);
border-radius: var(--radius-lg, 20px);
padding: 32px 28px;
display: flex; flex-direction: column;
position: relative;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.features-price-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.12));
}
.features-price-card.is-featured {
border-color: var(--accent, #d4a843);
background: linear-gradient(180deg, var(--cream, #faf8f3) 0%, #fff 40%);
box-shadow: 0 8px 24px rgba(212, 168, 67, 0.18);
transform: translateY(-6px);
}
.features-price-card.is-featured:hover { transform: translateY(-10px); }
.features-price-ribbon {
position: absolute;
top: -14px; left: 50%;
transform: translateX(-50%);
background: var(--accent, #d4a843);
color: var(--primary-dark, #15283f);
font-size: 11px; font-weight: 800;
letter-spacing: .14em;
padding: 6px 16px;
border-radius: 20px;
box-shadow: 0 3px 10px rgba(212, 168, 67, 0.35);
}
.features-price-head {
border-bottom: 1px solid var(--line, #e5e7eb);
padding-bottom: 20px;
margin-bottom: 20px;
}
.features-price-name {
font-size: 13px; font-weight: 700;
color: var(--accent-dark, #b5902f);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 14px;
}
.features-price-amount {
font-family: var(--font-head);
font-size: 34px; font-weight: 700;
color: var(--primary-dark, #15283f);
line-height: 1.1;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.features-price-amount span {
font-size: 16px;
font-weight: 500;
color: var(--muted, #6b7280);
margin-left: 4px;
}
.features-price-unit {
font-size: 13px;
color: var(--muted, #6b7280);
line-height: 1.55;
}
.features-price-features {
list-style: none;
padding: 0;
margin: 0 0 24px;
flex-grow: 1;
}
.features-price-features li {
position: relative;
padding-left: 26px;
font-size: 14px;
color: var(--ink-soft, #374151);
margin-bottom: 11px;
line-height: 1.55;
}
.features-price-features li::before {
content: "";
position: absolute;
left: 0; top: 7px;
width: 16px; height: 9px;
border-left: 2px solid var(--accent, #d4a843);
border-bottom: 2px solid var(--accent, #d4a843);
transform: rotate(-45deg);
}
.features-price-cta {
width: 100%;
text-align: center;
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
}
.features-pricing-note {
text-align: center;
color: var(--muted, #6b7280);
font-size: 13px;
line-height: 1.7;
margin: 24px auto 0;
max-width: 720px;
padding: 16px 20px;
background: var(--cream, #faf8f3);
border-radius: var(--radius, 12px);
}
/* Responsive */
@media (max-width: 1024px) {
.features-strength-card { padding: 26px 22px; }
.features-strength-num { font-size: 36px; }
.features-price-amount { font-size: 30px; }
}
@media (max-width: 768px) {
.features-hero { min-height: 380px; }
.features-tab-btn { padding: 12px 16px; font-size: 14px; }
.features-page .section { padding: 48px 0; }
.features-panel-head { margin-bottom: 32px; }
.features-cat-title { font-size: 20px; margin: 44px 0 20px; }
.features-cat-num { width: 30px; height: 30px; font-size: 13px; }
.features-compare-table { font-size: 13px; }
.features-compare-table thead th { padding: 12px 8px; font-size: 12.5px; }
.features-compare-table tbody th { padding: 12px 14px; }
.features-compare-table tbody td { padding: 10px 6px; }
.features-stars { font-size: 14px; letter-spacing: 1px; }
.features-strengths-grid { grid-template-columns: 1fr; }
.features-pricing-grid { grid-template-columns: 1fr; }
.features-price-card.is-featured { transform: translateY(0); }
.features-price-card.is-featured:hover { transform: translateY(-4px); }
}
@media (max-width: 480px) {
.features-hero-cta .btn { flex: 1 1 100%; min-width: auto; }
.features-hl-card { padding: 26px 22px; }
.features-hl-icon { width: 56px; height: 56px; }
.features-hl-icon svg { width: 26px; height: 26px; }
}
/* ===== /Agent 23 ===== */
/* ===== Agent 25: Critical fixes — body dark force + Footer + WC MyAccount + Shop (2026-04-20) ===== */
/* HTML/BODY 다크 강제 — 최고 우선순위 */
html, body { background: #020617 !important; }
html body, html body.woocommerce-account, html body.woocommerce-page, html body.woocommerce,
html body.page, html body.single, html body.archive, html body.category, html body.search,
html body.forum-archive, html body.single-forum, html body.single-topic, html body.bbpress,
html body.woocommerce-cart, html body.woocommerce-checkout, html body.page-template-default {
background: #020617 !important; color: #e2e8f0 !important;
}
/* WC MyAccount content — 다크 카드로 완전 감쌈 */
html body .woocommerce-MyAccount-content,
html body .woocommerce-MyAccount-content * {
color: #e2e8f0 !important;
}
html body .woocommerce-MyAccount-content {
background: #0f172a !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
padding: 36px !important;
}
html body .woocommerce-MyAccount-content h1,
html body .woocommerce-MyAccount-content h2,
html body .woocommerce-MyAccount-content h3,
html body .woocommerce-MyAccount-content h4 { color: #f8fafc !important; }
html body .woocommerce-MyAccount-content mark { background: transparent !important; color: #F6CC4F !important; font-weight: 700; }
html body .woocommerce-MyAccount-content a { color: #D4A843 !important; text-decoration: underline; }
html body .woocommerce-MyAccount-content a:hover { color: #F6CC4F !important; }
html body .woocommerce-MyAccount-content .woocommerce-info,
html body .woocommerce-MyAccount-content .woocommerce-message,
html body .woocommerce-MyAccount-content .woocommerce-notice {
background: rgba(212, 168, 67, 0.08) !important;
border-left-color: #D4A843 !important;
color: #e2e8f0 !important;
}
/* Shop grid — 3열 강제 (body class 초과 specificity) */
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body.woocommerce-shop ul.products,
html body.post-type-archive-product ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 28px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
float: none !important;
}
html body.woocommerce ul.products li.product,
html body.woocommerce-page ul.products li.product,
html body.woocommerce-shop ul.products li.product,
html body.post-type-archive-product ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
html body.woocommerce.columns-4 ul.products,
html body.columns-4 ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1023px) {
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body.woocommerce-shop ul.products,
html body.post-type-archive-product ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body.woocommerce-shop ul.products,
html body.post-type-archive-product ul.products {
grid-template-columns: 1fr !important;
}
}
/* Footer 링크 색상 — WCAG 대비 수정 */
html body .site-footer { background: #0f1b2d !important; color: #e2e8f0 !important; }
html body .site-footer a,
html body .site-footer .footer-menu li a,
html body .site-footer nav ul li a,
html body .site-footer .footer-column-list a,
html body .site-footer .footer-column-list li a {
color: #cbd5e1 !important;
}
html body .site-footer a:hover,
html body .site-footer .footer-menu li a:hover,
html body .site-footer nav ul li a:hover,
html body .site-footer .footer-column-list a:hover {
color: #F6CC4F !important;
}
html body .site-footer .footer-column-title { color: #D4A843 !important; }
html body .site-footer .footer-bottom a,
html body .site-footer .footer-legal a {
color: #94a3b8 !important;
}
/* Portal dashboard 흰/흰 수정 */
html body .portal-dashboard,
html body .portal-dashboard * { color: #e2e8f0 !important; }
html body .portal-dashboard h1,
html body .portal-dashboard h2,
html body .portal-dashboard h3 { color: #f8fafc !important; }
html body .portal-welcome-notice,
html body .portal-stat-card {
background: #0f172a !important;
border: 1px solid #1e293b !important;
color: #e2e8f0 !important;
}
/* WC cart/checkout 영문 UI 보강 스타일 (번역은 mu-plugin) */
html body.woocommerce-cart .cart-empty,
html body.woocommerce-cart .wc-empty-cart-message {
color: #e2e8f0 !important;
background: #0f172a !important;
padding: 32px !important;
border-radius: 10px !important;
border: 1px solid #1e293b !important;
}
/* ===== /Agent 25 ===== */
/* ===== Agent 26: Mobile responsive critical fixes + announcement-bar restyle + tablet deadzone (2026-04-20) ===== */
/* 1. Global: CLAUDE.md 위반 전역 max-width 해제 (overflow-x는 body에만) */
html { max-width: none !important; overflow-x: visible !important; }
body { max-width: none !important; overflow-x: hidden !important; }
/* 2. Announcement bar — 금색 그라데이션 복구 (CSS 재정의) */
#mml-announcement-bar, .mml-announcement-bar {
background: linear-gradient(90deg, #D4A843 0%, #F6CC4F 50%, #D4A843 100%) !important;
color: #020617 !important;
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important;
z-index: 9999 !important;
min-height: 44px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
#mml-announcement-bar .mml-announcement-inner, .mml-announcement-bar .mml-announcement-inner {
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 8px 52px 8px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
position: relative !important;
}
#mml-announcement-bar .mml-announcement-slider, .mml-announcement-bar .mml-announcement-slider {
position: relative !important;
min-height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 !important;
overflow: hidden !important;
}
#mml-announcement-bar .mml-announcement-slide, .mml-announcement-bar .mml-announcement-slide {
display: none !important;
align-items: center !important;
gap: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #020617 !important;
line-height: 1.4 !important;
}
#mml-announcement-bar .mml-announcement-slide.active, .mml-announcement-bar .mml-announcement-slide.active {
display: inline-flex !important;
animation: mml-ann-fade 0.5s ease;
}
@keyframes mml-ann-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
#mml-announcement-bar .mml-announcement-icon, .mml-announcement-bar .mml-announcement-icon {
font-size: 16px !important; font-weight: 700 !important;
}
#mml-announcement-bar .mml-announcement-text, .mml-announcement-bar .mml-announcement-text {
color: #020617 !important;
font-weight: 600 !important;
}
#mml-announcement-bar .mml-announcement-link, .mml-announcement-bar .mml-announcement-link {
color: #020617 !important;
text-decoration: underline !important;
font-weight: 800 !important;
margin-left: 8px !important;
white-space: nowrap !important;
}
#mml-announcement-bar .mml-announcement-link:hover, .mml-announcement-bar .mml-announcement-link:hover {
color: #0f172a !important;
}
#mml-announcement-bar .mml-announcement-close, .mml-announcement-bar .mml-announcement-close {
position: absolute !important;
top: 50% !important; right: 12px !important;
transform: translateY(-50%) !important;
width: 44px !important; height: 44px !important;
background: transparent !important;
color: #020617 !important;
border: 0 !important;
cursor: pointer !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
padding: 0 !important;
border-radius: 6px;
transition: background-color .15s;
}
#mml-announcement-bar .mml-announcement-close:hover, .mml-announcement-bar .mml-announcement-close:hover {
background: rgba(2, 6, 23, 0.1) !important;
}
/* Body padding-top 보정 (배너 fixed 대응) */
body.has-announcement-bar { padding-top: 44px !important; }
body.has-announcement-bar .site-header { top: 44px !important; }
/* 3. 태블릿 dead zone (768~1023) — 모바일 메뉴 확장 */
@media (max-width: 1023px) {
.menu-toggle, .nav-toggle, .hamburger, .mobile-menu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
min-height: 44px !important;
}
.site-header .main-nav,
.site-header .primary-menu-wrap,
.site-header .nav-primary {
display: none !important;
}
.site-header .main-nav.is-open,
.site-header .primary-menu-wrap.is-open,
.site-header.nav-open .main-nav,
.site-header.nav-open .primary-menu-wrap {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: var(--header-h, 64px) !important;
left: 0 !important;
right: 0 !important;
background: #0f172a !important;
border-top: 1px solid #1e293b !important;
max-height: calc(100vh - var(--header-h, 64px)) !important;
overflow-y: auto !important;
z-index: 200 !important;
padding: 16px 0 !important;
}
.site-header .primary-menu,
.site-header #primary-menu {
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
}
.site-header .primary-menu > li,
.site-header #primary-menu > li {
border-bottom: 1px solid rgba(226, 232, 240, 0.05) !important;
}
.site-header .primary-menu > li + li::before,
.site-header #primary-menu > li + li::before {
display: none !important;
}
.site-header .primary-menu > li > a,
.site-header #primary-menu > li > a {
padding: 14px 24px !important;
min-height: 44px !important;
}
}
/* 4. 모바일 폰트 + 터치 타겟 */
@media (max-width: 768px) {
.hero-inner p, .hero-subtitle, .hero .subtitle,
.page-hero-inner p {
font-size: 14px !important;
line-height: 1.6 !important;
}
.hero-inner h1, .page-hero-inner h1 {
font-size: 1.75rem !important;
line-height: 1.3 !important;
}
/* 터치 타겟 44x44 */
.btn, .btn-primary, .btn-outline, .btn-secondary,
.floating-btn, .nav-link, .menu-item a {
min-height: 44px !important;
}
.mml-announcement-close, .menu-toggle,
.nav-toggle, .mobile-menu-toggle {
min-width: 44px !important;
min-height: 44px !important;
}
/* 모바일 body padding */
.section, .page-section, .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 모바일 배너 텍스트 축소 */
#mml-announcement-bar .mml-announcement-slide,
.mml-announcement-bar .mml-announcement-slide {
font-size: 12px !important;
}
#mml-announcement-bar .mml-announcement-inner,
.mml-announcement-bar .mml-announcement-inner {
padding: 6px 48px 6px 12px !important;
}
body.has-announcement-bar { padding-top: 40px !important; }
body.has-announcement-bar .site-header { top: 40px !important; }
}
/* 5. 모바일 hero 여백 조정 */
@media (max-width: 640px) {
.page-hero, .hero {
padding: 48px 20px !important;
}
.page-hero-inner h1, .hero-inner h1 {
font-size: 1.5rem !important;
}
}
/* ===== /Agent 26 ===== */
/* ===== Agent 27: Undo aggressive dark forcing — restore bright academy theme (2026-04-20) ===== */
/* Agent 22+25의 전역 body 다크 강제 해제, 원래 밝은 학원 톤 복구 */
html, html body,
html body.woocommerce-account, html body.woocommerce-page, html body.woocommerce,
html body.page, html body.single, html body.archive, html body.category, html body.search,
html body.forum-archive, html body.single-forum, html body.single-topic, html body.bbpress,
html body.woocommerce-cart, html body.woocommerce-checkout, html body.page-template-default {
background: #ffffff !important;
color: #1f2937 !important;
}
/* 본문 텍스트 밝은 톤 */
html body .entry-content, html body .site-main { color: #1f2937 !important; }
html body .entry-content p, html body .entry-content li { color: #1f2937 !important; }
html body .entry-content h1, html body .entry-content h2,
html body .entry-content h3, html body .entry-content h4 { color: #0f172a !important; }
html body .entry-content strong, html body .entry-content b { color: #B8881B !important; }
html body .entry-content a { color: #B8881B !important; text-decoration: underline; }
html body .entry-content a:hover { color: #D4A843 !important; }
/* MyAccount content — 밝은 카드 + 다크 텍스트 */
html body .woocommerce-MyAccount-content,
html body .woocommerce-MyAccount-content p,
html body .woocommerce-MyAccount-content span,
html body .woocommerce-MyAccount-content li,
html body .woocommerce-MyAccount-content td,
html body .woocommerce-MyAccount-content label {
color: #1f2937 !important;
}
html body .woocommerce-MyAccount-content {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 36px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
html body .woocommerce-MyAccount-content h1,
html body .woocommerce-MyAccount-content h2,
html body .woocommerce-MyAccount-content h3 { color: #0f172a !important; }
html body .woocommerce-MyAccount-content mark {
background: rgba(212, 168, 67, 0.15) !important;
color: #92400e !important;
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
}
html body .woocommerce-MyAccount-content a { color: #B8881B !important; text-decoration: underline; }
html body .woocommerce-MyAccount-content a:hover { color: #D4A843 !important; }
html body .woocommerce-MyAccount-content .woocommerce-info,
html body .woocommerce-MyAccount-content .woocommerce-message,
html body .woocommerce-MyAccount-content .woocommerce-notice {
background: rgba(212, 168, 67, 0.08) !important;
border-left: 4px solid #D4A843 !important;
color: #1f2937 !important;
}
/* MyAccount sidebar — 밝은 톤 */
html body .woocommerce-MyAccount-navigation ul {
background: #f9fafb !important;
border: 1px solid #e5e7eb !important;
}
html body .woocommerce-MyAccount-navigation ul li {
border-bottom: 1px solid #e5e7eb !important;
}
html body .woocommerce-MyAccount-navigation ul li a {
color: #1f2937 !important;
}
html body .woocommerce-MyAccount-navigation ul li a:hover {
background: rgba(212, 168, 67, 0.1) !important;
color: #92400e !important;
}
html body .woocommerce-MyAccount-navigation ul li.is-active a {
background: linear-gradient(135deg, #D4A843, #F6CC4F) !important;
color: #020617 !important;
font-weight: 700;
}
/* WC 상품 카드 — 밝은 */
html body.woocommerce ul.products li.product,
html body.woocommerce-page ul.products li.product {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
html body.woocommerce ul.products li.product:hover,
html body.woocommerce-page ul.products li.product:hover {
box-shadow: 0 8px 20px rgba(212, 168, 67, 0.15);
border-color: rgba(212, 168, 67, 0.4) !important;
}
html body.woocommerce ul.products li.product .woocommerce-loop-product__title,
html body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
color: #0f172a !important;
}
html body.woocommerce ul.products li.product .price,
html body.woocommerce-page ul.products li.product .price {
color: #B8881B !important;
font-weight: 700;
}
/* WC shop table (cart/checkout) — 밝은 */
html body .woocommerce table.shop_table,
html body .woocommerce-page table.shop_table {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
color: #1f2937 !important;
}
html body .woocommerce table.shop_table th,
html body .woocommerce table.shop_table td {
background: transparent !important;
color: #1f2937 !important;
border-color: #e5e7eb !important;
}
html body .woocommerce table.shop_table thead th {
background: rgba(212, 168, 67, 0.08) !important;
color: #92400e !important;
}
/* WC forms — 밝은 */
html body .woocommerce form .form-row label,
html body .woocommerce form .form-row legend,
html body.woocommerce form label,
html body.woocommerce form legend { color: #1f2937 !important; font-weight: 500 !important; }
html body .woocommerce form .form-row input.input-text,
html body .woocommerce form .form-row textarea,
html body .woocommerce form .form-row select,
html body.woocommerce input[type=text],
html body.woocommerce input[type=email],
html body.woocommerce input[type=tel],
html body.woocommerce input[type=password],
html body.woocommerce textarea,
html body.woocommerce select {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
color: #1f2937 !important;
}
html body .woocommerce form .form-row input:focus,
html body .woocommerce form .form-row textarea:focus {
border-color: #D4A843 !important;
box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15) !important;
}
/* bbPress — 밝은 */
html body.forum-archive, html body.single-forum, html body.single-topic, html body.bbpress {
background: #ffffff !important;
color: #1f2937 !important;
}
html body #bbpress-forums {
background: #f9fafb !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
color: #1f2937 !important;
}
html body #bbpress-forums li.bbp-header,
html body #bbpress-forums li.bbp-footer {
background: rgba(212, 168, 67, 0.1) !important;
color: #92400e !important;
border-color: #e5e7eb !important;
font-weight: 700 !important;
}
html body #bbpress-forums ul.forums-directory,
html body #bbpress-forums ul.topics,
html body #bbpress-forums div.bbp-forum-info,
html body #bbpress-forums div.bbp-topic-title {
background: transparent !important;
color: #1f2937 !important;
}
html body #bbpress-forums li.bbp-body > ul {
border-bottom: 1px solid #e5e7eb !important;
}
html body #bbpress-forums a { color: #B8881B !important; }
html body #bbpress-forums a:hover { color: #D4A843 !important; }
html body #bbpress-forums .bbp-forum-title,
html body #bbpress-forums .bbp-topic-permalink,
html body #bbpress-forums .bbp-author-name {
color: #0f172a !important;
font-weight: 600 !important;
}
html body #bbpress-forums .bbp-forum-content,
html body #bbpress-forums .bbp-topic-content,
html body #bbpress-forums .bbp-reply-content {
color: #1f2937 !important;
}
html body #bbpress-forums .bbp-forum-freshness,
html body #bbpress-forums .bbp-topic-freshness {
color: #6b7280 !important;
}
/* Portal dashboard — 밝은 */
html body .portal-dashboard,
html body .portal-dashboard p,
html body .portal-dashboard span,
html body .portal-dashboard li { color: #1f2937 !important; }
html body .portal-dashboard h1,
html body .portal-dashboard h2,
html body .portal-dashboard h3 { color: #0f172a !important; }
html body .portal-welcome-notice,
html body .portal-stat-card {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
color: #1f2937 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Goods-about lead — 밝은 */
html body .goods-about-lead {
background: linear-gradient(135deg, rgba(212, 168, 67, 0.22), rgba(212, 168, 67, 0.08)) !important;
color: #1f2937 !important;
border-left: 4px solid #D4A843 !important;
}
html body .goods-about-lead strong { color: #92400e !important; }
html body .goods-about-lead a { color: #B8881B !important; }
/* Footer만 다크 유지 (Agent 22/25에서 설정한 #0f1b2d) */
html body .site-footer {
background: #0f1b2d !important;
color: #cbd5e1 !important;
}
html body .site-footer * { color: inherit; }
html body .site-footer a { color: #cbd5e1 !important; }
html body .site-footer a:hover { color: #F6CC4F !important; }
html body .site-footer .footer-column-title { color: #D4A843 !important; }
/* Hero 섹션은 기존 테마 규칙 유지 — override 안 함 (specificity 충돌 방지) */
/* ===== /Agent 27 ===== */
/* ===== Agent 28: Emergency layout fix — restore container center + grid-main-sidebar (2026-04-20) ===== */
/* .container 중앙 정렬 + max-width 강제 복구 — 이전 실수(container 전역 100%) 재발 방지 */
html body .container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* 특정 컨테이너는 flex 컨테이너로 동작하도록 별도 처리 */
html body .container.header-inner,
html body .container.topbar-inner,
html body .container.demo-banner-inner,
html body .container.footer-bottom-inner,
html body .container.footer-main,
html body .container.cta-band-inner {
display: flex;
align-items: center;
}
html body .container.footer-main {
align-items: flex-start;
}
/* grid-main-sidebar 2컬럼 복구 */
html body .grid-main-sidebar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 300px !important;
gap: 40px !important;
align-items: start !important;
}
/* col-main / col-sidebar 기본 */
html body .col-main {
min-width: 0 !important;
}
html body .col-sidebar {
min-width: 0 !important;
}
/* blog-grid auto-fill 반응형 */
html body .blog-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
gap: 24px !important;
}
/* 태블릿 이하: sidebar 1컬럼으로 내림 */
@media (max-width: 1023px) {
html body .grid-main-sidebar {
grid-template-columns: 1fr !important;
}
}
/* 모바일 padding 조정 */
@media (max-width: 768px) {
html body .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
html body .blog-grid {
grid-template-columns: 1fr !important;
}
}
/* site-main 기본 레이아웃 (entry-content 덮어쓴 Agent 27 해제) */
html body .site-main {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0;
}
/* Agent 27이 entry-content에 max-width 강제한 부분이 archive에서 문제되면 해제 */
html body.archive .site-main,
html body.category .site-main,
html body.search .site-main {
max-width: none;
padding: 0;
}
/* ===== /Agent 28 ===== */
/* ===== Agent 29: Shop mobile grid + btn-sm touch target (2026-04-20) ===== */
/* Shop: 모바일 1열 / 태블릿 2열 / PC 3열 강제 (Playwright C1 fix) */
@media (max-width: 600px) {
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body.woocommerce-shop ul.products,
html body.post-type-archive-product ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
@media (min-width: 601px) and (max-width: 1023px) {
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body.woocommerce-shop ul.products,
html body.post-type-archive-product ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
/* C5: 보조 btn 터치 타겟 44px (PC에서도) */
html body .btn-sm, html body .btn-small, html body a.btn.btn-sm {
min-height: 44px !important;
padding: 10px 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ===== /Agent 29 ===== */
/* ===== Agent 30: Category archive 1-column (empty sidebar fix) (2026-04-20) ===== */
/* category/archive/search — sidebar 비어있으므로 1컬럼 강제 */
html body.archive .grid-main-sidebar,
html body.category .grid-main-sidebar,
html body.search .grid-main-sidebar,
html body.category-notice .grid-main-sidebar,
html body.category-study-tips .grid-main-sidebar {
display: block !important;
grid-template-columns: none !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
html body.archive .col-sidebar,
html body.category .col-sidebar,
html body.search .col-sidebar {
display: none !important;
}
html body.archive .col-main,
html body.category .col-main,
html body.search .col-main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* blog-grid PC 3열 자동 */
html body.archive .blog-grid,
html body.category .blog-grid {
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
gap: 24px !important;
}
@media (min-width: 1024px) {
html body.archive .blog-grid,
html body.category .blog-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 640px) {
html body.archive .blog-grid,
html body.category .blog-grid {
grid-template-columns: 1fr !important;
}
}
/* ===== /Agent 30 ===== */
/* ===== Agent 31: Footer 4-column layout + inner list block restore (2026-04-21) ===== */
/* Agent 22의 footer-menu grid 카드 스타일 override */
html body .site-footer .footer-column-list,
html body .site-footer .footer-column ul,
html body .site-footer nav ul,
html body .site-footer .footer-main ul {
display: block !important;
grid-template-columns: none !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
html body .site-footer .footer-column-list li,
html body .site-footer .footer-column ul li,
html body .site-footer nav ul li,
html body .site-footer .footer-main ul li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
list-style: none !important;
}
html body .site-footer .footer-column-list li a,
html body .site-footer .footer-column ul li a,
html body .site-footer nav ul li a,
html body .site-footer .footer-main ul li a {
display: block !important;
padding: 8px 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #cbd5e1 !important;
font-weight: 400 !important;
font-size: 14px !important;
text-align: left !important;
text-decoration: none !important;
transform: none !important;
transition: color .2s, transform .2s !important;
line-height: 1.6 !important;
}
html body .site-footer .footer-column-list li a:hover,
html body .site-footer .footer-column ul li a:hover,
html body .site-footer nav ul li a:hover,
html body .site-footer .footer-main ul li a:hover {
color: #F6CC4F !important;
transform: translateX(4px) !important;
box-shadow: none !important;
background: transparent !important;
border-color: transparent !important;
}
/* Footer main — 4-column grid (올바른 레이아웃) */
html body .site-footer .footer-main {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 48px !important;
align-items: flex-start !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 60px 24px !important;
width: 100% !important;
box-sizing: border-box !important;
}
@media (max-width: 1023px) {
html body .site-footer .footer-main {
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px !important;
padding: 40px 20px !important;
}
}
@media (max-width: 640px) {
html body .site-footer .footer-main {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
html body .site-footer .footer-column-title {
color: #D4A843 !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
}
/* Footer bottom (저작권) */
html body .site-footer .footer-bottom,
html body .site-footer .footer-bottom-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 24px !important;
border-top: 1px solid rgba(226, 232, 240, 0.08);
color: #94a3b8;
}
/* ===== /Agent 31 ===== */
/* ===== Agent 32: Footer bottom full-width bar (2026-04-21) ===== */
html body .site-footer .footer-bottom {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(0, 0, 0, 0.25) !important;
border-top: 1px solid rgba(226, 232, 240, 0.08) !important;
color: #94a3b8 !important;
}
html body .site-footer .footer-bottom-inner {
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 24px !important;
box-sizing: border-box !important;
color: #94a3b8 !important;
}
html body .site-footer .footer-bottom a,
html body .site-footer .footer-bottom-inner a {
color: #94a3b8 !important;
}
html body .site-footer .footer-bottom a:hover,
html body .site-footer .footer-bottom-inner a:hover {
color: #F6CC4F !important;
}
/* ===== /Agent 32 ===== */
/* ===== Agent 33: Home blog-grid 4-col PC (2026-04-21) ===== */
@media (min-width: 1024px) {
html body.home .blog-grid-home,
html body.home .blog-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
}
}
@media (min-width: 641px) and (max-width: 1023px) {
html body.home .blog-grid-home,
html body.home .blog-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
html body.home .blog-grid-home,
html body.home .blog-grid {
grid-template-columns: 1fr !important;
}
}
/* ===== /Agent 33 ===== */
/* ===== Agent 34: Features intro menu highlight (emerald) (2026-04-21) ===== */
body .site-header #primary-menu > li.menu-features-intro,
body .site-header .nav-list > li.menu-features-intro {
margin-left: 4px !important;
}
body .site-header #primary-menu > li.menu-features-intro > a,
body .site-header .nav-list > li.menu-features-intro > a {
background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #10b981 100%) !important;
background-size: 200% 200% !important;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 6px !important;
border-bottom: none !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
position: relative !important;
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
animation: mml-svc-shine 4s linear infinite !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
letter-spacing: -0.2px !important;
}
body .site-header #primary-menu > li.menu-features-intro > a:hover,
body .site-header .nav-list > li.menu-features-intro > a:hover {
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(16, 185, 129, 0.5) !important;
}
body .site-header #primary-menu > li.menu-features-intro > a::before {
content: "\2605";
font-size: 0.95em;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
body .site-header #primary-menu > li.menu-features-intro > a::after {
content: "NEW";
position: absolute;
top: -7px; right: -10px;
background: #ef4444;
color: #ffffff;
font-size: 0.62rem;
padding: 2px 6px;
border-radius: 9px;
font-weight: 800;
letter-spacing: 0.6px;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
animation: mml-svc-badge 1.5s ease-in-out infinite;
line-height: 1.2;
}
@keyframes mml-svc-shine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@keyframes mml-svc-badge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
/* 구분선(::before 의사선택자)은 이 메뉴 항목 왼쪽에는 생성 안 함 */
body .site-header #primary-menu > li.menu-features-intro::before,
body .site-header .nav-list > li.menu-features-intro::before {
display: none !important;
}
/* ===== /Agent 34 ===== */
/* ===== Agent 35: Features intro menu — refined minimal (override Agent 34) (2026-04-21) ===== */
body .site-header #primary-menu > li.menu-features-intro > a,
body .site-header .nav-list > li.menu-features-intro > a {
background: transparent !important;
background-image: none !important;
background-size: auto !important;
color: #059669 !important;
padding: 9px 16px !important;
border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
border-radius: 6px !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
letter-spacing: -0.2px !important;
box-shadow: none !important;
animation: none !important;
transition: all .2s ease !important;
display: inline-flex !important;
align-items: center !important;
}
body .site-header #primary-menu > li.menu-features-intro > a:hover,
body .site-header .nav-list > li.menu-features-intro > a:hover {
background: rgba(16, 185, 129, 0.08) !important;
border-color: #10b981 !important;
color: #047857 !important;
transform: none !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
text-shadow: none !important;
}
body .site-header #primary-menu > li.menu-features-intro > a::before {
content: "" !important;
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #10b981 !important;
margin-right: 9px !important;
display: inline-block !important;
flex-shrink: 0 !important;
position: static !important;
top: auto !important; left: auto !important;
transform: none !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
font-size: 0 !important;
color: transparent !important;
text-shadow: none !important;
}
body .site-header #primary-menu > li.menu-features-intro > a::after {
content: none !important;
display: none !important;
}
/* ===== /Agent 35 ===== */
/* ===== Agent 36: Features B2B banner + offset re-stack (2026-04-21) ===== */
.mml-features-banner {
background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
color: #e2e8f0 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 10000 !important;
min-height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}
.mml-features-banner-inner {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.mml-features-banner-tag {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.mml-features-banner-text {
color: #e2e8f0;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.2px;
}
.mml-features-banner-cta {
color: #10b981 !important;
font-weight: 700 !important;
text-decoration: none !important;
font-size: 13px;
white-space: nowrap;
padding: 4px 12px;
border: 1px solid rgba(16, 185, 129, 0.5);
border-radius: 4px;
transition: all .2s;
}
.mml-features-banner-cta:hover {
background: rgba(16, 185, 129, 0.12);
border-color: #10b981;
color: #34d399 !important;
}
/* Re-stack: features-banner(38) + announcement-bar(44) = 82 total */
html body.has-features-banner.has-announcement-bar { padding-top: 82px !important; }
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar { top: 38px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 82px !important; }
html body.has-features-banner:not(.has-announcement-bar) { padding-top: 38px !important; }
html body.has-features-banner:not(.has-announcement-bar) .site-header { top: 38px !important; }
@media (max-width: 768px) {
.mml-features-banner { min-height: 44px !important; }
.mml-features-banner-inner { gap: 8px; padding: 6px 12px; }
.mml-features-banner-text { font-size: 11.5px; }
.mml-features-banner-tag { font-size: 10px; padding: 2px 7px; }
.mml-features-banner-cta { font-size: 11.5px; padding: 3px 8px; }
html body.has-features-banner.has-announcement-bar { padding-top: 84px !important; }
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar { top: 44px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 84px !important; }
}
/* Agent 34/35 features-intro menu highlight 무효화 — 메뉴에서 삭제되므로 불필요 */
/* (참고: 메뉴 아이템 860 삭제로 .menu-features-intro selector 자체 미렌더) */
/* ===== /Agent 36 ===== */
/* ===== Agent 37: Features banner height lock 38px + nowrap (override Agent 36) (2026-04-21) ===== */
.mml-features-banner {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
overflow: hidden !important;
}
.mml-features-banner-inner {
flex-wrap: nowrap !important;
overflow: hidden !important;
padding: 0 20px !important;
gap: 12px !important;
height: 38px !important;
}
.mml-features-banner-text {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
.mml-features-banner-tag, .mml-features-banner-cta {
flex-shrink: 0 !important;
}
html body.has-features-banner.has-announcement-bar { padding-top: 82px !important; }
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar { top: 38px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 82px !important; }
@media (max-width: 768px) {
.mml-features-banner, .mml-features-banner-inner { height: 40px !important; min-height: 40px !important; max-height: 40px !important; }
.mml-features-banner-inner { padding: 0 10px !important; gap: 8px !important; }
.mml-features-banner-text { font-size: 11px !important; }
.mml-features-banner-tag { font-size: 9px !important; padding: 2px 6px !important; }
.mml-features-banner-cta { font-size: 11px !important; padding: 3px 8px !important; }
html body.has-features-banner.has-announcement-bar { padding-top: 84px !important; }
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar { top: 40px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 84px !important; }
}
@media (max-width: 480px) {
.mml-features-banner-text { display: none !important; }
}
/* ===== /Agent 37 ===== */
/* ===== Agent 38: Announcement slide is-active class fix (2026-04-21) ===== */
#mml-announcement-bar .mml-announcement-slide.is-active,
.mml-announcement-bar .mml-announcement-slide.is-active {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #020617 !important;
line-height: 1.4 !important;
animation: mml-ann-fade 0.5s ease !important;
}
/* ===== /Agent 38 ===== */
/* ===== Agent 39: DEMO banner fixed between features-banner and announcement-bar (2026-04-21) ===== */
html body.has-features-banner .demo-banner {
position: fixed !important;
top: 38px !important;
left: 0 !important;
right: 0 !important;
z-index: 9998 !important;
min-height: 45px !important;
max-height: 45px !important;
overflow: hidden !important;
margin: 0 !important;
}
html body.has-features-banner .demo-banner .container,
html body.has-features-banner .demo-banner .demo-banner-inner {
height: 45px !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
white-space: nowrap !important;
flex-wrap: nowrap !important;
}
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar {
top: 83px !important;
}
html body.has-features-banner.has-announcement-bar { padding-top: 127px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 127px !important; }
html body.has-features-banner:not(.has-announcement-bar) { padding-top: 83px !important; }
html body.has-features-banner:not(.has-announcement-bar) .site-header { top: 83px !important; }
@media (max-width: 768px) {
html body.has-features-banner .demo-banner {
top: 40px !important;
min-height: 52px !important;
max-height: 52px !important;
}
html body.has-features-banner .demo-banner .container,
html body.has-features-banner .demo-banner .demo-banner-inner {
height: 52px !important;
font-size: 11px !important;
white-space: normal !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar {
top: 92px !important;
}
html body.has-features-banner.has-announcement-bar { padding-top: 136px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 136px !important; }
}
/* ===== /Agent 39 ===== */
/* ===== Agent 40: Unified 3-banner stack — cohesive dark tone + tag/text/cta (2026-04-21) ===== */
/* 공통 컨테이너 */
.mml-features-banner,
.demo-banner,
.mml-announcement-bar,
#mml-announcement-bar {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
margin: 0 !important;
padding: 0 !important;
background-image: none !important;
}
/* 배경 3톤 다크 네이비 variation — 시각적 일관성 */
.mml-features-banner { background: #0b1220 !important; }
.demo-banner { background: #111827 !important; }
.mml-announcement-bar,
#mml-announcement-bar { background: #1e293b !important; border-bottom: 1px solid rgba(212, 168, 67, 0.25) !important; }
/* 공통 inner: flex 1200px 중앙 */
.mml-features-banner-inner,
.demo-banner .demo-banner-inner,
.demo-banner .container.demo-banner-inner,
.mml-announcement-inner {
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 24px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
flex-wrap: nowrap !important;
box-sizing: border-box !important;
position: relative !important;
}
/* 공통 badge/tag 스타일 */
.mml-features-banner-tag,
.demo-banner .demo-badge {
flex-shrink: 0 !important;
padding: 3px 9px !important;
border-radius: 4px !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
}
.mml-features-banner-tag {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: #ffffff !important;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.demo-banner .demo-badge {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
color: #1f2937 !important;
box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3);
}
/* 공통 텍스트 */
.mml-features-banner-text,
.demo-banner .demo-text,
.mml-announcement-text {
font-size: 13px !important;
font-weight: 500 !important;
color: #e2e8f0 !important;
letter-spacing: -0.2px !important;
line-height: 1.3 !important;
margin: 0 !important;
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.demo-banner .demo-text strong {
color: #ffffff !important;
font-weight: 700 !important;
}
.mml-announcement-text {
color: #fef3c7 !important;
}
/* 공통 CTA 링크 — outline 버튼 통일 */
.mml-features-banner-cta,
.demo-banner .demo-link,
.mml-announcement-cta {
flex-shrink: 0 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
padding: 5px 12px !important;
border-radius: 4px !important;
white-space: nowrap !important;
border: 1px solid !important;
transition: all .2s !important;
line-height: 1.3 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
.mml-features-banner-cta {
color: #34d399 !important;
border-color: rgba(52, 211, 153, 0.5) !important;
background: transparent !important;
}
.mml-features-banner-cta:hover {
background: rgba(16, 185, 129, 0.12) !important;
border-color: #10b981 !important;
color: #6ee7b7 !important;
}
.demo-banner .demo-link {
color: #93c5fd !important;
border-color: rgba(147, 197, 253, 0.4) !important;
background: transparent !important;
}
.demo-banner .demo-link:hover {
background: rgba(147, 197, 253, 0.12) !important;
border-color: #93c5fd !important;
color: #bfdbfe !important;
}
.mml-announcement-cta {
color: #fbbf24 !important;
border-color: rgba(251, 191, 36, 0.5) !important;
background: transparent !important;
animation: none !important;
}
.mml-announcement-cta:hover {
background: rgba(251, 191, 36, 0.15) !important;
border-color: #fbbf24 !important;
color: #fde68a !important;
}
/* 닫기 버튼 통일 */
.mml-announcement-close {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
flex-shrink: 0 !important;
width: 28px !important;
height: 28px !important;
background: transparent !important;
color: #94a3b8 !important;
border: 0 !important;
font-size: 18px !important;
font-weight: 400 !important;
opacity: 0.65 !important;
cursor: pointer !important;
padding: 0 !important;
border-radius: 4px !important;
line-height: 1 !important;
}
.mml-announcement-close:hover {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.08) !important;
color: #e2e8f0 !important;
}
/* Re-stack: 40 + 40 + 40 = 120 */
html body.has-features-banner .demo-banner {
position: fixed !important;
top: 40px !important;
left: 0 !important;
right: 0 !important;
z-index: 9998 !important;
}
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar {
top: 80px !important;
}
html body.has-features-banner.has-announcement-bar { padding-top: 120px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 120px !important; }
/* Announcement slide 내부 flex 복구 */
#mml-announcement-bar .mml-announcement-slide.is-active,
.mml-announcement-bar .mml-announcement-slide.is-active {
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
flex: 1 1 auto !important;
justify-content: center !important;
min-width: 0 !important;
max-width: calc(100% - 48px) !important;
}
#mml-announcement-bar .mml-announcement-slide,
.mml-announcement-bar .mml-announcement-slide {
display: none !important;
}
/* 모바일 — 폰트/padding 축소 */
@media (max-width: 768px) {
.mml-features-banner,
.demo-banner,
.mml-announcement-bar,
#mml-announcement-bar {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.mml-features-banner-inner,
.demo-banner .demo-banner-inner,
.mml-announcement-inner {
padding: 0 12px !important;
gap: 8px !important;
height: 44px !important;
}
.mml-features-banner-text,
.demo-banner .demo-text,
.mml-announcement-text { font-size: 11.5px !important; }
.mml-features-banner-cta,
.demo-banner .demo-link,
.mml-announcement-cta { font-size: 11px !important; padding: 4px 8px !important; }
.mml-features-banner-tag,
.demo-banner .demo-badge { font-size: 9px !important; padding: 2px 6px !important; }
html body.has-features-banner .demo-banner { top: 44px !important; }
html body.has-features-banner.has-announcement-bar .mml-announcement-bar,
html body.has-features-banner.has-announcement-bar #mml-announcement-bar { top: 88px !important; }
html body.has-features-banner.has-announcement-bar { padding-top: 132px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 132px !important; }
}
@media (max-width: 480px) {
.mml-features-banner-text,
.demo-banner .demo-text { display: none !important; }
}
/* ===== /Agent 40 ===== */
/* ===== Agent 41: Announcement-bar 제거 + Event-banner 3 슬라이드 슬라이더 (2026-04-21) ===== */
/* 1. Announcement-bar 전체 숨김 (mu-plugin 비활성화 + 혹시 남은 CSS 무효) */
.mml-announcement-bar,
#mml-announcement-bar {
display: none !important;
}
/* 2. body stacking 재계산: features(40) + demo(40) = 80 */
html body.has-features-banner { padding-top: 80px !important; }
html body.has-features-banner .site-header { top: 80px !important; }
html body.has-features-banner.has-announcement-bar { padding-top: 80px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 80px !important; }
@media (max-width: 768px) {
html body.has-features-banner { padding-top: 88px !important; }
html body.has-features-banner .site-header { top: 88px !important; }
html body.has-features-banner.has-announcement-bar { padding-top: 88px !important; }
html body.has-features-banner.has-announcement-bar .site-header { top: 88px !important; }
}
/* 3. Event-banner 슬라이더 내부 스타일 */
.event-banner-slider {
position: relative !important;
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
}
.event-banner-slide {
display: none !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
flex: 1 1 auto !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
width: 100% !important;
}
.event-banner-slide.is-active {
display: inline-flex !important;
animation: mml-eb-fade .4s ease !important;
}
@keyframes mml-eb-fade {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
.event-banner-slide .event-banner-copy {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex-shrink: 1;
margin: 0 !important;
}
.event-banner-slide .event-banner-cta {
flex-shrink: 0;
white-space: nowrap;
}
@media (max-width: 768px) {
.event-banner-slide { gap: 8px !important; }
.event-banner-slide .event-banner-copy { font-size: 12px !important; }
.event-banner-slide .event-banner-cta { font-size: 12px !important; padding: 4px 10px !important; }
}
/* ===== /Agent 41 ===== */
/* ===== Agent 42: Features banner CTA subtle pulse + ring animation (2026-04-21) ===== */
.mml-features-banner-cta {
animation: mml-cta-pulse 2.4s ease-in-out infinite !important;
position: relative !important;
overflow: visible !important;
transition: transform .2s, background .2s, border-color .2s, color .2s !important;
}
.mml-features-banner-cta::after {
content: "" !important;
position: absolute !important;
inset: -1px !important;
border-radius: 5px !important;
border: 1.5px solid rgba(52, 211, 153, 0.55) !important;
opacity: 0 !important;
pointer-events: none !important;
animation: mml-cta-ring 2.4s ease-out infinite !important;
}
@keyframes mml-cta-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.35); }
50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
@keyframes mml-cta-ring {
0% { opacity: 0; transform: scale(1); }
45% { opacity: 1; }
100% { opacity: 0; transform: scale(1.35); }
}
.mml-features-banner-cta:hover {
animation-play-state: paused !important;
transform: translateX(2px) !important;
background: rgba(16, 185, 129, 0.15) !important;
}
.mml-features-banner-cta:hover::after {
animation-play-state: paused !important;
opacity: 1 !important;
}
.mml-features-banner-cta:focus-visible {
outline: 2px solid #10b981 !important;
outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
.mml-features-banner-cta,
.mml-features-banner-cta::after { animation: none !important; }
}
/* ===== /Agent 42 ===== */
/* ===== Agent 43: Hide duplicate portal-topbar-link (already in menu + footer) (2026-04-21) ===== */
.portal-topbar-link,
a.portal-topbar-link,
[class*="portal-topbar"] {
display: none !important;
visibility: hidden !important;
}
/* ===== /Agent 43 ===== */
/* ===== Agent 44: Stronger CTA attention animation (override Agent 42) (2026-04-21) ===== */
.mml-features-banner-cta {
animation: mml-cta-attn 1.6s ease-in-out infinite !important;
position: relative !important;
overflow: visible !important;
transition: transform .2s, background .2s, border-color .2s, color .2s !important;
will-change: transform, box-shadow, background-color !important;
}
.mml-features-banner-cta::after {
content: "" !important;
position: absolute !important;
inset: -3px !important;
border-radius: 6px !important;
border: 2px solid #10b981 !important;
opacity: 0 !important;
pointer-events: none !important;
animation: mml-cta-ring-v2 1.6s ease-out infinite !important;
box-sizing: border-box !important;
}
@keyframes mml-cta-attn {
0%, 100% {
transform: scale(1);
background: transparent;
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7), 0 2px 6px rgba(16, 185, 129, 0.2);
border-color: rgba(52, 211, 153, 0.5);
}
50% {
transform: scale(1.08);
background: rgba(16, 185, 129, 0.2);
box-shadow: 0 0 0 10px rgba(52, 211, 153, 0), 0 6px 18px rgba(16, 185, 129, 0.55);
border-color: #34d399;
}
}
@keyframes mml-cta-ring-v2 {
0% { opacity: 0; transform: scale(1); border-color: #10b981; }
25% { opacity: 1; }
100% { opacity: 0; transform: scale(1.7); border-color: rgba(52, 211, 153, 0.3); }
}
.mml-features-banner-cta:hover {
animation-play-state: paused !important;
transform: scale(1.1) translateX(2px) !important;
background: rgba(16, 185, 129, 0.3) !important;
color: #ffffff !important;
border-color: #34d399 !important;
}
.mml-features-banner-cta:hover::after {
animation-play-state: paused !important;
opacity: 1 !important;
transform: scale(1.15) !important;
border-width: 2px !important;
}
/* ===== /Agent 44 ===== */
/* ===== Agent 45: Multi-fix (shop first-slot / portal-dashboard light / classes layout / admin-bar / calendar hero) (2026-04-21) ===== */
/* 1. /shop/ 첫 칸 빈 문제 — WC .first/.last가 columns-4 기준으로 append된 클래스. grid-column 강제 auto */
html body.woocommerce ul.products li.product,
html body.woocommerce-page ul.products li.product,
html body.woocommerce ul.products li.product.first,
html body.woocommerce ul.products li.product.last,
html body.woocommerce-page ul.products li.product.first,
html body.woocommerce-page ul.products li.product.last {
clear: none !important;
float: none !important;
grid-column: auto !important;
grid-column-start: auto !important;
grid-column-end: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html body.woocommerce .columns-4 ul.products,
html body.woocommerce-page .columns-4 ul.products,
html body.woocommerce ul.products.columns-4,
html body.woocommerce-page ul.products.columns-4 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* 2. /portal/dashboard/, /portal/ — 밝은 테마 강제 (body template/id 타겟) */
html body.page-template-page-portal-login,
html body.page-template-page-portal-dashboard,
html body.page-id-318,
html body.page-id-319 {
background: #f9fafb !important;
color: #1f2937 !important;
}
html body.page-template-page-portal-login .site-main,
html body.page-template-page-portal-dashboard .site-main,
html body.page-id-318 .site-main,
html body.page-id-319 .site-main {
background: #f9fafb !important;
}
html body.page-id-318 .site-main *,
html body.page-id-319 .site-main *,
html body.page-template-page-portal-login .site-main *,
html body.page-template-page-portal-dashboard .site-main * {
color: #1f2937 !important;
}
html body.page-id-318 .site-main h1,
html body.page-id-318 .site-main h2,
html body.page-id-319 .site-main h1,
html body.page-id-319 .site-main h2,
html body.page-id-319 .site-main h3 {
color: #0f172a !important;
}
html body.page-id-318 .portal-login-card,
html body.page-id-319 .portal-dashboard,
html body.page-id-319 .portal-stat-card,
html body.page-id-319 .portal-welcome-notice,
html body.page-id-319 .portal-chart-wrap {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
color: #1f2937 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* 3. /classes/ archive 좌측 쏠림 — archive-academy_class 1컬럼 */
html body.post-type-archive-academy_class .grid-main-sidebar,
html body.post-type-archive-academy_teacher .grid-main-sidebar,
html body.post-type-archive-academy_student .grid-main-sidebar {
display: block !important;
grid-template-columns: none !important;
}
html body.post-type-archive-academy_class .col-sidebar,
html body.post-type-archive-academy_teacher .col-sidebar,
html body.post-type-archive-academy_student .col-sidebar {
display: none !important;
}
html body.post-type-archive-academy_class .col-main,
html body.post-type-archive-academy_teacher .col-main,
html body.post-type-archive-academy_student .col-main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html body.post-type-archive-academy_class .class-grid,
html body.post-type-archive-academy_teacher .teacher-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
gap: 24px !important;
}
@media (min-width: 1024px) {
html body.post-type-archive-academy_class .class-grid,
html body.post-type-archive-academy_teacher .teacher-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* 4. /calendar/ 대표이미지 높이 확보 */
html body.page-template-page-calendar .page-hero.page-hero-with-bg,
html body.page-id-182 .page-hero.page-hero-with-bg {
min-height: 280px !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* 5. WP admin bar 대응 (로그인 시 32px 차지) */
html body.admin-bar .mml-features-banner { top: 32px !important; }
html body.admin-bar.has-features-banner { padding-top: 112px !important; }
html body.admin-bar.has-features-banner .demo-banner { top: 72px !important; }
html body.admin-bar.has-features-banner .site-header { top: 112px !important; }
@media (max-width: 782px) {
html body.admin-bar .mml-features-banner { top: 46px !important; }
html body.admin-bar.has-features-banner { padding-top: 134px !important; }
html body.admin-bar.has-features-banner .demo-banner { top: 86px !important; }
html body.admin-bar.has-features-banner .site-header { top: 134px !important; }
}
/* 6. 2번 배너(DEMO) 아래 흰색 여백 제거 — site-header가 top에 바로 붙게 */
html body.has-features-banner .site-wrapper > .demo-banner + * {
margin-top: 0 !important;
}
html body.has-features-banner .demo-banner {
margin-bottom: 0 !important;
}
/* ===== /Agent 45 ===== */
/* ===== Agent 46: Shop ::before/::after clearfix grid-slot fix (2026-04-21) ===== */
html body.woocommerce ul.products::before,
html body.woocommerce ul.products::after,
html body.woocommerce-page ul.products::before,
html body.woocommerce-page ul.products::after {
content: none !important;
display: none !important;
width: 0 !important;
}
/* ===== /Agent 46 ===== */
/* ===== Agent 47: Shop hero full-width + top gap removal (2026-04-21) ===== */
html body.woocommerce .entry-content > .page-hero.page-hero-with-bg,
html body.woocommerce-page .entry-content > .page-hero.page-hero-with-bg,
html body.mml-wc-hero-active .entry-content > .page-hero.page-hero-with-bg,
html body.mml-wc-hero-active .page-hero.page-hero-with-bg {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
box-sizing: border-box !important;
}
/* Shop site-main top padding 제거로 gap 96px 해소 */
html body.woocommerce .site-main,
html body.woocommerce-page .site-main,
html body.mml-wc-hero-active .site-main {
padding-top: 0 !important;
margin-top: 0 !important;
}
html body.woocommerce .entry-content,
html body.woocommerce-page .entry-content,
html body.mml-wc-hero-active .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 기존 테마 page-hero-sm (얇은 소형 hero) 중복 숨김 — mml-wc-hero-active 타겟 */
html body.mml-wc-hero-active .page-hero.page-hero-sm,
html body.mml-wc-hero-active section.page-hero-sm {
display: none !important;
}
/* Hero 내부 container는 폭 제한 (풀배경 + 내용은 중앙) */
html body.woocommerce .entry-content > .page-hero.page-hero-with-bg > .container,
html body.woocommerce-page .entry-content > .page-hero.page-hero-with-bg > .container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 64px 24px !important;
}
/* /portal/dashboard/ 로그인 상태 body.page-id-319에 다크 쏠린 규칙 덮어쓰기 */
html body.page-id-319,
html body.page-template-page-portal-dashboard,
html body.page-template-page-portal-dashboard-php {
background: #f9fafb !important;
color: #1f2937 !important;
}
html body.page-id-319 .site-main,
html body.page-template-page-portal-dashboard .site-main {
background: #f9fafb !important;
}
html body.page-id-319 .site-main *,
html body.page-template-page-portal-dashboard .site-main * {
color: inherit;
}
html body.page-id-319 .site-main h1,
html body.page-id-319 .site-main h2,
html body.page-id-319 .site-main h3 { color: #0f172a !important; }
html body.page-id-319 .site-main p,
html body.page-id-319 .site-main li,
html body.page-id-319 .site-main td,
html body.page-id-319 .site-main span,
html body.page-id-319 .site-main label { color: #1f2937 !important; }
html body.page-id-319 .portal-dashboard,
html body.page-id-319 .portal-stat-card,
html body.page-id-319 .portal-welcome-notice,
html body.page-id-319 .portal-chart-wrap,
html body.page-id-319 .portal-section,
html body.page-id-319 [class*="portal-"] {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
color: #1f2937 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
html body.page-id-319 [class*="portal-"] * { color: #1f2937 !important; }
html body.page-id-319 [class*="portal-"] h1,
html body.page-id-319 [class*="portal-"] h2,
html body.page-id-319 [class*="portal-"] h3 { color: #0f172a !important; }
/* ===== /Agent 47 ===== */
/* ===== Agent 48: article.single-page padding-top 0 for pages with full-width hero (2026-04-21) ===== */
html body.mml-wc-hero-active article.single-page,
html body.mml-wc-hero-active .container.section.single-page,
html body.woocommerce article.single-page,
html body.woocommerce-page article.single-page,
html body.woocommerce-cart article.single-page,
html body.woocommerce-checkout article.single-page,
html body.woocommerce-account article.single-page {
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* 내부 contents는 중앙 1200 */
html body.woocommerce article.single-page > .entry-content > *:not(.page-hero),
html body.woocommerce-page article.single-page > .entry-content > *:not(.page-hero),
html body.mml-wc-hero-active article.single-page > .entry-content > *:not(.page-hero) {
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px;
padding-right: 24px;
}
/* ===== /Agent 48 ===== */
/* ===== Agent 49: /community/ hero 최상단 + sidebar widget 밝은 테마 (2026-04-21) ===== */
/* 1. bbpress-wrapper 내 hero를 flex order -1로 최상단 이동 */
html body.forum-archive .bbpress-wrapper,
html body.bbpress .bbpress-wrapper,
html body.post-type-archive-forum .bbpress-wrapper {
display: flex !important;
flex-direction: column !important;
}
html body.forum-archive .bbpress-wrapper > .page-hero,
html body.bbpress .bbpress-wrapper > .page-hero,
html body.post-type-archive-forum .bbpress-wrapper > .page-hero {
order: -1 !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: -96px !important;
margin-bottom: 48px !important;
}
/* 2. community-sidebar-widget 밝은 카드 테마 */
html body .community-sidebar-widget {
background: #ffffff !important;
color: #1f2937 !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 20px 22px !important;
margin-bottom: 16px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html body .community-sidebar-widget p,
html body .community-sidebar-widget li,
html body .community-sidebar-widget span,
html body .community-sidebar-widget small,
html body .community-sidebar-widget time { color: #1f2937 !important; }
html body .community-sidebar-widget h3,
html body .community-sidebar-widget h4,
html body .community-sidebar-widget .widget-title,
html body .community-sidebar-widget .sidebar-title {
color: #0f172a !important;
font-weight: 700 !important;
}
html body .community-sidebar-widget a {
color: #B8881B !important;
text-decoration: none !important;
}
html body .community-sidebar-widget a:hover {
color: #D4A843 !important;
text-decoration: underline !important;
}
html body .community-sidebar-widget .topic-rank,
html body .community-sidebar-widget [class*="rank"],
html body .community-sidebar-widget [class*="num"] {
background: rgba(212, 168, 67, 0.15) !important;
color: #92400e !important;
border-radius: 4px;
padding: 2px 8px;
font-weight: 700;
}
html body .community-sidebar-widget .widget-icon,
html body .community-sidebar-widget [class*="icon"] {
color: #D4A843 !important;
}
html body .community-sidebar-widget .reply-author,
html body .community-sidebar-widget .reply-time {
color: #6b7280 !important;
}
/* ===== /Agent 49 ===== */
/* ===== Agent 50: /community/ dup hero fix — hide page-hero-sm, place page-hero-with-bg at top (2026-04-21) ===== */
/* 1. 중복 "포럼" 제목 hero 숨김 (site-main 직속 page-hero-sm) */
html body.forum-archive .site-main > .page-hero.page-hero-sm,
html body.bbpress .site-main > .page-hero.page-hero-sm,
html body.post-type-archive-forum .site-main > .page-hero.page-hero-sm,
html body.forum-archive .site-main > section.page-hero-sm,
html body.post-type-archive-forum .site-main > section.page-hero-sm {
display: none !important;
}
/* 2. Community article padding-top 0 (96px gap 제거) */
html body.forum-archive article.single-page,
html body.post-type-archive-forum article.single-page,
html body.forum-archive article.container.section,
html body.post-type-archive-forum article.container.section {
padding-top: 0 !important;
}
/* 3. "학부모 커뮤니티" hero full-width + 상단 margin 0 */
html body.forum-archive .page-hero.page-hero-with-bg,
html body.post-type-archive-forum .page-hero.page-hero-with-bg,
html body.bbpress .page-hero.page-hero-with-bg {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 48px !important;
}
/* ===== /Agent 50 ===== */
/* ===== Agent 51: Portal dashboard 디자인 리뉴얼 (2026-04-21) ===== */
html body.page-id-319 .portal-dashboard-page {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 40px 24px !important;
}
/* 그라데이션 헤더 카드 */
html body.page-id-319 .portal-dashboard-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 36px 40px !important;
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #2563eb 100%) !important;
color: #ffffff !important;
border-radius: 18px !important;
box-shadow: 0 10px 32px rgba(30, 58, 138, 0.25) !important;
margin-bottom: 32px !important;
position: relative !important;
overflow: hidden !important;
}
html body.page-id-319 .portal-dashboard-header::before {
content: '' !important;
position: absolute !important;
top: -40% !important; right: -8% !important;
width: 440px !important; height: 440px !important;
background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 65%) !important;
pointer-events: none !important;
}
html body.page-id-319 .portal-dashboard-header::after {
content: '' !important;
position: absolute !important;
bottom: -30% !important; left: -5% !important;
width: 300px !important; height: 300px !important;
background: radial-gradient(circle, rgba(212, 168, 67, 0.15), transparent 60%) !important;
pointer-events: none !important;
}
html body.page-id-319 .portal-dashboard-header > div {
position: relative !important;
z-index: 2 !important;
}
html body.page-id-319 .portal-dashboard-header h1 {
color: #ffffff !important;
font-size: 2rem !important;
margin: 0 0 10px 0 !important;
font-weight: 800 !important;
letter-spacing: -0.5px !important;
}
html body.page-id-319 .portal-welcome {
color: rgba(255, 255, 255, 0.88) !important;
font-size: 1.05rem !important;
margin: 0 !important;
font-weight: 500 !important;
}
html body.page-id-319 .portal-logout {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
padding: 11px 22px !important;
border-radius: 8px !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: all .2s !important;
position: relative !important;
z-index: 2 !important;
font-size: 0.9rem !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
html body.page-id-319 .portal-logout:hover {
background: rgba(255, 255, 255, 0.25) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}
/* Stat grid — 4카드 컬러 accent */
html body.page-id-319 .portal-stat-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
margin-bottom: 36px !important;
}
@media (max-width: 1023px) {
html body.page-id-319 .portal-stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
html body.page-id-319 .portal-stat-grid {
grid-template-columns: 1fr !important;
}
}
html body.page-id-319 .portal-stat-card {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 14px !important;
padding: 26px 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
transition: all .25s ease !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
html body.page-id-319 .portal-stat-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 4px !important;
background: linear-gradient(90deg, #3b82f6, #1e3a8a) !important;
}
html body.page-id-319 .portal-stat-card:nth-child(1)::before { background: linear-gradient(90deg, #3b82f6, #1e40af) !important; }
html body.page-id-319 .portal-stat-card:nth-child(2)::before { background: linear-gradient(90deg, #10b981, #065f46) !important; }
html body.page-id-319 .portal-stat-card:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #b45309) !important; }
html body.page-id-319 .portal-stat-card:nth-child(4)::before { background: linear-gradient(90deg, #D4A843, #92400e) !important; }
html body.page-id-319 .portal-stat-card::after {
content: '' !important;
position: absolute !important;
top: -20px !important; right: -20px !important;
width: 100px !important; height: 100px !important;
border-radius: 50% !important;
opacity: 0.06 !important;
}
html body.page-id-319 .portal-stat-card:nth-child(1)::after { background: #3b82f6 !important; }
html body.page-id-319 .portal-stat-card:nth-child(2)::after { background: #10b981 !important; }
html body.page-id-319 .portal-stat-card:nth-child(3)::after { background: #f59e0b !important; }
html body.page-id-319 .portal-stat-card:nth-child(4)::after { background: #D4A843 !important; }
html body.page-id-319 .portal-stat-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
border-color: rgba(212, 168, 67, 0.4) !important;
}
html body.page-id-319 .portal-stat-label {
font-size: 0.78rem !important;
font-weight: 700 !important;
color: #6b7280 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
margin-top: 8px !important;
}
html body.page-id-319 .portal-stat-value {
font-size: 2.1rem !important;
font-weight: 800 !important;
color: #0f172a !important;
letter-spacing: -1px !important;
line-height: 1.1 !important;
}
/* 섹션 카드 */
html body.page-id-319 .portal-section {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 18px !important;
padding: 32px 36px !important;
margin-bottom: 28px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
html body.page-id-319 .portal-section h2 {
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin: 0 0 24px 0 !important;
padding-bottom: 16px !important;
border-bottom: 2px solid #f3f4f6 !important;
position: relative !important;
display: inline-block !important;
padding-right: 40px !important;
}
html body.page-id-319 .portal-section h2::after {
content: '' !important;
position: absolute !important;
bottom: -2px !important; left: 0 !important;
width: 80px !important; height: 3px !important;
background: linear-gradient(90deg, #D4A843, #F6CC4F) !important;
border-radius: 2px !important;
}
/* 캘린더 — 출결 색상 강조 */
html body.page-id-319 .portal-attendance-cal {
background: #fafbfc !important;
border-radius: 12px !important;
padding: 20px !important;
}
html body.page-id-319 .portal-cal-weekdays {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 8px !important;
margin-bottom: 12px !important;
}
html body.page-id-319 .portal-cal-weekdays > span {
text-align: center !important;
font-weight: 700 !important;
color: #6b7280 !important;
font-size: 0.8rem !important;
padding: 8px 0 !important;
letter-spacing: 1.5px !important;
}
html body.page-id-319 .portal-cal-weekdays > span:first-child { color: #ef4444 !important; }
html body.page-id-319 .portal-cal-weekdays > span:last-child { color: #3b82f6 !important; }
html body.page-id-319 .portal-cal-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 8px !important;
}
html body.page-id-319 .portal-cal-cell {
aspect-ratio: 1 / 1 !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 10px 8px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
transition: all .2s !important;
position: relative !important;
overflow: hidden !important;
min-height: 80px !important;
}
html body.page-id-319 .portal-cal-cell:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
z-index: 2 !important;
}
html body.page-id-319 .portal-cal-empty {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
html body.page-id-319 .portal-cal-empty:hover {
transform: none !important;
box-shadow: none !important;
}
html body.page-id-319 .portal-cal-day {
font-weight: 800 !important;
font-size: 0.95rem !important;
color: #0f172a !important;
line-height: 1 !important;
}
html body.page-id-319 .portal-cal-mark {
font-size: 0.68rem !important;
font-weight: 700 !important;
text-align: center !important;
padding: 3px 6px !important;
border-radius: 5px !important;
align-self: flex-end !important;
width: 100% !important;
box-sizing: border-box !important;
letter-spacing: 0.3px !important;
}
html body.page-id-319 .portal-cal-status-present {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
border-color: #6ee7b7 !important;
}
html body.page-id-319 .portal-cal-status-present .portal-cal-mark {
background: #10b981 !important;
color: #ffffff !important;
}
html body.page-id-319 .portal-cal-status-late {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
border-color: #fcd34d !important;
}
html body.page-id-319 .portal-cal-status-late .portal-cal-mark {
background: #f59e0b !important;
color: #ffffff !important;
}
html body.page-id-319 .portal-cal-status-absent {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
border-color: #fca5a5 !important;
}
html body.page-id-319 .portal-cal-status-absent .portal-cal-mark {
background: #ef4444 !important;
color: #ffffff !important;
}
@media (max-width: 640px) {
html body.page-id-319 .portal-cal-grid { gap: 4px !important; }
html body.page-id-319 .portal-cal-cell { padding: 6px 4px !important; min-height: 56px !important; border-radius: 6px !important; }
html body.page-id-319 .portal-cal-day { font-size: 0.78rem !important; }
html body.page-id-319 .portal-cal-mark { font-size: 0.55rem !important; padding: 1px 3px !important; border-radius: 3px !important; }
html body.page-id-319 .portal-dashboard-header { padding: 24px !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
html body.page-id-319 .portal-dashboard-header h1 { font-size: 1.5rem !important; }
html body.page-id-319 .portal-stat-value { font-size: 1.6rem !important; }
html body.page-id-319 .portal-section { padding: 20px !important; }
}
/* ===== /Agent 51 ===== */
/* ===== Agent 52: Hero 비율 개선 + 좌우 그라데이션 + 밝은 폰트 (2026-04-21) ===== */
/* 1. Hero 최소 높이 확대 (6.1:1 → 4.5:1 근접) + 얼굴 위치 고정 */
html body .page-hero.page-hero-with-bg {
min-height: 420px !important;
padding: 80px 0 !important;
background-size: cover !important;
background-position: center 25% !important;
background-repeat: no-repeat !important;
position: relative !important;
overflow: hidden !important;
}
/* 2. 좌우 그라데이션 페이드 (overlay 강화) — 양끝 dark→투명, 상하 dark→어두움 */
html body .page-hero.page-hero-with-bg .page-hero-overlay,
html body .page-hero.page-hero-with-bg::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(90deg, rgba(15, 27, 45, 0.92) 0%, rgba(15, 27, 45, 0.3) 14%, rgba(15, 27, 45, 0.1) 50%, rgba(15, 27, 45, 0.3) 86%, rgba(15, 27, 45, 0.92) 100%),
linear-gradient(180deg, rgba(15, 27, 45, 0.45) 0%, rgba(15, 27, 45, 0.7) 100%) !important;
z-index: 1 !important;
}
/* page-hero-overlay가 없는 섹션도 pseudo로 커버 */
html body .page-hero.page-hero-with-bg > * {
position: relative !important;
z-index: 2 !important;
}
/* 3. 내부 텍스트 밝게 강제 + text-shadow 가독성 */
html body .page-hero.page-hero-with-bg,
html body .page-hero.page-hero-with-bg .page-hero-title,
html body .page-hero.page-hero-with-bg .page-hero-sub,
html body .page-hero.page-hero-with-bg .page-hero-eyebrow,
html body .page-hero.page-hero-with-bg p,
html body .page-hero.page-hero-with-bg h1,
html body .page-hero.page-hero-with-bg h2,
html body .page-hero.page-hero-with-bg h3,
html body .page-hero.page-hero-with-bg span:not(.page-hero-badge):not(.badge):not([class*="badge"]),
html body .page-hero.page-hero-with-bg strong,
html body .page-hero.page-hero-with-bg small,
html body .page-hero.page-hero-with-bg li {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
html body .page-hero.page-hero-with-bg .page-hero-sub {
color: rgba(255, 255, 255, 0.92) !important;
}
/* 4. Badge는 가독성 위해 금색 배경 + 다크 텍스트 유지 */
html body .page-hero.page-hero-with-bg .page-hero-badge,
html body .page-hero.page-hero-with-bg .badge,
html body .page-hero.page-hero-with-bg [class*="badge"]:not(.page-hero):not(.page-hero-with-bg) {
background: linear-gradient(135deg, #D4A843, #F6CC4F) !important;
color: #020617 !important;
text-shadow: none !important;
padding: 6px 16px !important;
border-radius: 20px !important;
font-weight: 800 !important;
font-size: 0.82rem !important;
letter-spacing: 1.5px !important;
display: inline-block !important;
box-shadow: 0 4px 10px rgba(212, 168, 67, 0.45) !important;
margin-bottom: 16px !important;
text-transform: uppercase !important;
}
/* 5. CTA 버튼 (있을 경우) 배경 강조 */
html body .page-hero.page-hero-with-bg .btn,
html body .page-hero.page-hero-with-bg .page-hero-cta {
text-shadow: none !important;
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(8px) !important;
}
html body .page-hero.page-hero-with-bg .btn.btn-primary,
html body .page-hero.page-hero-with-bg .btn-primary {
background: linear-gradient(135deg, #D4A843, #F6CC4F) !important;
color: #020617 !important;
border-color: transparent !important;
}
/* 6. 모바일 — 높이 축소 + padding 조정 */
@media (max-width: 768px) {
html body .page-hero.page-hero-with-bg {
min-height: 280px !important;
padding: 60px 20px !important;
}
}
@media (max-width: 480px) {
html body .page-hero.page-hero-with-bg {
min-height: 240px !important;
padding: 48px 16px !important;
}
}
/* ===== /Agent 52 ===== */
/* ===== Agent 53: Hero 이미지 시각 개선 (blur 뒤 + 원본 contain 앞) (2026-04-21) ===== */
html body .page-hero.page-hero-with-bg {
min-height: 440px !important;
padding: 80px 0 !important;
background-size: cover !important;
background-position: center 38% !important;
background-repeat: no-repeat !important;
background-color: #0f172a !important;
position: relative !important;
overflow: hidden !important;
}
/* 좌우 그라데이션 약화 (이미지 더 보이게) */
html body .page-hero.page-hero-with-bg .page-hero-overlay,
html body .page-hero.page-hero-with-bg::after {
content: !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(90deg, rgba(15, 27, 45, 0.55) 0%, rgba(15, 27, 45, 0) 12%, rgba(15, 27, 45, 0) 88%, rgba(15, 27, 45, 0.55) 100%),
linear-gradient(180deg, rgba(15, 27, 45, 0.35) 0%, rgba(15, 27, 45, 0.55) 100%) !important;
z-index: 1 !important;
}
@media (max-width: 768px) {
html body .page-hero.page-hero-with-bg {
min-height: 300px !important;
padding: 50px 20px !important;
}
}
/* ===== /Agent 53 ===== */
/* ===== Agent 54: /portal/ 로그인 밝은 테마 + hero full-width (2026-04-21) ===== */
/* 1. body / main / 모든 portal wrapper 흰색 강제 */
html body.page-id-318,
html body.page-template-page-portal-login,
html body.page-template-page-portal-login-php,
html body.page-id-318 main.portal-login-page,
html body.page-id-318 .portal-login-page,
html body.page-template-page-portal-login main,
html body.page-template-page-portal-login .site-main,
html body.page-id-318 .site-main {
background: #ffffff !important;
background-image: none !important;
}
/* 2. Main padding 제거 + hero full-width */
html body.page-id-318 main.portal-login-page,
html body.page-template-page-portal-login main {
padding: 0 !important;
max-width: none !important;
margin: 0 !important;
}
html body.page-id-318 .page-hero.page-hero-with-bg {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
}
/* 3. 로그인 카드 밝은 테마 */
html body.page-id-318 .portal-login,
html body.page-id-318 .portal-login-card,
html body.page-id-318 .portal-login-wrap {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
color: #1f2937 !important;
margin: 48px auto !important;
max-width: 500px !important;
padding: 40px !important;
border-radius: 16px !important;
}
html body.page-id-318 .portal-login p,
html body.page-id-318 .portal-login span,
html body.page-id-318 .portal-login label,
html body.page-id-318 .portal-login li,
html body.page-id-318 .portal-login small,
html body.page-id-318 .portal-login div:not([class*="notice"]):not([class*="alert"]) {
color: #1f2937 !important;
}
html body.page-id-318 .portal-login h1,
html body.page-id-318 .portal-login h2,
html body.page-id-318 .portal-login h3,
html body.page-id-318 .portal-login h4 {
color: #0f172a !important;
}
html body.page-id-318 .portal-login strong {
color: #B8881B !important;
}
html body.page-id-318 .portal-login a {
color: #B8881B !important;
}
/* 4. 안내/데모 계정 info 박스 — 연한 금색 */
html body.page-id-318 .portal-login [class*="notice"],
html body.page-id-318 .portal-login [class*="info"],
html body.page-id-318 .portal-login [class*="demo"],
html body.page-id-318 .portal-login aside {
background: rgba(212, 168, 67, 0.08) !important;
border: 1px solid rgba(212, 168, 67, 0.3) !important;
color: #1f2937 !important;
padding: 14px 16px !important;
border-radius: 8px !important;
margin-top: 16px !important;
}
html body.page-id-318 .portal-login [class*="notice"] *,
html body.page-id-318 .portal-login [class*="info"] *,
html body.page-id-318 .portal-login [class*="demo"] * {
color: #1f2937 !important;
}
/* 5. Input 필드 */
html body.page-id-318 input[type="text"],
html body.page-id-318 input[type="email"],
html body.page-id-318 input[type="password"] {
background: #ffffff !important;
border: 1.5px solid #d1d5db !important;
color: #1f2937 !important;
padding: 12px 14px !important;
border-radius: 8px !important;
}
html body.page-id-318 input[type="text"]:focus,
html body.page-id-318 input[type="email"]:focus,
html body.page-id-318 input[type="password"]:focus {
border-color: #D4A843 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15) !important;
}
/* ===== /Agent 54 ===== */
/* ===== Agent 55: forum-archive article padding 0 + hero full-width (2026-04-21) ===== */
html body.forum-archive article.single-page,
html body.forum-archive article.container.section,
html body.bbpress article.single-page,
html body.bbpress article.container.section,
html body.post-type-archive-forum article.single-page,
html body.post-type-archive-forum article.container.section {
padding: 0 !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
overflow: visible !important;
}
html body.forum-archive .entry-content,
html body.bbpress .entry-content,
html body.post-type-archive-forum .entry-content {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
html body.forum-archive .bbpress-wrapper,
html body.bbpress .bbpress-wrapper,
html body.post-type-archive-forum .bbpress-wrapper {
max-width: none !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hero는 full-width viewport */
html body.forum-archive .page-hero.page-hero-with-bg,
html body.bbpress .page-hero.page-hero-with-bg,
html body.post-type-archive-forum .page-hero.page-hero-with-bg {
width: 100vw !important;
max-width: 100vw !important;
margin-left: 0 !important;
margin-right: 0 !important;
position: relative !important;
left: 0 !important;
}
/* bbPress 내용(검색창, 포럼 테이블, 사이드바)만 중앙 1200으로 */
html body.forum-archive .bbpress-wrapper > *:not(.page-hero),
html body.bbpress .bbpress-wrapper > *:not(.page-hero),
html body.post-type-archive-forum .bbpress-wrapper > *:not(.page-hero) {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
/* ===== /Agent 55 ===== */
/* ===== Agent 56: Forum hero width 100% (parent viewport 기준) (2026-04-21) ===== */
html body.forum-archive .page-hero.page-hero-with-bg,
html body.bbpress .page-hero.page-hero-with-bg,
html body.post-type-archive-forum .page-hero.page-hero-with-bg {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
left: 0 !important;
right: 0 !important;
position: relative !important;
}
/* ===== /Agent 56 ===== */
/* ===== Agent 57: site-main 직접 자식 hero full-width (forum 전용) (2026-04-21) ===== */
html body.forum-archive .site-main > .page-hero.page-hero-with-bg,
html body.bbpress .site-main > .page-hero.page-hero-with-bg,
html body.post-type-archive-forum .site-main > .page-hero.page-hero-with-bg {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
min-height: 440px !important;
}
/* site-main 자체 padding 제거 */
html body.forum-archive .site-main,
html body.bbpress .site-main,
html body.post-type-archive-forum .site-main {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* ===== /Agent 57 ===== */