:root {
--color-text-lv1: rgba(255, 255, 255, 1.0);
--color-text-lv1-hover: rgba(255, 255, 255, 0.7);
--color-text-lv2: rgba(255, 255, 255, 0.9);
--color-text-lv2-hover: rgba(255, 255, 255, 0.6);
--color-text-lv3: rgba(255, 255, 255, 0.7);
--color-text-lv3-hover: rgba(255, 255, 255, 0.4);
  
--color-mistyblue-lv1: rgba(126, 152, 161, 1.0);
--color-mistyblue-lv1-alpha: rgba(126, 152, 161, 0.99);
--color-mistyblue-lv2: rgba(111, 137, 146, 1.0);
--color-mistyblue-lv2-alpha: rgba(111, 137, 146, 0.98);

--border-lv1: 1px solid rgba(255, 255, 255, 0.2);
--border-lv2: 1px solid rgba(255, 255, 255, 0.4);

--size-text-lv1: 24px;
--size-text-lv2: 16px;
--size-text-lv3: 14px;
--size-text-lv4: 12px;
}

* {margin: 0;padding: 0;box-sizing: border-box;}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color:var(--color-mistyblue-lv1);
    color: var(--color-text-lv1);
    line-height: 1.6;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {font-weight: normal;}
a, a:hover {text-decoration:none;}
iframe {border:none;}

/* ================================================
   Common Header
   ================================================ */

header {position: absolute;top: 0;left: 0;right: 0;z-index: 50;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);}
.no-hero-visual header {background: none;}
.header-container {max-width: 1600px;margin: 0 auto;padding: 24px 48px;display:flex;justify-content: space-between;align-items: center;}
.site-title-main {font-size:var(--size-text-lv1);letter-spacing: 0.05em;color: var(--color-text-lv1);transition:color 0.3s;}
.site-title-sub {font-size:13px;letter-spacing: 0.15em;color:var(--color-text-lv3);margin-top: 2px;transition:color 0.3s;}

header nav {display:flex;align-items:center;gap:48px;}
.main-nav {display: flex;gap: 32px;}
.main-nav a {color:var(--color-text-lv1);font-size: var(--size-text-lv3);letter-spacing: 0.2em;transition: color 0.3s;}
.main-nav a:hover {color:var(--color-text-lv1-hover);}
.sub-nav {display: flex;gap: 24px;font-size:var(--size-text-lv4);}
.sub-nav a {color: var(--color-text-lv1);letter-spacing: 0.25em;transition: color 0.3s;display: inline-flex;align-items: center;gap: 4px;}
.sub-nav a:hover {color: var(--color-text-lv1-hover);}
.main-nav a.active {color:var(--color-text-lv1);border-bottom: 1px solid var(--color-text-lv1);}

.mobile-menu-btn {display: block;background:none;border:none;color:var(--color-text-lv1);cursor:pointer;}

@media (min-width: 768px) {
    .mobile-menu-btn {display: none;}
}
@media (max-width: 768px) {
    .header-container {padding: 24px;}
    header nav {display: flex;flex-direction: column;gap: 8px;position:absolute;top: 108px;right: 0;width: 55%;background: var(--color-mistyblue-lv2-alpha);opacity: 0;visibility: hidden;    transition: opacity 0.3s ease, visibility 0.3s ease;}
    header nav.show {opacity: 1.0;visibility: visible;}
    .main-nav {flex-direction:column;gap:0px;width:100%;}
    .main-nav a {padding-left:24px;line-height:4em;}
    .main-nav a.active {border-bottom:none;}
    .sub-nav {flex-direction:column;gap:0px;width:100%;}
    .sub-nav a {padding-left:24px;line-height:4em;}
}

/* ================================================
   Common Hero Header Styles
   ================================================ */
.page-hero {position: relative;height:65vh;overflow: hidden;}
.page-hero img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.no-hero-visual main {padding-top: 72px;}

@media (max-width: 768px) {
    .page-hero {height:50vh;}
}

/* ================================================
   Common Container Styles
   ================================================ */
.container-common {max-width: 720px;margin: 0 auto;}
.container-wide {max-width: 1000px;margin: 0 auto;}


