# mail_config_test styles
body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 900px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; }
h1 { color: #333; }
.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
.success { background: #d4edda; border-color: #c3e6cb; color: #155724; }
.error { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.warning { background: #fff3cd; border-color: #ffc107; color: #856404; }
.info { background: #d1ecf1; border-color: #bee5eb; color: #0c5460; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; }
td, th { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background: #f0f0f0; font-weight: bold; }
code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: monospace; }
.btn { display: inline-block; padding: 10px 20px; margin: 10px 5px 10px 0; background: #1e90ff; color: #fff; text-decoration: none; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
.btn:hover { background: #1873cc; }
.btn-danger { background: #f44336; }
.btn-danger:hover { background: #da190b; }
# Notice list pagination styles (from notice.php)
.notice-pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:18px}
.notice-pagination a,.notice-pagination span{min-width:34px;height:34px;padding:0 10px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #ddd;background:#fff;color:#333;font-size:13px;font-weight:600}
.notice-pagination .active{background:#1e90ff;color:#fff;border-color:#1e90ff}
.notice-pagination .nav{background:#f7f9fc}
/* site-common: extracted from _top.php and other pages */

/* 햄버거 메뉴 항목 높이 및 간격 최적화 */
.ham_menu .hw_ul li a {
    padding-top: 20px !important;    /* 메뉴 간격 2배 확장 */
    padding-bottom: 20px !important; /* 메뉴 간격 2배 확장 */
    line-height: 1.4 !important;     /* 줄 간격 조정 */
    font-size: 15px !important;      /* 글자 크기 살짝 조정 (필요 시) */
}
/* 서브메뉴(푸꾸옥 안내, 둘러보기 하위 항목) 간격 추가 축소 */
.ham_menu .hw_ul .sub li a {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    font-size: 14px !important;
}

/* Language advanced picker */
.hd-lang .lang-group-basic { display:inline-flex; align-items:center; gap:6px; }
.hd-lang .lang-adv-wrap { display:none; align-items:center; margin-left:6px; }
.hd-lang .lang-adv-wrap.active { display:inline-flex; }
.lang-select-modern {
    min-width: 172px;
    height: 34px;
    padding: 0 34px 0 12px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 999px;
    background: rgba(10,16,30,0.36);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #fff 50%),
        linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.lang-select-modern:focus {
    outline: none;
    border-color: rgba(255,255,255,0.75);
    box-shadow: 0 0 0 3px rgba(112,181,255,0.22);
}
.lang-select-modern option { color:#111; }

/* exchange-box (from index.php) */
.exchange-box{
    padding:12px 14px;
    background:#fff;
    border:1px solid #eee;
    margin:12px 0;
    border-radius:8px;
    font-size:14px;
    display:block;
}
.exchange-box .er-title{ display:block; font-weight:700; margin-bottom:6px; }
.exchange-box .er-mini{ display:block; background:#f3f8ff; padding:8px 12px; border-radius:6px; }
.exchange-box .er-amount{ font-weight:700; color:#1e90ff; font-size:16px; }
.exchange-box .er-updated{ display:block; font-size:12px; color:#777; text-align:right; margin-top:6px; }
@media (max-width:480px){
    .exchange-box{ font-size:13px; padding:10px 12px; }
    .exchange-box .er-amount{ font-size:14px; }
    .exchange-box .er-updated{ font-size:12px; }
}

/* app-top button (from footer.php) */
.app-top-btn {
    position: fixed;
    right: 16px;
    bottom: 22px;
    z-index: 1200;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c4a6e, #3a5f8a);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: transform .2s ease;
}
.app-top-btn i { font-size: 13px; line-height: 1; }
.app-top-btn span { font-size: 9px; font-weight: 700; letter-spacing: .03em; line-height: 1; }
.app-top-btn:active { transform: scale(.96); }
@media (max-width: 480px) {
    .app-top-btn { width: 48px; height: 48px; right: 12px; bottom: 16px; }
}

/* POI list styles (from grandworld_korean.php) */
.poi-item{padding:12px;margin-bottom:10px;border:1px solid #eee;border-radius:8px;background:#fff}
.poi-link{display:block;font-weight:700;color:#1e90ff;text-decoration:none;font-size:15px}
.poi-desc{font-size:14px;color:#444;margin-top:8px;line-height:1.45}
.poi-meta{font-size:12px;color:#888;margin-top:6px}

/* Price page styles (from price.php) */
.price-category{ margin-bottom:18px; }
.price-category h3{ margin:8px 0 10px 0; font-size:18px }
.price-headers{ display:grid; grid-template-columns:90px 80px 1fr; gap:12px; padding:6px 4px; font-weight:700; color:#333; margin-bottom:8px }
.price-headers div{ padding:2px 6px }
.price-list{ display:block }
.price-item{ margin-bottom:12px; background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden }
.menu-block{ background:#f6fbff; padding:12px 14px; font-weight:700; font-size:15px; border-bottom:1px solid #f0f0f0; text-align:center; word-break:break-word; position:relative; }
.meta-row{ display:grid; grid-template-columns:90px 80px 1fr; gap:12px; align-items:center; padding:10px 12px }
.price-cell .vnd{ font-weight:700; color:#1e90ff; }
.price-cell .krw{ color:#666; margin-top:4px; font-size:13px }
.desc{ font-size:13px; color:#666; padding:8px 12px; background:#fff; border-top:1px solid #f6f6f6 }
.item-tag { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:6px; white-space:nowrap; }
.item-tag-N { background:#e6f9f0; color:#007a42; border:1px solid #b2e8cf; }
.item-tag-S { background:#fff8e1; color:#b06000; border:1px solid #ffe082; }
.item-tag-H { background:#ffeaea; color:#c00; border:1px solid #ffb3b3; }
.price-item.tag-N { border-left:3px solid #00c267; }
.price-item.tag-S { border-left:3px solid #f5a623; }
.price-item.tag-H { border-left:3px solid #e63333; }
@media (max-width:640px){ .price-headers, .meta-row{ grid-template-columns: 1fr 1fr 1fr } .menu-block{ font-size:14px } .price-item{ margin-bottom:10px } }

/* Card-style price grid */
.price-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; align-items:start; margin-top:12px; }
.price-card{ background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .12s ease, box-shadow .12s ease; min-height:120px; }
.price-card:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(15,30,60,0.06); }
.card-header{ padding:10px 12px; background:linear-gradient(90deg,#fff,#fbfdff); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-header .item-tag{ margin-left:8px; }
.card-body{ padding:8px 10px; flex:0 1 auto; font-size:13px; color:#444; display:flex; flex-direction:column; justify-content:flex-start; }
.card-meta{ font-size:12px; color:#666; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.card-desc{ margin-top:6px; color:#666; font-size:13px; line-height:1.35; max-height:3.2em; overflow:hidden; }
.card-price{ padding:10px 12px; border-top:1px solid #f6f6f6; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; background:#fff; }
.card-price .vnd{ font-weight:800; color:#1e90ff; }
.card-price .krw{ color:#666; font-size:12px; }
.card-actions{ padding:8px 12px 12px 12px; display:flex; justify-content:flex-end; gap:8px; background:#fff; border-top:1px solid #f6f6f6; }
.card-actions .btn{ padding:7px 10px; font-size:13px; border-radius:8px; }
@media (max-width:640px){ .price-cards{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px } .price-card{ min-height:140px } .card-header{ font-size:14px } .card-price{ font-size:13px } }

/* Vietnamese phrase table styles (from phuquoc_vietnamese.php) */
.phrase-section { margin-bottom: 8px; }
.phrase-section h3 { margin: 6px 0; font-size: 1.05em; font-weight:700; }
.phrase-table { width:100%; border-collapse: collapse; }
.phrase-table td { padding: 6px 8px; vertical-align: top; }
.phrase-table tr + tr td { border-top: 1px solid #f5f5f5; }
.phrase-section h3 + .phrase-table { margin-top: 4px; }
@media (max-width:480px){
    .phrase-section { margin-bottom: 6px; }
    .phrase-section h3 { margin:4px 0; font-size:1em; }
    .phrase-table td { padding:6px 6px; font-size:14px; }
}
@media (min-width:701px){
    .phuquoc-vietnamese .phrase-table{display:table;width:100%}
    .phuquoc-vietnamese .phrase-table tr{display:table-row !important;margin:0 !important;border-bottom:0 !important;padding:0 !important;height:auto !important;min-height:0 !important}
    .phuquoc-vietnamese .phrase-table td{display:table-cell !important;width:auto !important;padding:8px 12px !important;vertical-align:middle !important;height:auto !important;min-height:0 !important}
    .phuquoc-vietnamese .phrase-table td:nth-child(3){text-align:left !important}
}

/* phuquoc_map styles */
@media (max-width:480px){ #map{height:53vh} }
.poi-item{padding:12px;margin-bottom:10px;border:1px solid #eee;border-radius:8px;background:#fff}
.poi-link{display:block;font-weight:700;color:#1e90ff;text-decoration:none;font-size:15px}
.poi-desc{font-size:14px;color:#444;margin-top:8px;line-height:1.45}
.poi-meta{font-size:12px;color:#888;margin-top:6px}
.poi-item.featured{border:2px solid #ffd1c4;background:linear-gradient(180deg,#fffaf8,#fff);}
.poi-item.featured .poi-link{color:#c33}
.promo-banner{display:block}

/* JEE2 pastel Mondrian background (subtle, non-intrusive) */
.jee2-bg {
    position: relative;
    background-color: #faf7f3; /* base very light tone */
}
.jee2-bg::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(235,214,200,0.32) 0 18%, transparent 18% 100%),
        linear-gradient(0deg, rgba(210,230,245,0.26) 0 14%, transparent 14% 100%),
        linear-gradient(90deg, rgba(220,238,210,0.22) 0 36%, transparent 36% 100%),
        linear-gradient(0deg, rgba(245,226,232,0.20) 0 52%, transparent 52% 100%);
    background-size: 220px 220px, 160px 160px, 340px 340px, 520px 520px;
    background-position: left top, right 40px top 80px, left 120px top 240px, right 200px bottom 120px;
    mix-blend-mode: normal;
    opacity: 0.30;
}
.jee2-bg .container, .jee2-bg #all { position: relative; z-index: 1; }

@media (max-width:720px){
    .jee2-bg::before{ opacity: 0.20; background-size: 140px 140px, 120px 120px, 220px 220px, 320px 320px; }
}

@media (max-width:480px){ .promo-banner{padding:8px 0} .promo-banner .promo-cta{width:100%;} }
#event-modal-content h3{margin:0 0 10px 0;color:#204f83}
#event-modal-content h4{margin:14px 0 8px 0;color:#2e5f95}
#event-modal-content ul{margin:0;padding-left:18px}
#event-modal-content li{margin:4px 0;line-height:1.5}