/* =========================================================
   Responsive Overrides
   PC 디자인(1181px 이상)은 변경하지 않는다.
========================================================= */

/* =========================================================
   <= 1180px : compact desktop / landscape tablet
========================================================= */

/* =========================================================
   Unified Checkbox
   Contact Us 체크박스와 동일한 15px 사각형 + cyan check
   responsive.css가 마지막에 로드되므로 각 페이지의 accent-color 규칙보다 우선한다.
========================================================= */

.remember input[type="checkbox"],
.member-form input[type="checkbox"],
.account-content input[type="checkbox"],
.cart-order-check input[type="checkbox"],
.cart-table input[type="checkbox"],
.checkout-main input[type="checkbox"],
.order-check input[type="checkbox"],
.commerce-inline input[type="checkbox"],
.community-form input[type="checkbox"],
.address-dialog input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;

	width: 15px;
	height: 15px;
	min-width: 15px;
	min-height: 15px;
	flex: 0 0 15px;
	margin: 0;

	border: 1px solid #9ca3a8;
	border-radius: 0;

	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;

	vertical-align: middle;
	cursor: pointer;
}

.remember input[type="checkbox"]:checked,
.member-form input[type="checkbox"]:checked,
.account-content input[type="checkbox"]:checked,
.cart-order-check input[type="checkbox"]:checked,
.cart-table input[type="checkbox"]:checked,
.checkout-main input[type="checkbox"]:checked,
.order-check input[type="checkbox"]:checked,
.commerce-inline input[type="checkbox"]:checked,
.community-form input[type="checkbox"]:checked,
.address-dialog input[type="checkbox"]:checked {
	border-color: var(--cyan);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8.2 2.8' fill='none' stroke='%23009BB5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.remember input[type="checkbox"]:focus-visible,
.member-form input[type="checkbox"]:focus-visible,
.account-content input[type="checkbox"]:focus-visible,
.cart-order-check input[type="checkbox"]:focus-visible,
.cart-table input[type="checkbox"]:focus-visible,
.checkout-main input[type="checkbox"]:focus-visible,
.order-check input[type="checkbox"]:focus-visible,
.commerce-inline input[type="checkbox"]:focus-visible,
.community-form input[type="checkbox"]:focus-visible,
.address-dialog input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}

.remember input[type="checkbox"]:disabled,
.member-form input[type="checkbox"]:disabled,
.account-content input[type="checkbox"]:disabled,
.cart-order-check input[type="checkbox"]:disabled,
.cart-table input[type="checkbox"]:disabled,
.checkout-main input[type="checkbox"]:disabled,
.order-check input[type="checkbox"]:disabled,
.commerce-inline input[type="checkbox"]:disabled,
.community-form input[type="checkbox"]:disabled,
.address-dialog input[type="checkbox"]:disabled {
	opacity: .45;
	cursor: not-allowed;
}

@media (max-width: 1180px) {
	body {
		min-width: 0;
	}

	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 48px);
		max-width: none;
		min-width: 0;
	}

	/* Header */
	.header-inner {
		width: calc(100% - 48px);
		max-width: none;
		gap: 18px;
	}

	.header-solid .menu-button {
		display: grid;
	}

	.primary-nav,
	.header-search,
	.header-tools .language-switcher,
	.tool-divider {
		display: none;
	}

	.header-logo,
	.header-logo img {
		width: 150px;
	}

	.header-tools {
		gap: 14px;
	}

	.menu-panel {
		width: min(500px, 100%);
	}

	/* Footer */
	.site-footer {
		height: auto;
	}

	.footer-inner {
		width: calc(100% - 48px);
		max-width: none;
		height: auto;
		min-height: 470px;
		padding: 72px 0 48px;
	}

	.footer-brand > a img {
		width: min(100%, 340px);
		height: auto;
	}

	.company-info {
		margin-top: 42px;
	}

	.footer-nav {
		right: 0;
		top: 72px;
	}

	.to-top,
	.copyright {
		right: 0;
	}

	/* Common */
	.notice-article {
		width: calc(100% - 48px);
	}

	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 42px 18px;
	}

	.product-card .product-image {
		height: auto;
		aspect-ratio: 1 / 1.08;
	}

	/* Products */
	.page-products .catalog {
		min-height: 0;
	}

	.catalog-head {
		gap: 32px;
	}

	.catalog-filters,
	.sort-links {
		flex-wrap: wrap;
	}

	/* Product detail */
	.product-top {
		grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
		gap: 48px;
	}

	.gallery-main {
		height: auto;
		aspect-ratio: 1 / 1.08;
	}

	.product-summary {
		padding-top: 30px;
	}

	.story-row,
	.story-row.reverse {
		gap: 40px;
	}

	/* About */
	.about-split,
	.about-split.reverse {
		grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
		gap: 50px;
	}

	.about-split img {
		height: 580px;
	}

	.about-split.reverse img {
		height: 450px;
	}
}


/* =========================================================
   <= 960px : tablet
========================================================= */