/* ================================================
   Common Page Title Styles
   ================================================ */
.page-title {font-size: var(--size-text-lv1);letter-spacing: 0.2em;text-align: center;padding-top: 72px;margin-bottom: 72px;}


/* ================================================
   Universal Gigs Components Styles
   ================================================ */
.gig-list {display: flex;flex-direction: column;gap:24px;}
.gig-item {border-bottom: var(--border-lv1);padding-bottom:24px;}
.gig-main {display:flex;align-items:flex-start;gap:36px;}
.gig-date {white-space:nowrap;width:108px;font-size: var(--size-text-lv2);letter-spacing: 0.05em;}
.gig-date span {margin-left:0.5em;}
.gig-venue {color: var(--color-text-lv2);width:264px;font-size: var(--size-text-lv2);}
.gig-venue a {color: var(--color-text-lv2);display: inline;}
.gig-venue a:hover {color: var(--color-text-lv2-hover);}
.gig-venue svg {display: inline;vertical-align: baseline;margin-left: 4px;}
.gig-title {flex:1;font-size: var(--size-text-lv2);letter-spacing:0.1em;}
.gig-members {margin:0;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1em;flex:1;}

@media (max-width: 768px) {

}


/* ================================================
   Universal Button Styles
   ================================================ */
/* button-lv1: Text link style */
.button-lv1 {color: var(--color-text-lv3);font-size: var(--size-text-lv3);text-decoration: none;transition: color 0.3s;}
.button-lv1:hover {color: var(--color-text-lv3-hover);}

/* button-lv2: Border button style  */
.button-lv2 {display: inline-flex;align-items: center;gap: 8px;color: var(--color-text-lv1);font-size: var(--size-text-lv2);letter-spacing: 0.15em;border: var(--border-lv2);padding: 8px 24px;border-radius: 4px;transition: border-color 0.3s;}
.button-lv2:hover {border-color: var(--color-text-lv1-hover);}

/* button-lv3: White border outline button  */
.button-lv3 {
    padding: 12px 32px;
    border: 2px solid white;
    color: white;
    background: none;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.3s;
    text-align: center;
}

.button-lv3:hover {
    background-color: white;
    color: #8fa5ad;
}

/* button-lv4: Primary solid button  */
.button-lv4 {padding: 12px 32px;background-color:var(--color-text-lv2);color:var(--color-mistyblue-lv1);font-size: var(--size-text-lv2);border: none;cursor: pointer;text-decoration: none;letter-spacing: 0.05em;transition: background-color 0.3s;text-align:center;display:inline-block;}
.button-lv4:hover {background-color:var(--color-text-lv1);}

@media (max-width: 768px) {
    .button-lv4 {width:252px;margin:0 auto;}
}



/* ================================================
   Back to Navication Section Styles
   ================================================ */

.back-to-section {position: relative;z-index:20;padding:96px 0;text-align: center;}
.back-to-link {color: var(--color-text-lv3);font-size: var(--size-text-lv2);letter-spacing: 0.1em;transition: color 0.3s;display: inline-flex;align-items: center;gap: 8px;}
.back-to-link:hover {color: var(--color-text-lv3-hover);}


/* ================================================
   Home Page Specific Styles
   ================================================ */

.hero {position: relative;height: 100vh;width: 100%;overflow: hidden;}
.hero-bg {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 1;}
.hero-bg img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.page-hero + .page-title {
    position: relative;
    z-index: 20;
    margin-top: 72px;
    margin-bottom: 72px;
    padding: 0;
}

.content-section {
    position: relative;
    z-index: 20;
    background-color: rgba(126, 152, 161, 0.98);
    padding: 96px 48px;
}

.section-container {
    max-width: 840px;
    margin: 0 auto;
}

.upcoming-gigs-container {
    max-width: 1000px;
}

.section-title {font-size:var(--size-text-lv1);letter-spacing:0.1em;margin-bottom: 48px;text-align:left;}
.home-page .section-title {letter-spacing: 0.1em;text-align:center;}

