html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #f2f2f7;
}
#mySettingContainer {
background: #f2f2f7;
width: 100%;
max-width: 1026px;
margin: 0 auto;
min-height: 100%;
padding: 0;
border-radius: 0;
box-shadow: none;
}
#mySettingContainer #settingsHeader {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 12px;
padding-top: 12px;
font-size: 17px;
color: #000;
}
#mySettingContainer #blogBackLink {
position: absolute;
left: 15px;
color: #007AFF;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
#mySettingContainer #blogBackLink .backArrow {
font-size: 26px; /* 더 크게 */
position: relative;
top: 1px;
margin-right: 1px;
}
#mySettingContainer #blogBackLink:active {
opacity: 0.5;
}
#mySettingContainer #langToggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#mySettingContainer #langToggle img {
width: 30px;
height: 30px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
#mySettingContainer #langToggle:hover img {
opacity: 1;
}
#mySettingContainer #mapContainer {
height: 500px;
border-radius: 14px;
overflow: hidden;
margin: 0 16px 16px 16px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#mySettingContainer .settingSection {
background: #fff;
margin: 0 16px 16px 16px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#mySettingContainer .settingRow {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
line-height: 36px;
font-size: 14px;
color: #000;
padding: 0 12px;
}
#mySettingContainer .settingRow::after {
content: "";
position: absolute;
bottom: 0;
left: 12px;
right: 0;
height: 1px;
background: #e5e5ea;
}
#mySettingContainer .settingRow:last-child::after {
content: none;
}
#mySettingContainer .settingRow:last-child {
border-bottom: none;
}
#mySettingContainer .settingRow span:last-child {
color: #6e6e73;
}
#mySettingContainer .iosSwitch {
position: relative;
width: 42px;
height: 26px;
line-height: normal;
}
#mySettingContainer .iosSwitch input {
opacity: 0;
width: 0;
height: 0;
}
#mySettingContainer .slider {
position: absolute;
cursor: default;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 20px;
transition: .4s;
}
#mySettingContainer .slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 2px;
bottom: 2px;
background-color: white;
border-radius: 50%;
transition: .4s;
}
#mySettingContainer input:checked + .slider {
background-color: #34c759;
}
#mySettingContainer input:checked + .slider:before {
transform: translateX(16px);
}
#mySettingContainer .settingRow.locateRow {
background: #fff;
transition: background 0.3s ease;
}
#mySettingContainer .settingRow.locateRow:active {
background: #d3d3d3;
}
#mySettingContainer .settingRow.locateRow:hover {
background: #d3d3d3;
}
#mySettingContainer .settingTitle {
padding: 4px 12px 4px 28px;
font-size: 11px;
color: #8e8e93;
}
#ios-pwa-tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #ffffff;
color: #000;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
padding: 10px 30px;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
z-index: 9999;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
width: fit-content;
max-width: calc(100% - 20px);
text-align: center;
}
#ios-pwa-tooltip::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #ffffff;
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
}
#ios-pwa-tooltip .close-btn {
position: absolute;
top: 2px;
right: 7px;
font-size: 14px;
color: #888;
cursor: pointer;
line-height: 1;
}
#ios-pwa-tooltip .close-btn:hover {
color: #333;
}
#ios-pwa-tooltip.visible {
opacity: 1;
visibility: visible;
}
.dth {
border: none;
border-radius: 8px;
padding: 2px 4px;
background: #f2f2f7; /* 기본 연회색 배경 */
color: #007AFF; /* 파란 글자 */
font-size: 14px;
text-align: center;
cursor: pointer;
}
.dth:focus {
outline: none;
background: #e5e5ea; /* 눌렀을 때 조금 진한 회색 */
}
.dth::placeholder {
color: #aaa;
}