@media (max-width: 960px) {
	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 40px);
	}

	/* Notice bar / Header */
	.notice-bar {
		height: auto;
		min-height: 44px;
		padding: 8px 44px 8px 16px;
		font-size: 12px;
		line-height: 1.35;
		text-align: center;
	}

	.site-header {
		height: 76px;
	}

	.header-inner {
		width: calc(100% - 40px);
	}

	.header-logo,
	.header-logo img {
		width: 140px;
	}

	/* Sub hero */
	.sub-hero {
		height: 400px;
	}

	.sub-hero-content {
		padding-top: 64px;
	}

	.breadcrumbs {
		flex-wrap: wrap;
		margin-bottom: 28px;
	}

	.sub-hero h1 {
		font-size: 46px;
		line-height: 1.12;
	}

	.section-title,
	.page-title {
		font-size: 40px;
	}

	.content-section,
	.support-content,
	.notice-content,
	.notice-view,
	.about-content {
		min-height: 0;
		padding-top: 90px;
	}

	/* Footer */
	.footer-inner {
		min-height: 430px;
	}

	/* Home */
	.home-section {
		padding: 90px 0;
	}

	.home-section .section-title {
		margin-bottom: 46px;
	}

	.page-home .best-section,
	.page-home .specialty {
		min-height: 0;
	}

	.page-home .best-products .product-card {
		flex-basis: calc((100% - 20px) / 2);
	}

	.specialty-grid {
		gap: 18px;
		margin-top: 42px;
	}

	/* Global: desktop absolute cards MUST become normal flow here */
	.global {
		padding: 90px 0;
	}

	.global-layout {
		display: block;
	}

	.global-stats {
		position: static;
		z-index: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		width: 100%;
		margin-bottom: 36px;
	}

	.stat {
		min-width: 0;
		padding: 24px 28px;
	}

	.stat strong {
		font-size: 46px;
	}

	.world-map {
		min-height: 0;
		overflow: hidden;
	}

	.world-map-stage {
		width: 100%;
		aspect-ratio: 1476 / 735;
	}

	.news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.news-head {
		gap: 32px;
	}

	/* Products */
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 16px;
	}

	.catalog-head {
		display: block;
		margin: 34px 0 38px;
	}

	.catalog-filters {
		margin-top: 20px;
	}

	.sort-links {
		justify-content: flex-start;
		margin-top: 24px;
	}

	/* Product detail */
	.product-detail-main {
		padding: 64px 0 110px;
	}

	.product-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.gallery-main {
		max-height: 720px;
		aspect-ratio: 1 / 1;
	}

	.product-summary {
		padding-top: 0;
	}

	.story-row,
	.story-row.reverse {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		margin: 45px 0;
	}

	.story-row.reverse > img {
		order: 1;
	}

	.story-row.reverse > div {
		order: 2;
	}

	.story-row img {
		height: auto;
		max-height: 560px;
	}

	.related .product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.guide-row {
		grid-template-columns: 180px minmax(0, 1fr);
	}

	.purchase-guide .guide-copy {
		padding: 28px;
	}

	/* Support */
	.support-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 50px;
	}

	.list-toolbar {
		margin-top: 55px;
	}

	.notice-row {
		height: auto;
		min-height: 86px;
		gap: 12px;
		padding: 16px 0;
	}

	.notice-view h2 {
		font-size: 34px;
		line-height: 1.35;
	}

	.notice-article {
		width: calc(100% - 40px);
	}

	.notice-article img {
		height: auto;
		max-height: 500px;
	}

	/* About */
	.about-split,
	.about-split.reverse {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.about-split img,
	.about-split.reverse img {
		height: auto;
		max-height: 680px;
	}

	.about-split.reverse .about-copy {
		order: 2;
	}

	.about-split.reverse img {
		order: 1;
	}

	.about-feature {
		height: 480px;
	}

	/* Login / Recovery */
	.login-main,
	.recovery-main,
	.member-main,
	.account-main {
		min-height: 60vh;
		padding-top: 64px;
		padding-bottom: 90px;
	}

	.login-box,
	.recovery-box {
		width: min(600px, 100%);
	}

	.member-form,
	.member-form > * {
		max-width: 100%;
	}

	/* Checkout */
	.checkout-block .form-row {
		grid-template-columns: 190px minmax(0, 1fr);
	}
}


/* =========================================================
   <= 700px : mobile
========================================================= */