.details-btn {color: var(--color-text-lv2);background:none;border: none;cursor: pointer;font-size:var(--size-text-lv3);letter-spacing: 0.1em;transition: color 0.3s;display: inline-flex;align-items: center;gap: 6px;}
.details-btn:hover {color: var(--color-text-lv2-hover);}
.chevron {transition: transform 0.3s;display: inline-flex;}
.chevron.rotated {transform: rotate(180deg);}

.gig-details {display:none;margin-top:16px;font-size:var(--size-text-lv3);padding-left: 144px;}
.gig-details.show {display:flex;align-items:flex-start;gap:36px;}
.gig-times {width:264px;flex-shrink: 0;}
.gig-separator {margin: 0 8px;
    color: rgba(255, 255, 255, 0.6);
}

.more-link {text-align:center;margin-top: 32px;}

.release-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 48px;align-items: center;margin-bottom: 64px;}
.album-cover {width: 100%;aspect-ratio: 1;max-width: 600px;margin: 0 auto;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);}
.album-cover img {width: 100%;height: 100%;object-fit: cover;display: block;}
.album-info {display: flex;flex-direction: column;gap: 32px;}
.album-title {font-size:26px;margin-bottom: 8px;letter-spacing:0.1em;}
.album-date {color:var(--color-text-lv3);font-size:var(--size-text-lv3);margin-top: 4px;}
.album-buttons {display:flex;flex-direction:column;gap:12px;width:240px;}

.video-container {
    aspect-ratio: 16 / 9;
    background-color: black;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.video-placeholder svg {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    opacity: 0.7;
}


@media (max-width: 768px) {
    .hero-bg img {object-position:43% 0;}
    .content-section {padding: 64px 24px;}
    .gig-details.show {flex-direction:column;padding-left:0;gap:0;}
    .gig-times {width:100%;}
    .gig-members {width:100%;margin-top:8px;gap:0.5em;}
    .details-btn {margin-top:12px;}
    .gig-main {flex-direction:column;align-items:flex-start;gap:0;}
    .gig-date {width:auto;}
    .gig-venue {width:auto;margin-top:8px;}
    .details-btm {margin-top:12px;}  
    .release-grid {grid-template-columns: 1fr;gap: 32px;}
    .album-buttons {width:100%;}
}

/* ================================================
   Gigs Page Specific Styles
   ================================================ */

.gigs-main-section {position:relative;z-index:20;padding: 0 24px 96px;}
.gigs-tabs {display:flex;justify-content:center;gap:32px;margin-bottom: 64px;border-bottom: var(--border-lv1);}
.gigs-tab {padding-bottom:16px;font-size:var(--size-text-lv1);letter-spacing: 0.1em;background: none;border: none;color:var(--color-text-lv1-hover);cursor: pointer;transition: color 0.3s;border-bottom:2px solid transparent;}
.gigs-tab:hover {color: var(--color-text-lv1);}
.gigs-tab.active {color: var(--color-text-lv1);border-bottom-color: var(--color-text-lv1);}
.gigs-year-tabs {display: flex;gap: 16px;flex-wrap: wrap;margin-bottom: 48px;}
.gigs-year-tab {padding-bottom: 8px;font-size: var(--size-text-lv2);letter-spacing: 0.05em;background: none;border: none;color: var(--color-text-lv1-hover);cursor: pointer;transition: color 0.3s;border-bottom: 1px solid transparent;}
.gigs-year-tab:hover {color: var(--color-text-lv1);}
.gigs-year-tab.active {color: var(--color-text-lv1);border-bottom-color: var(--color-text-lv1);}
.gigs-list {display:flex;flex-direction:column;gap: 24px;}
.gigs-main-section .gig-item {margin-bottom:24px;padding-bottom:48px;}
.gigs-main-section .gig-date {font-size:18px;}
.gigs-main-section .gig-venue {font-size:18px;}
.gigs-main-section .gig-title {font-size:18px;}
.gigs-main-section .gig-member span {color:var(--color-text-lv3);}

@media (max-width: 767px) {
    .gigs-main-section {padding: 0 24px 64px;}
    .gigs-tabs {gap: 24px;margin-bottom: 48px;}
    .gigs-tab {font-size: 20px;}
}


/* ================================================
   Discography Page Specific Styles
   ================================================ */

.discography-section {
    position: relative;
    z-index: 20;
    padding: 0 48px 128px;
    min-height: 100vh;
}

.discography-container {}
.album-grid {display: grid;grid-template-columns: 1fr;gap: 48px;max-width: 800px;margin: 0 auto;}
.album-card {width: 100%;}
.album-link {display: block;}
.album-cover-wrapper {width: 100%;aspect-ratio: 1;margin-bottom: 24px;overflow: hidden;}
.album-cover-img {width: 100%;height: 100%;object-fit: cover;transition: opacity 0.3s ease;}
.album-link:hover .album-cover-img {opacity: 0.7;}
.album-info-wrapper {text-align: center;}

.discography-section .album-title {color: var(--color-text-lv1);font-size: var(--size-text-lv2);letter-spacing: 0.05em;margin-bottom: 8px;transition: color 0.3s ease;}
.album-link:hover .album-title {color: var(--color-text-lv1-hover);}
.album-year {color: var(--color-text-lv3);font-size: var(--size-text-lv3);letter-spacing: 0.05em;transition: color 0.3s ease;}
.album-link:hover .album-year {color: var(--color-text-lv3-hover);}

@media (min-width: 768px) {
    .album-grid {grid-template-columns: repeat(2, 1fr);gap: 64px;}
}
@media (min-width: 768px) {
    .discography-section .album-title {
        font-size: 20px;
    }
}
@media (min-width: 768px) {
    .discography-section {padding: 0 48px 128px;}
}

/* ================================================
   Discography Detail Page Specific Styles
   ================================================ */
.discography-detail-summary {max-width:1000px;margin: 0 auto;padding-top:72px;display:flex;flex-direction:row;gap:72px;align-items:flex-start;}
.discography-detail-cover {width: 440px; flex-shrink: 0;}
.discography-detail-cover img {width: 100%;object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);display:block;}
.discography-actions {margin-top:36px;display:flex;flex-direction:column;gap:24px;align-items:center;}
.discography-detail-details {display: flex; flex-direction: column; gap:24px; width: 460px;}
.discography-detail-details .page-title {margin:0;padding:0; text-align:left; letter-spacing: 0.1em;}
.discography-sub-title {margin-top:2px;font-seize:var(--size-text-lv4);letter-spacing:0.1em;}
.discography-released {margin-top:1em;color:var(--color-text-lv3);}
.personnels li{list-style:none;margin:8px 0;line-height:140%;}
.personnels-instrument{color:var(--color-text-lv3);margin-left:6px;}
.personnel-item-sub {font-size:var(--size-text-lv3);}
.track-list{padding-left:1em;}
.track-list li{margin:2px 0;padding-left:0.5em;}
.track-list + p {margin-top:6px;color:var(--color-text-lv3);}

.discography-detail section + section:not(.back-to-section):not(.newsletter-section) {margin-top:84px;}

.liner-notes-item p {line-height:200%;}
.liner-notes-item p + p {margin-top:1.6em;}
.liner-notes-item header {position:relative;border-bottom:var(--border-lv2);background:none;margin-bottom:1.6em;padding-bottom:1.6em;}
.liner-notes-item footer {color:var(--color-text-lv3);padding:0;background-color:transparent;margin-top:24px;border:none;}

.press-items blockquote {margin-top:36px;padding-left:44px;border-left:4px solid var(--color-text-lv3);display:flex;gap:32px;flex-direction:horizontal;align-items:center;}
.press-item-text{flex:1;}
.press-item-img {flex:0 0 160px;}
.press-item-img img {width:100%;}
.press-title {margin-bottom:1.6em;}
.press-headline {font-size:18px;margin-bottom:0.8em;}
.press-items footer {color:var(--color-text-lv3);padding:0;background-color:transparent;margin-top:12px;border:none;}
.press-items p + p {margin-top:12px;}
.press-items footer + p {margin-top:1.6em;}
.press-items footer a,.press-items footer a:visited {color:var(--color-text-lv3);}