@media (max-width: 700px) {
	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 32px);
		max-width: none;
		min-width: 0;
	}

	/* Header */
	.notice-bar {
		min-height: 42px;
		padding: 7px 38px 7px 12px;
		font-size: 11px;
	}

	.site-header {
		height: 68px;
	}

	.header-inner {
		width: calc(100% - 32px);
		gap: 12px;
	}

	.header-logo,
	.header-logo img {
		width: 126px;
	}

	.header-tools {
		gap: 10px;
	}

	.header-tools img {
		width: 20px;
		height: 20px;
	}

	.menu-panel {
		padding: 34px 28px 48px;
	}

	.menu-close {
		top: 30px;
		left: 28px;
	}

	.menu-main {
		margin-top: 74px;
		gap: 28px;
	}

	/* Sub hero */
	.sub-hero {
		height: 350px;
	}

	.sub-hero-content {
		padding-top: 54px;
	}

	.breadcrumbs {
		margin-bottom: 22px;
		font-size: 12px;
	}

	.sub-hero h1 {
		font-size: 36px;
		overflow-wrap: anywhere;
	}

	.section-title,
	.page-title {
		font-size: 32px;
	}

	.content-section,
	.support-content,
	.page-faq .support-content,
	.page-downloads .support-content,
	.page-contact .support-content,
	.notice-content,
	.notice-view,
	.about-content {
		min-height: 0;
		padding-top: 64px;
		padding-bottom: 80px;
	}

	/* Footer */
	.site-footer {
		height: auto;
	}

	.footer-inner {
		width: calc(100% - 32px);
		min-height: 0;
		padding: 44px 0;
	}

	.footer-brand > a img {
		width: min(100%, 260px);
	}

	.company-info {
		margin-top: 28px;
		font-size: 13px;
	}

	.company-info div {
		display: block;
	}

	.company-info dt {
		width: auto;
		margin-bottom: 4px;
	}

	.company-info dd {
		overflow-wrap: anywhere;
	}

	.footer-nav,
	.to-top,
	.copyright {
		position: static;
	}

	.footer-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 20px;
		margin-top: 28px;
		text-align: left;
	}

	.to-top {
		align-items: flex-start;
		margin-top: 28px;
	}

	.copyright {
		margin-top: 28px;
		line-height: 1.6;
	}

	/* Common form / list */
	.list-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		margin: 42px 0 26px;
	}

	.search-line {
		width: 100%;
	}

	.form-row {
		display: block;
		margin: 12px 0;
	}

	.field,
	.textarea,
	select {
		min-width: 0;
		max-width: 100%;
	}

	/* Home hero */
	.home-hero {
		height: 680px;
		min-height: 0;
	}

	.home-hero .home-hero-copy {
		width: calc(100% - 32px);
		max-width: calc(100% - 32px);
		margin: 0 16px;
		padding-top: 250px;
	}

	.home-hero h1 {
		font-size: 32px;
		line-height: 1.28;
		word-break: keep-all;
	}

	.home-hero p {
		margin-top: 18px;
		font-size: 14px;
		line-height: 1.6;
	}

	.hero-controls {
		bottom: 78px;
	}

	.scroll-down {
		bottom: 26px;
		white-space: nowrap;
	}

	/* Home sections */
	.home-section {
		padding: 64px 0;
	}

	.home-section .section-title {
		margin-bottom: 32px;
	}

	.page-home .best-products .product-card {
		flex-basis: 78%;
	}

	.best-head,
	.news-head {
		display: block;
	}

	.best-head .tabs {
		margin: 20px 0 0;
		flex-wrap: wrap;
		gap: 10px;
	}

	.best-head .chip {
		height: 46px;
		font-size: 15px;
	}

	.specialty-grid,
	.news-grid,
	.support-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.specialty-card {
		padding: 16px;
	}

	.specialty-card img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.specialty-card .btn {
		float: none;
		margin-top: 16px;
	}

	/* Global mobile - no absolute positioning, no overlap */
	.global {
		padding: 64px 0;
	}

	.global .eyebrow {
		font-size: 18px;
	}

	.global h2 {
		margin: 10px 0 30px;
		font-size: 28px;
		line-height: 1.4;
	}

	.global-layout {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.global-stats {
		position: static;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		width: 100%;
		margin: 0;
	}

	.stat {
		width: 100%;
		padding: 22px 24px;
		border-radius: 18px;
		backdrop-filter: none;
		background: rgba(255, 255, 255, .94);
	}

	.stat p {
		font-size: 15px;
	}

	.stat strong {
		margin-top: 8px;
		font-size: 42px;
	}

	.world-map {
		order: 2;
		width: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.world-map-stage {
		width: 100%;
		min-width: 0;
		aspect-ratio: 1476 / 735;
	}

	.saeyang-map-label {
		height: 42px;
		padding: 0 12px;
		font-size: 13px;
	}

	.world-marker {
		transform: translate(-50%, -100%) scale(.78);
		transform-origin: center bottom;
	}

	.news {
		padding: 64px 0 80px;
	}

	.news-head {
		margin-bottom: 34px;
	}

	.news-head p {
		max-width: none;
		margin-top: 16px;
		font-size: 15px;
		line-height: 1.7;
		text-align: left;
	}

	.news-card img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.support-card {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 14px;
		padding: 22px 18px;
	}

	.support-card img {
		width: 42px;
		height: 42px;
	}

	.home-cta {
		height: auto;
		min-height: 460px;
		padding: 0;
	}

	.home-cta .container {
		display: block;
		height: auto;
		padding: 64px 0;
	}

	.home-cta h2 {
		font-size: 30px;
	}

	.cta-buttons {
		margin-top: 30px;
	}

	/* Product list */
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 10px;
	}

	.product-card {
		min-width: 0;
	}

	.product-card .product-image {
		height: auto;
		aspect-ratio: 1;
	}

	.product-card h3 {
		font-size: 16px;
	}

	.product-meta,
	.product-price {
		font-size: 13px;
	}

	.cart-square {
		right: 8px;
		bottom: 8px;
		width: 40px;
		height: 40px;
	}

	.page-products .catalog {
		min-height: 0;
		padding: 64px 0 90px;
	}

	.page-products .catalog > .container > h2 {
		width: auto;
		min-height: 0;
		font-size: 36px;
	}

	.catalog-head {
		max-width: 100%;
		margin: 22px 0 30px;
	}

	.catalog-filters,
	.sort-links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		max-width: 100%;
	}

	.sort-links a + a::after {
		display: none;
	}

	/* Product detail */
	.product-detail-main {
		padding: 50px 0 80px;
	}

	.gallery-main {
		max-height: none;
		aspect-ratio: 1 / 1;
	}

	.gallery-main img {
		padding: 18px;
	}

	.gallery-thumbs {
		gap: 10px;
	}

	.gallery-thumb {
		flex-basis: 82px;
		width: 82px;
		height: 82px;
	}

	.product-summary h2 {
		font-size: 30px;
	}

	.price-info {
		grid-template-columns: 100px minmax(0, 1fr);
		gap: 12px;
	}

	.buy-actions {
		grid-template-columns: 52px 52px minmax(0, 1fr);
	}

	.icon-action {
		width: 52px;
		height: 52px;
	}

	.story-row img {
		max-height: none;
	}

	.story-row h3 {
		font-size: 22px;
	}

	.story-row p,
	.purchase-guide .guide-copy {
		font-size: 16px;
		line-height: 1.65;
	}

	.specs {
		overflow-x: auto;
		margin: 64px 0;
	}

	.specs table {
		min-width: 640px;
	}

	.related {
		margin: 64px 0;
	}

	.related > h3,
	.purchase-guide > h3 {
		font-size: 22px;
	}

	.related .product-grid {
		gap: 28px 10px;
	}

	.related .product-card h3 {
		font-size: 16px;
	}

	.purchase-guide {
		margin-top: 64px;
	}

	.guide-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.purchase-guide .guide-row h4 {
		place-items: start;
		padding: 16px;
		font-size: 17px;
		text-align: left;
	}

	.purchase-guide .guide-copy {
		padding: 20px 16px;
	}

	/* Support */
	.support-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 36px 0 26px;
	}

	.support-tabs a {
		height: auto;
		min-height: 56px;
		padding: 10px;
		font-size: 14px;
		text-align: center;
	}

	.faq-filters {
		flex-wrap: wrap;
	}

	.faq-list summary {
		height: auto;
		min-height: 74px;
		padding: 16px 10px;
		font-size: 16px;
	}

	.faq-list details[open] > .faq-answer {
		padding: 22px 14px;
		font-size: 15px;
	}

	.download-row {
		height: auto;
		min-height: 82px;
		gap: 10px;
		padding: 14px 0;
		font-size: 15px;
		overflow-wrap: anywhere;
	}

	.download-row time {
		font-size: 12px;
	}

	/* Contact */
	.contact-form {
		margin-top: 36px;
	}

	.contact-form .form-row,
	.attachment-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding: 9px 0;
	}

	.contact-form .form-row > label,
	.attachment-label {
		display: block;
		margin-bottom: 8px;
	}

	.contact-form .text-row label {
		padding-top: 0;
	}

	.contact-form .textarea {
		height: 220px;
	}

	.file-control {
		flex-wrap: wrap;
		gap: 10px;
	}

	.file-name {
		flex: 1 1 150px;
	}

	.attachment-notice {
		margin-left: 0;
	}

	.privacy-box {
		padding: 16px;
		overflow-wrap: anywhere;
	}

	.contact-actions {
		flex-wrap: wrap;
	}

	.contact-actions .btn {
		flex: 1 1 120px;
	}

	/* Notice */
	.notice-row {
		align-items: flex-start;
		flex-wrap: wrap;
		font-size: 16px;
	}

	.notice-row time {
		width: 100%;
		margin-left: 0;
		font-size: 13px;
	}

	.notice-view .view-head {
		padding-bottom: 26px;
	}

	.notice-view h2 {
		font-size: 27px;
	}

	.notice-article {
		width: calc(100% - 32px);
		margin-top: 26px;
		padding-bottom: 36px;
	}

	.notice-article img {
		max-height: none;
		border-radius: 10px;
	}

	.notice-article p {
		padding: 18px 2px;
		font-size: 15px;
		line-height: 1.75;
	}

	.notice-view .btn {
		margin-top: 46px;
	}

	/* About */
	.about-content > .container > h2 {
		margin-bottom: 34px;
		font-size: 32px;
	}

	.about-split,
	.about-split.reverse {
		gap: 24px;
		margin-bottom: 64px;
	}

	.about-split img,
	.about-split.reverse img {
		max-height: 520px;
	}

	.about-copy h3,
	.about-ending h3 {
		font-size: 27px;
	}

	.about-copy p,
	.about-ending p,
	.about-description {
		font-size: 15px;
		line-height: 1.75;
	}

	.about-feature {
		height: 340px;
		margin-top: 24px;
	}

	.about-ending {
		padding: 54px 0 80px;
	}

	/* Login / recovery */
	.login-main,
	.recovery-main {
		min-height: 0;
		padding: 42px 0 72px;
	}

	.login-main .page-title,
	.recovery-main .page-title {
		font-size: 32px;
	}

	.login-box,
	.recovery-box {
		width: 100%;
		margin-top: 32px;
	}

	.login-fields,
	.guest-order-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.login-fields > .btn,
	.guest-order-fields > .btn {
		height: 52px;
	}

	.member-links,
	.recovery-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.social-login {
		width: 100%;
		margin-top: 28px;
	}

	.recovery-tabs a {
		height: 54px;
		font-size: 14px;
	}

	.recovery-description {
		margin: 26px 0 20px;
		text-align: left;
	}

	/* Member / Account */
	.member-main,
	.account-main {
		padding-top: 40px;
		padding-bottom: 64px;
	}

	.member-form,
	.member-form > * {
		width: 100%;
		min-width: 0;
	}

	.policy-copy {
		padding: 16px;
		overflow-wrap: anywhere;
	}

	.member-addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-box {
		padding: 22px 18px;
	}

	.account-benefits {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-benefits > div {
		padding: 12px 0;
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.account-benefits > div:first-child {
		border-top: 0;
	}

	.account-sidebar nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Cart / Checkout */
	.cart-actions,
	.selection-actions,
	.order-actions {
		flex-wrap: wrap;
	}

	.checkout-block .form-row {
		display: block;
	}

	.checkout-block .form-row > label:first-child {
		min-height: 0;
		padding: 13px 12px;
	}

	.checkout-block .form-row > .field,
	.checkout-block .form-row > .field-pair,
	.checkout-block .form-row > strong,
	.checkout-block .form-row > span,
	.checkout-block .form-row > button,
	.checkout-block .form-row > .address-fields,
	.checkout-block .form-row > .use-balance {
		width: 100%;
		margin: 10px 0;
	}

	.field-pair,
	.checkout-block .payment-options,
	.checkout-consent {
		flex-wrap: wrap;
	}

	.use-balance,
	.bank-field {
		grid-template-columns: minmax(0, 1fr);
	}

	.bank-field {
		gap: 8px;
	}

	/* Commerce table cards */
	.commerce-summary,
	.commerce-benefits {
		padding: 16px;
	}

	.commerce-table {
		overflow: visible;
	}

	.commerce-table table,
	.commerce-table tbody,
	.commerce-table tr,
	.commerce-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.commerce-table thead {
		display: none;
	}

	.commerce-table tr {
		margin-bottom: 14px;
		padding: 14px;
		border: 1px solid #ddd;
	}

	.commerce-table td {
		padding: 7px 0;
		border: 0;
	}

	.commerce-table .commerce-inline {
		align-items: center;
	}

	.commerce-table .commerce-inline label,
	.commerce-table .commerce-inline select {
		max-width: 100%;
	}
}


/* =========================================================
   <= 480px : small mobile
========================================================= */

@media (max-width: 480px) {
	.header-logo,
	.header-logo img {
		width: 112px;
	}

	.menu-button {
		width: 22px;
		height: 22px;
	}

	.sub-hero {
		height: 320px;
	}

	.sub-hero h1 {
		font-size: 32px;
	}

	.section-title,
	.page-title {
		font-size: 29px;
	}

	.home-hero {
		height: 620px;
	}

	.home-hero .home-hero-copy {
		padding-top: 220px;
	}

	.home-hero h1 {
		font-size: 28px;
	}

	.product-grid {
		gap: 26px 8px;
	}

	.product-card h3 {
		font-size: 15px;
	}

	.global h2 {
		font-size: 25px;
	}

	.stat {
		padding: 20px;
	}

	.stat strong {
		font-size: 38px;
	}

	.about-feature {
		height: 280px;
	}

	.login-main .page-title,
	.recovery-main .page-title {
		font-size: 29px;
	}

	.login-inputs .field,
	.guest-order-inputs .field,
	.recovery-form .field {
		height: 50px;
	}

	.support-tabs {
		grid-template-columns: minmax(0, 1fr);
	}

	.related .product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-sidebar nav {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}
/* =========================================================
   MOBILE QA PASS 2026-09-22
   - 1181px+ 확정 PC 디자인은 건드리지 않는다.
   - 모바일/태블릿의 글자 크기, 간격, 줄바꿈, 리스트 정렬을 재조정한다.
========================================================= */

@media (max-width: 1024px) {
	/* 공통 너비 */
	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 48px);
		max-width: none;
		min-width: 0;
	}

	.section-title,
	.page-title {
		font-size: clamp(34px, 4.6vw, 40px);
	}

	/* 홈 카드/상품은 태블릿에서 너무 빽빽하지 않게 */
	.product-grid {
		gap: 38px 18px;
	}

	.page-home .best-panel {
		margin-top: 30px;
	}

	/* 서브페이지 공통 */
	.support-content,
	.notice-content,
	.notice-view,
	.about-content,
	.page-products .catalog {
		min-height: 0;
	}
}