.credits-items {display:grid;grid-template-columns: 1fr 1fr;gap:24px;}
.credits-item {margin-top:16px;}
.credits-role {font-size:var(--size-text-lv4);color:var(--color-text-lv3);letter-spacing:0.1em;}
.credits-label {margin-top:12px;}
.credits-label img {display:block;}

@media (max-width: 767px) {
.discography-detail-summary {flex-direction:column;padding:72px 24px 0;gap:32px;}
.discography-detail-cover {width:100%; flex-shrink: 0;}
.discography-actions > div{width:100%;}
.discography-detail-details {width:100%;}
.discography-detail section + section:not(.back-to-section):not(.newsletter-section) {padding:0 24px;}
.press-items blockquote {flex-direction:column;padding-left:24px;align-items:normal;}
.press-item-img img {width:144px;}
}

/* ================================================
   Download Page Specific Styles
   ================================================ */
.page-415 h2 {margin:2em 0 1em;}
.page-415 p + p {margin-top:1em;}

/* ================================================
   About Page Specific Styles
   ================================================ */

.about-section {position: relative;z-index: 20;padding: 0 24px 96px;}
.about-section > .container-common > div + div {margin-top:84px;}
.about-section .section-title {letter-spacing:0.1em;}
.about-section p {line-height:2em;}
.about-section p + p {margin-top:2em;}
.about-visual img {display:block;}

.about-history {padding:32px 0 12px;border-bottom:var(--border-lv2);}
.about-history-title {display: flex; align-items: center; justify-content: space-between;}
.about-history-title button {color:var(--color-text-lv3);font-size:var(--size-text-lv3);letter-spacing: 0.1em;background:none; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.3s;}
#historyChevron {display:flex;transition:transform 0.3s; transform: rotate(180deg);}
#historyList {display: block; padding-top:16px;}
.about-history-item {display:flex;gap: 24px; margin-bottom:20px;}
.about-history-year {color: var(--color-text-lv3);width: 80px;flex-shrink: 0;padding-top: 2px;}
.about-history-event {color: var(--color-text-lv2);flex: 1;white-space: pre-line;}

@media (min-width: 768px) {
    .about-section {padding: 0 48px 96px;}
}

@media (max-width: 767px) {
    .about-history-item {flex-direction: column;gap: 6px;}    
    .about-history-year {width: auto;padding-top: 0;}
    .about-history-item {margin-bottom:20px;}
}

/* ================================================
   News Page Specific Styles
   ================================================ */

.news-section {position: relative;z-index: 20;padding: 0 24px 96px;}
.news-list {display: flex;flex-direction: column;gap: 48px;}
.news-item {display: flex;flex-direction: column;gap: 32px;transition: opacity 0.3s ease;align-items: center;}
.news-item-image {width: 100%;aspect-ratio: 4 / 3;overflow: hidden;flex-shrink: 0;}
.news-item-image img {width: 100%;height: 100%;object-fit: cover;transition: opacity 0.3s ease;}
.news-item:hover .news-item-image img {opacity: 0.7;}
.news-item-content {flex: 1;display: flex;flex-direction:column;justify-content: flex-start;}
.news-item-title {color: var(--color-text-lv1);font-size:var(--size-text-lv1);line-height:1.4;margin-bottom: 12px;transition: color 0.3s ease;}
.news-item:hover .news-item-title {color: var(--color-text-lv1-hover)}
.news-item-date {color: var(--color-text-lv3);font-size: var(--size-text-lv3);margin-bottom: 12px;transition:color 0.3s ease;}
.news-item:hover .news-item-date {color: var(--color-text-lv3-hover);}
.news-item-excerpt {color: var(--color-text-lv2);font-size: var(--size-text-lv3);line-height: 1.6;transition:color 0.3s ease;}
.news-item:hover .news-item-excerpt {color: var(--color-text-lv2-hover);}

@media (min-width: 768px) {
    .news-section {padding: 0 48px 96px;}
    .news-item {flex-direction: row;align-items: center;}
    .news-item-image {width: 280px;}
}


.nav-links {display:flex;align-items:center;justify-content:center;gap:16px;margin-top:96px;}
.nav-links a, .nav-links span {font-size:var(--size-text-lv2);padding: 4px 12px;transition:color 0.3s ease;}
a.page-numbers {color: var(--color-text-lv1);}
a.page-numbers:hover {color:var(--color-text-lv1-hover);}
.page-numbers.current {cursor:default;color:var(--color-text-lv1-hover);}
.next.page-numbers, .prev.page-numbers {display:inline-flex;align-items:center;gap:6px;}
.page-numbers svg {fill:var(--color-text-lv1);}

/* ================================================
   News Detail Page Styles
   ================================================ */

.news-detail-section {position: relative;z-index: 20;padding: 0 24px 0;}
.news-detail-section .page-title {text-align: left;letter-spacing: 0.05em;margin-bottom: 12px;}
.news-detail-title {
    color: white;
    font-size: 28px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin-bottom: 12px;
    font-weight: normal;
}
.news-detail-date {color:var(--color-text-lv3);font-size:var(--size-text-lv3);margin-bottom: 48px;}
.news-detail-image {width:100%;}
.news-detail-image img {width:100%;display:block;height:auto;}
.news-detail-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.6;
    margin-top:48px;
}
.news-detail-content p + p {margin-top: 24px;}
.news-detail-content a,.news-detail-content a:visited {font-weight:normal;color:var(--color-text-lv3);}
.news-detail-content em {font-weight:bold;font-style:normal;}

@media (min-width: 768px) {
    .news-detail-section {padding: 0 48px 0;}
}


/* ================================================
   Comment Section
   ================================================ */
.news-comments-section {padding-top: 64px;margin-top: 64px;border-top: var(--border-lv1);}
.news-comments-title {letter-spacing: 0.05em;margin-bottom: 32px;}
.news-comment-form {margin-bottom: 48px;}
.news-form-group {margin-bottom: 20px;}
.news-form-label {display: block;color: var(--color-text-lv3);font-size: var(--size-text-lv3);letter-spacing: 0.05em;margin-bottom: 8px;}
.news-form-input {
    width: 100%;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: all 0.3s;
    font-weight: normal;
}

.news-form-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.news-form-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.12);
}

.news-form-textarea {
    width: 100%;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: all 0.3s;
    font-weight: normal;
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.news-form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.news-form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.12);
}

/* Comment List */
.news-comment-list {
    list-style: none;
}

.news-comment-item {
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.news-comment-item-last {
    border-bottom: none;
}

.news-comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.news-comment-author {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    letter-spacing: 0.03em;
    font-weight: normal;
}

.news-comment-date {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: normal;
}

.news-comment-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    font-weight: normal;
}


/* Comments Section */
.comments-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 0 0 0;
    margin-top: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.comments-title {
    color: white;
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-bottom: 32px;
    font-weight: normal;
}