/* =========================================================
   MOBILE / PORTRAIT TABLET
========================================================= */
@media (max-width: 767px) {
	body {
		min-width: 0;
		overflow-x: hidden;
		font-size: 15px;
	}

	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 40px);
		max-width: none;
		min-width: 0;
	}

	/* ---------------------------------------------------------
	   Common Typography / Spacing
	--------------------------------------------------------- */
	.section-title {
		font-size: clamp(26px, 7vw, 30px);
		line-height: 1.28;
		letter-spacing: -.02em;
	}

	.page-title {
		font-size: clamp(28px, 7.4vw, 31px);
		line-height: 1.3;
		letter-spacing: -.02em;
	}

	.btn {
		height: 46px;
		padding: 0 17px;
		gap: 8px;
		font-size: 14px;
	}

	.chip {
		height: 40px;
		padding: 0 16px;
		font-size: 13px;
		white-space: nowrap;
	}

	.pagination {
		gap: 10px;
		margin-top: 38px;
		font-size: 13px;
	}

	.pagination a {
		width: 30px;
		height: 30px;
	}

	.content-section,
	.support-content,
	.page-faq .support-content,
	.page-downloads .support-content,
	.page-contact .support-content,
	.notice-content,
	.notice-view,
	.about-content {
		padding-top: 56px;
		padding-bottom: 76px;
	}

	/* ---------------------------------------------------------
	   Header / Sub Hero
	--------------------------------------------------------- */
	.sub-hero {
		height: 300px;
	}

	.sub-hero-content {
		padding-top: 46px;
	}

	.breadcrumbs {
		margin-bottom: 18px;
		font-size: 11px;
	}

	.sub-hero h1 {
		font-size: clamp(30px, 8vw, 35px);
		line-height: 1.15;
	}

	/* ---------------------------------------------------------
	   Home - common sections
	--------------------------------------------------------- */
	.home-section {
		padding: 58px 0;
	}

	.home-section .section-title {
		margin-bottom: 30px;
	}

	/* NEW PRODUCT / 일반 상품 카드 */
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 12px;
	}

	.product-card .product-image {
		aspect-ratio: 1 / 1.08;
	}

	.product-card .product-image > img {
		width: 76%;
		height: 76%;
	}

	.product-card h3 {
		margin-top: 13px;
		font-size: 14px;
		line-height: 1.4;
		word-break: keep-all;
	}

	.product-meta {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.5;
	}

	.product-price {
		margin-top: 7px;
		font-size: 13px;
		line-height: 1.5;
	}

	.cart-square {
		right: 8px;
		bottom: 8px;
		width: 38px;
		height: 38px;
	}

	.cart-square img {
		width: 19px !important;
		height: 19px !important;
	}

	/* BEST SELLER */
	.best-head {
		display: block;
	}

	.best-head .section-title {
		margin-bottom: 0;
	}

	.best-head .tabs {
		margin-top: 24px;
		gap: 8px;
		flex-wrap: wrap;
	}

	.best-head .chip {
		height: 42px;
		padding: 0 14px 0 5px;
		gap: 7px;
		font-size: 13px;
	}

	.best-head .category-image {
		width: 32px;
		height: 32px;
	}

	.page-home .best-panel {
		margin-top: 28px;
	}

	.page-home .best-products {
		gap: 14px;
		padding-bottom: 8px;
	}

	.page-home .best-products .product-card {
		flex: 0 0 min(78%, 280px);
	}

	.best-progress {
		margin-top: 30px;
	}

	/* Specialty */
	.specialty .section-title {
		margin-bottom: 14px;
	}

	.specialty .container > p {
		font-size: 14px;
		line-height: 1.7;
	}

	.specialty-grid {
		margin-top: 34px;
		gap: 18px;
	}

	.specialty-card {
		padding: 18px;
	}

	.specialty-card h3 {
		margin: 18px 0 6px;
		font-size: 18px;
	}

	.specialty-card p {
		font-size: 13px;
		line-height: 1.6;
	}

	/* Global network - 카드가 지도/다음 섹션과 겹치지 않도록 완전 normal flow */
	.global {
		padding: 58px 0;
	}

	.global .eyebrow {
		font-size: 15px;
		line-height: 1.4;
	}

	.global h2 {
		margin: 10px 0 28px;
		font-size: clamp(25px, 6.8vw, 29px);
		line-height: 1.42;
		word-break: keep-all;
	}

	.global-layout {
		display: flex;
		flex-direction: column;
		gap: 26px;
	}

	.global-stats {
		position: static;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		width: 100%;
		margin: 0;
	}

	.stat {
		width: 100%;
		padding: 18px 20px;
		border-radius: 16px;
		backdrop-filter: none;
		background: rgba(255, 255, 255, .96);
	}

	.stat p {
		gap: 8px;
		font-size: 13px;
		line-height: 1.45;
	}

	.stat strong {
		margin-top: 5px;
		font-size: 34px;
		line-height: 1.15;
	}

	.world-map {
		width: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.world-map-stage {
		width: 100%;
		min-width: 0;
		aspect-ratio: 1476 / 735;
	}

	/* News */
	.news {
		padding: 58px 0 72px;
	}

	.news-head {
		display: block;
		margin-bottom: 28px;
	}

	.news-head p {
		margin-top: 13px;
		font-size: 14px;
		line-height: 1.7;
		text-align: left;
	}

	.news-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.news-card h3 {
		font-size: 16px;
		line-height: 1.5;
	}

	.news-card time,
	.news-card p {
		font-size: 13px;
	}

	/* ---------------------------------------------------------
	   Products List
	--------------------------------------------------------- */
	.page-products .catalog {
		min-height: 0;
		padding: 56px 0 78px;
	}

	.page-products .catalog > .container > h2 {
		width: auto;
		min-height: 0;
		font-size: clamp(28px, 7.5vw, 32px);
		line-height: 1.3;
	}

	.catalog-head {
		display: block;
		margin: 26px 0 36px;
	}

	.catalog-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 20px;
	}

	.catalog-filters .chip {
		height: 39px;
		padding: 0 15px;
		font-size: 12.5px;
	}

	.sort-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 7px 12px;
		margin-top: 22px;
		font-size: 12px;
		line-height: 1.6;
	}

	.sort-links a + a::after {
		display: none;
	}

	.page-products .pagination {
		margin-top: 50px;
	}

	/* ---------------------------------------------------------
	   Product Detail
	--------------------------------------------------------- */
	.product-detail-main {
		padding: 48px 0 76px;
	}

	.product-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.gallery-main {
		max-height: none;
		aspect-ratio: 1 / 1;
	}

	.gallery-main img {
		padding: 16px;
	}

	.gallery-thumbs {
		gap: 8px;
		margin-top: 12px;
	}

	.gallery-thumb {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
	}

	.product-summary .chip {
		height: 34px;
		padding: 0 13px;
		font-size: 12px;
	}

	.product-summary h2 {
		margin: 18px 0 8px;
		font-size: clamp(24px, 6.5vw, 28px);
		line-height: 1.35;
	}

	.product-summary > p {
		font-size: 14px;
		line-height: 1.65;
	}

	.price-info {
		grid-template-columns: 86px minmax(0, 1fr);
		gap: 10px;
		margin-top: 24px;
		padding: 18px 0;
		font-size: 14px;
	}

	.product-purchase {
		gap: 12px;
		margin-top: 18px;
	}

	.product-purchase select,
	.product-purchase input {
		min-height: 44px;
	}

	.buy-actions {
		grid-template-columns: 48px 48px minmax(0, 1fr);
		gap: 8px;
		margin-top: 14px;
	}

	.icon-action {
		width: 48px;
		height: 48px;
	}

	.icon-action img {
		width: 21px;
		height: 21px;
	}

	.direct-buy {
		min-height: 48px;
		padding: 0 14px;
		font-size: 14px;
	}

	.product-story {
		margin-top: 58px;
	}

	.story-row,
	.story-row.reverse {
		gap: 20px;
		margin: 38px 0;
	}

	.story-row h3 {
		margin-bottom: 14px;
		font-size: 20px;
	}

	.story-row p,
	.rich-content,
	.purchase-guide .guide-copy {
		font-size: 14px;
		line-height: 1.72;
	}

	.specs {
		margin: 54px 0;
	}

	.specs h3,
	.related > h3,
	.purchase-guide > h3 {
		font-size: 20px;
	}

	.related {
		margin: 54px 0;
	}

	.related .product-grid {
		gap: 28px 12px;
	}

	.related .product-card h3 {
		font-size: 14px;
	}

	.purchase-guide {
		margin-top: 54px;
	}

	.purchase-guide .guide-row h4 {
		padding: 14px 16px;
		font-size: 15px;
	}

	.purchase-guide .guide-copy {
		padding: 18px 16px;
	}

	/* ---------------------------------------------------------
	   FAQ / Support
	--------------------------------------------------------- */
	.support-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		margin: 30px 0 34px;
	}

	.support-tabs a {
		height: auto;
		min-height: 48px;
		padding: 8px 10px;
		font-size: 13px;
		line-height: 1.35;
	}

	.support-tabs a.active {
		border: 1px solid var(--cyan);
		background: #f7fcfd;
	}

	.faq-list summary {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr) 16px;
		align-items: center;
		gap: 10px;
		height: auto;
		min-height: 70px;
		padding: 14px 10px;
		font-size: 14px;
		line-height: 1.45;
	}

	.faq-list summary::after {
		grid-column: 3;
		width: 9px;
		height: 18px;
		margin-left: 0;
		background-size: 9px 18px;
	}

	.faq-label {
		min-width: 58px;
		max-width: 78px;
		padding: 7px 9px;
		font-size: 11px;
		line-height: 1.35;
		text-align: center;
		word-break: keep-all;
	}

	.faq-question {
		min-width: 0;
		font-size: 14px;
		line-height: 1.5;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.faq-list details[open] > .faq-answer {
		padding: 18px 12px;
		font-size: 13px;
		line-height: 1.75;
	}

	/* Downloads */
	.list-toolbar {
		margin: 34px 0 24px;
		gap: 14px;
	}

	.list-toolbar > strong {
		font-size: 14px;
	}

	.search-line {
		width: 100%;
	}

	.search-line input {
		height: 44px;
		font-size: 13px;
	}

	.search-line button {
		width: 44px;
	}

	.download-row {
		min-height: 76px;
		padding: 13px 0;
		font-size: 14px;
		line-height: 1.5;
	}

	.download-row .download-icon {
		width: 34px;
		height: 34px;
		margin-left: 0;
		flex: 0 0 34px;
	}

	.download-row time {
		font-size: 11px;
	}

	/* ---------------------------------------------------------
	   Notice
	--------------------------------------------------------- */
	.notice-content {
		padding-top: 56px;
		padding-bottom: 76px;
	}

	.notice-content .page-title {
		font-size: clamp(28px, 7.4vw, 31px);
	}

	.notice-list {
		margin-top: 0;
	}

	.notice-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 10px;
		height: auto;
		min-height: 0;
		padding: 17px 0;
		font-size: 14px;
		line-height: 1.5;
	}

	.notice-label {
		flex: 0 0 auto;
		margin-right: 0;
		padding: 7px 9px;
		font-size: 11px;
		line-height: 1;
	}

	.notice-title {
		flex: 1 1 190px;
		min-width: 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.5;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.notice-row time {
		flex: 0 0 100%;
		width: 100%;
		margin-left: 0;
		padding-left: 0;
		font-size: 11.5px;
		line-height: 1.4;
	}

	.notice-view .view-head {
		padding-bottom: 22px;
	}

	.notice-view h2 {
		font-size: clamp(24px, 6.6vw, 28px);
		line-height: 1.42;
	}

	.notice-view time {
		margin-top: 14px;
		font-size: 12px;
	}

	.notice-article {
		width: calc(100% - 40px);
		margin-top: 24px;
		padding-bottom: 32px;
	}

	.notice-article p {
		padding: 16px 0;
		font-size: 14px;
		line-height: 1.75;
	}

	.notice-view .btn {
		margin-top: 38px;
	}

	/* ---------------------------------------------------------
	   Contact
	--------------------------------------------------------- */
	.contact-form {
		margin-top: 32px;
	}

	.contact-form .form-row,
	.attachment-row {
		padding: 10px 0;
	}

	.contact-form .form-row > label,
	.attachment-label {
		margin-bottom: 7px;
		font-size: 13px;
	}

	.contact-form .field,
	.contact-form .textarea {
		font-size: 14px;
	}

	.contact-form .textarea {
		height: 200px;
	}

	.file-select,
	.file-add {
		height: 42px;
		font-size: 13px;
	}

	.file-name,
	.attachment-notice,
	.privacy-box,
	.agreement {
		font-size: 12px;
	}

	.privacy-title {
		margin: 24px 0 14px;
		font-size: 13px;
	}

	.contact-actions {
		margin-top: 34px;
	}

	.contact-actions .btn {
		height: 44px;
		font-size: 13px;
	}

	/* ---------------------------------------------------------
	   About
	--------------------------------------------------------- */
	.about-content > .container > h2 {
		margin-bottom: 30px;
		font-size: clamp(28px, 7.5vw, 31px);
	}

	.about-split,
	.about-split.reverse {
		gap: 22px;
		margin-bottom: 54px;
	}

	.about-copy .eyebrow,
	.about-ending .eyebrow {
		margin-bottom: 12px;
		font-size: 13px;
	}

	.about-copy h3,
	.about-ending h3 {
		margin-bottom: 14px;
		font-size: 23px;
		line-height: 1.45;
	}

	.about-copy p,
	.about-ending p,
	.about-description {
		font-size: 14px;
		line-height: 1.75;
	}

	.about-feature {
		height: 300px;
		margin-top: 18px;
	}

	.about-ending {
		padding: 46px 0 72px;
	}

	/* ---------------------------------------------------------
	   Login / Recovery / Member
	--------------------------------------------------------- */
	.login-main,
	.recovery-main,
	.member-main,
	.account-main {
		padding-top: 44px;
		padding-bottom: 70px;
	}

	.login-main .page-title,
	.recovery-main .page-title {
		font-size: 30px;
	}

	.login-box,
	.recovery-box {
		margin-top: 30px;
	}

	.login-box h2 {
		font-size: 14px;
	}

	.login-inputs .field,
	.guest-order-inputs .field,
	.recovery-form .field {
		height: 48px;
		font-size: 13px;
	}

	.login-fields > .btn,
	.guest-order-fields > .btn {
		height: 48px;
		font-size: 13px;
	}

	.member-links {
		gap: 8px;
		margin-top: 20px;
		padding-top: 20px;
	}

	.member-links .btn,
	.recovery-links .btn {
		height: 44px;
		font-size: 12.5px;
	}

	.social-login {
		height: 50px;
		margin-top: 28px;
		font-size: 12.5px;
	}

	/* ---------------------------------------------------------
	   Account center
	--------------------------------------------------------- */
	.account-heading {
		margin-bottom: 28px;
	}

	.account-heading .page-title {
		font-size: 30px;
	}

	.account-heading > p:last-child,
	.account-content-heading p {
		font-size: 13px;
	}

	.account-box {
		padding: 20px 16px;
	}

	.account-profile p {
		font-size: 18px;
	}

	.account-benefits strong {
		font-size: 15px;
	}

	.account-layout {
		gap: 24px;
		margin-top: 26px;
	}

	.account-sidebar nav a {
		min-height: 46px;
		padding: 12px 10px;
		font-size: 12.5px;
	}

	.account-content-heading {
		margin-bottom: 22px;
		padding-bottom: 18px;
	}

	.account-content-heading h2 {
		font-size: 21px;
	}

	.account-shortcut {
		padding: 18px;
	}

	.account-shortcut-title {
		font-size: 15px;
	}

	.account-shortcut p,
	.account-section > p {
		font-size: 12.5px;
	}

	/* ---------------------------------------------------------
	   Cart / Checkout / Commerce
	--------------------------------------------------------- */
	.cart-main,
	.checkout-main,
	.commerce-main {
		padding-top: 48px;
		padding-bottom: 76px;
	}

	.cart-main .page-title,
	.checkout-main .page-title,
	.commerce-main .page-title {
		font-size: 30px;
	}

	.checkout-block {
		margin-top: 36px;
	}

	.checkout-block h2 {
		padding-bottom: 14px;
		font-size: 19px;
	}

	.checkout-block .form-row > label:first-child {
		font-size: 13px;
	}

	.final-total {
		height: auto;
		min-height: 66px;
		margin-top: 38px;
		padding: 14px 18px;
		gap: 16px;
	}

	.final-total strong {
		font-size: 20px;
	}

	.checkout-submit {
		margin-top: 32px;
	}

	.commerce-summary,
	.commerce-benefits,
	.commerce-empty {
		margin: 22px 0;
		padding: 14px;
	}

	/* 테이블형 화면은 모바일에서 읽기 쉬운 카드 형태 유지 */
	.table-basic th,
	.table-basic td {
		font-size: 13px;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 36px);
	}

	.section-title {
		font-size: 27px;
	}

	.page-title {
		font-size: 29px;
	}

	.sub-hero {
		height: 280px;
	}

	.sub-hero h1 {
		font-size: 30px;
	}

	/* 기존 responsive.css의 1열 FAQ 탭을 다시 2열로 고정 */
	.support-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-section {
		padding: 54px 0;
	}

	.home-hero {
		height: 600px;
	}

	.home-hero .home-hero-copy {
		padding-top: 205px;
	}

	.home-hero h1 {
		font-size: 27px;
	}

	.page-home .best-products .product-card {
		flex-basis: 82%;
	}

	.global h2 {
		font-size: 25px;
	}

	.stat strong {
		font-size: 32px;
	}

	.catalog-filters .chip {
		height: 38px;
		padding: 0 13px;
		font-size: 12px;
	}

	.product-grid {
		gap: 30px 10px;
	}

	.product-card h3 {
		font-size: 13.5px;
	}

	.product-summary h2 {
		font-size: 25px;
	}

	.notice-article {
		width: calc(100% - 36px);
	}

	.about-feature {
		height: 260px;
	}

	.account-sidebar nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
	.container,
	.support-narrow,
	.page-account .account-main > .container,
	.page-cart .cart-main > .container,
	.commerce-main .container {
		width: calc(100% - 28px);
	}

	.product-grid {
		gap: 28px 8px;
	}

	.catalog-filters .chip {
		padding: 0 11px;
	}

	.faq-list summary {
		grid-template-columns: max-content minmax(0, 1fr) 14px;
		gap: 8px;
		padding-inline: 8px;
	}

	.faq-label {
		min-width: 54px;
		max-width: 68px;
		padding: 6px 7px;
		font-size: 10.5px;
	}

	.account-sidebar nav {
		grid-template-columns: minmax(0, 1fr);
	}
}