.comment-form {
    margin-bottom: 48px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    font-weight: normal;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: border-color 0.3s, background-color 0.3s;
    font-weight: normal;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.form-submit {
    padding: 12px 32px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #768E96;
    border: none;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-size: 13px;
    transition: background-color 0.3s;
    font-weight: normal;
}

.form-submit:hover {
    background-color: white;
}

.comment-list {
    list-style: none;
}

.comment-item {
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.comment-author {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    letter-spacing: 0.03em;
    font-weight: normal;
}

.comment-date {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: normal;
}

.comment-body {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    font-weight: normal;
}


/* ================================================
   Contact Page Specific Styles
   ================================================ */

.contact-section {position: relative;z-index: 20;padding: 0 24px 96px;}
.contact-email {text-align: center;margin-bottom: 96px;}
.contact-label {color:var(--color-text-lv3);font-size:var(--size-text-lv3);letter-spacing: 0.05em;margin-bottom: 32px;}
.contact-email-link {color:var(--color-text-lv1);font-size:var(--size-text-lv2);letter-spacing: 0.05em;line-height:1em;}
.contact-social {text-align: center;}
.contact-social-icons {display: flex;align-items: center;justify-content: center;gap: 32px;}
.contact-social-icons a {color: var(--color-text-lv2);transition: color 0.3s ease;}
.contact-social-icons a:hover {color: var(--color-text-lv2-hover);}
.contact-social-icons svg {width: 32px;height: 32px;}

@media (min-width: 768px) {
    .contact-section {padding: 0 48px 128px;}
}


/* ================================================
   Page with Hero Visual - Common Layout Structure
   ================================================ */

/* Main content section that follows page-hero */
.page-content-section {
    position: relative;
    z-index: 20;
    background-color: #7E98A1;
    padding-top: 72px;
    padding-bottom: 64px;
}

@media (min-width: 768px) {
    .page-content-section {
        padding-bottom: 80px;
    }
}

.page-content-container {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 768px) {
    .page-content-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* Wide container variant (e.g., for Gigs page) */
.page-content-container-wide {
    max-width: 1040px;
}

/* ================================================
   Lesson Page Specific Styles
   ================================================ */

.lesson-section {padding: 0 24px 96px;}
.lesson-section h2 {font-size:var(--size-text-lv2);margin-top:2em;}
.lesson-section ul {padding-left:2em;margin-top:1em;line-height:200%;list-style-type:"-   ";}
.about-inquiry {text-align:center;border-top:var(--border-lv1);margin-top:3em;padding-top:3em;}
.about-inquiry p {margin-bottom:2em;}
.lesson-visual {margin-top:96px;}
.lesson-visual img {display:block;}

@media (min-width: 769px) {
    .lesson-visual {display:flex;flex-direction:row;gap:24px;}
    .lesson-visual img {flex:1;min-width:0;height:auto;}
}
@media (max-width: 768px) {
    .lesson-visual img {width:100%;}
    .lesson-visual img + img {margin-top:24px;}
}


/* ================================================
   Common News Letter Section Styles
   ================================================ */

.newsletter-section {position: relative;z-index: 20;background-color: var(--color-mistyblue-lv2-alpha);padding: 64px 48px;text-align: center;}
.newsletter-container {max-width: 800px;margin: 0 auto;}
.newsletter-title {color: var(--color-text-lv2);
    font-size: 20px;
    letter-spacing: 0.05em;margin-bottom: 16px;}
.newsletter-desc {color: var(--color-text-lv3);margin-bottom: 4px;}
.newsletter-note {color: var(--color-text-lv3);font-size: var(--size-text-lv3);margin-bottom: 32px;}
.newsletter-form {display: flex;gap: 12px;max-width: 500px;margin: 0 auto 16px;}
.newsletter-form input {
    flex: 1;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    transition: border-color 0.3s;
}
.newsletter-form input::placeholder {color:var(--color-text-lv3);}
.newsletter-form input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .newsletter-section {padding: 48px 24px;}
    .newsletter-form {flex-direction: column;}
}

/* ================================================
   Common Footer Styles
   ================================================ */

footer {position: relative;z-index: 20;background-color:var(--color-mistyblue-lv2-alpha);padding: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-container {max-width: 1200px;margin: 0 auto;}
.footer-nav {margin-bottom: 32px;}
.footer-nav ul {display:flex;justify-content: flex-start;flex-wrap: wrap;gap:32px;list-style: none;}
.footer-nav a {color: var(--color-text-lv3);font-size: var(--size-text-lv3);letter-spacing:0.2em;transition:color 0.3s;display:inline-flex;align-items:center;gap:4px;}
.footer-nav a:hover {color: var(--color-text-lv3-hover);}
.footer-bottom {display: flex;justify-content: space-between;align-items: center;}
.copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--size-text-lv3);letter-spacing: 0.05em;
}
.social-links {display:flex;gap:24px;}
.social-links a {color: var(--color-text-lv3);transition:color 0.3s;}
.social-links a:hover {color: var(--color-text-lv3-hover);}
.social-links svg {width: 28px;height: 28px;}

@media (max-width: 768px) {
    footer {padding: 48px 24px;}
    .footer-nav ul {display:flex;flex-direction:column;gap:24px;} 
    .footer-bottom {flex-direction: column;gap: 24px;}
    .footer-bottom .copyright {order:2;}
    .footer-bottom .social-links{order:1}
}