@charset "utf-8";
/* news.css — 기사형(advertorial) 분양 뉴스 페이지 전용 스타일.
   출처: viewissue.kr/max10 의 basic.css + style.css 를 그대로 가져와
   전부 `.news` 스코프로 감쌌다(툴: scope.py). 스코프를 씌운 이유는
   이 페이지 하단의 기존 사이트 푸터(.site-foot)가 style.css 의 규칙을
   그대로 쓰기 때문 — 스코프가 없으면 * / img / footer 리셋이 푸터를 깬다.
   본문 수정은 이 파일이 아니라 index.html 에서 한다. */

.news * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top
}
.news, .news {
    width: 100%;
    margin: 0 auto;
    background: #fff
}
.news {
    font-family: "Noto Sans KR", "맑은고딕", "나눔고딕", '돋움', dotum, helvetica, sans-serif, verdana;
    font-size: 1em;
    color: #333;
    line-height: 1;
    text-align: center;
    *word-break: break-all;
    -ms-word-break: break-all
}
.news ul, .news ol, .news dl {
    list-style: none
}
.news img, .news video {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0
}
.news a, .news a:visited, .news a:link, .news a:link {
    text-decoration: none;
}
.news table {
    border-collapse: collapse;
    border-spacing: 0
}
.news input, .news select {
    vertical-align: middle
}
.news label, .news button {
    cursor: pointer
}
.news i, .news em, .news address {
    font-style: normal;
    font-weight: 400
}
.news button * {
    position: relative
}
.news button img {
    left: -3px;
    *left: auto
}
.news header, .news main, .news section, .news article, .news aside, .news footer {
    display: block
}
.news p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0
}
.news .w95 {
    width: 95% !important
}
.news .w90 {
    width: 90% !important
}
.news .w85 {
    width: 85% !important
}
.news .w80 {
    width: 80% !important
}
.news * {margin:0; padding:0;}
.news, .news {max-width: 100%;overflow-x: hidden;}
.news .nanumgothic * {font-family: 'Nanum Gothic', sans-serif;}
.news .pc {display: block}
.news .mo {display: none}
.news {margin:0; padding:0;letter-spacing:-0.065em; font-family:'Nanum Gothic','Noto Sans KR',HelveticaNeue-Light,AppleSDGothicNeo-Light,'Malgun Gothic','맑은 고딕',sans-serif;height: 100%;font-size: 10px;box-sizing: border-box;letter-spacing:0px;font-weight:400 !important;color: #171717;}
.news a {color:#666;overflow: hidden;word-break: break-all;font-weight: 600;}
.news ul, .news ol, .news dl {list-style:none}
.news .fixbt {position:fixed;bottom:0;z-index:8; right:3}
.news .fixbt img {width:120px;margin:0 auto;float: right; padding:15px;}
.news header .top {height: 50px;line-height: 50px;position: relative;text-align: center;background: #fff}
.news header .top i:first-child {position: absolute;left: 15px;top: 15px;font-size: 24px;color: #999}
.news header .top i:last-child {position: absolute;right: 15px;top: 15px;font-size: 24px;color: #999}
.news header .top span img { width: 100px; max-width: 145px; margin-top: 6px}
.news header nav ul { border-bottom: 1px solid #e0e0e0}
.news header nav ul li { float: left; width: 20%; height: 40px; line-height: 40px; text-align: center}
.news header nav ul li.active { color: #0d6d87; position: relative; font-weight: 500;}
.news header nav ul li.active::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 3px; background: #30d7bf}
.news header nav ul::after { content: ''; display: block; clear: bot}
.news header .toptxt { padding: 30px 20px 20px; text-align: left}
.news header .toptxt h2 {line-height: 1.375; font-size: 37px; letter-spacing: -.05em; font-weight: 500;}
.news header .toptxt h2 u { text-decoration: none; border-bottom: 1px solid #000}
.news header .toptxt p { line-height: 1.5; padding-left: 13px; position: relative; -webkit-margin-after: 0; font-size: 21px; font-weight: 500; color: #454545;}
.news header .toptxt p::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; height: 100%; background: #aeaeae}
.news header .toptxt .top_btn::after { content: ''; display: block; clear: both}
.news header .toptxt .top_btn { height: 25px; line-height: 25px; border-bottom: 1px solid #e0e0e0; padding: 20px 0}
.news header .toptxt .top_btn .time { float: left; font-size: 13px; color: #aaa}
.news header .toptxt .top_btn ul { float: right}
.news header .toptxt .top_btn ul li { float: left; font-size: 12px; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #e0e0e0; margin-left: 5px; color: #888}
.news header .toptxt .top_btn ul li i {font-size: 14px;margin-top: 7px}
.news header .toptxt .top_btn ul li i.xi-star { color: #f2b600}
.news header .toptxt .submenu { margin-bottom: 20px; margin-top: 30px}
.news header .toptxt .submenu li { display: inline-block; font-size: 13px; padding-right: 8px; position: relative; color: #666;    font-family: xeicon !important;}
.news header .toptxt .submenu li a { display: inline-block}
.news header .toptxt .submenu li i.xi-angle-right-thin { color: #cacaca}
.news i::before {
    font-family: xeicon !important;
}
.news #wrap {width: 100%;max-width: 680px;margin: 0 auto;padding: 0px;text-align: left;}
.news #wrap h2 {font-weight: 700;font-size: 30px;padding: 20px 0px	line-height: 1.3;color: #1d1d1d;}
.news .text_wrap h4 {font-weight: 600;line-height: 1.6;color: red; position: relative;border-bottom: 0px solid#7e7e7e;font-size: 23px;margin: 7px 0px 0px 0px;}
.news hr {margin-top: 20px;margin-bottom: 20px;}
.news mark {font-weight: 600;background: linear-gradient(to top, #fcffce 60%, transparent 50%);}
.news .atc {
	padding: 0 0px;
}
.news .atc img {
	padding-top: 0px;
}
.news .img_wrap {width: 100%;border: 0px solid#eee;margin: auto;padding-top: %; text-align: center;}
.news .txt {padding-bottom: 0%;}
.news .txt1 { font-size: 22px;padding-bottom: 4%;}
.news .txt span {color: red;font-weight: 500;}
.news .txt .span1 {font-size: 20px;color: red;font-weight: 600;}
.news u {text-decoration: underline;text-underline-position: under;font-weight: 600;color: #000;}
.news .txt .b {font-size:30px;color: #000;}
.news .txt .v {font-size: 22px;color: #db0000;font-weight: bold;border-bottom: 2px solid #db0000;}
.news .img_wrap > img {width: 100%;margin: 0 auto;display: block;}
.news .text_wrap {overflow: hidden; font-size: 21px; line-height: 1.7; letter-spacing: -0.3px; padding: 10px;}
.news .text_wrap .p {margin: 10px 0 10px 0;text-align: justify;}
.news .text_wrap b {font-weight: 600;color: #1d1d1d;}
.news .text_wrap strong {font-weight: 500;color: #ff0400;}
.news .text_wrap h1 {font-size: 25px;padding-top: 3%;}
.news .info_line {overflow: hidden;margin-bottom: 20px;}
.news .info_line > div {float: left;width: 100%;}
.news .ht {width: 100%;height: 40px;color: #999999;font-size: 20px;margin-top: 20px;}
.news .ht img {width: 30%;padding-top: 5px;}
.news .img_wrap {width: 100%; border: 0px solid#eee; margin: auto;padding-top: 6%;}
.news .img_emo {width: 24%;float: left;padding-bottom: 0%;}
.news .form1 span {
	font-size: 12px;
	font-weight: bold;
	color: red;
	vertical-align: top;
}
.news #db {
	margin-bottom: 0px;

}
.news .userCounter { font-size: 1.2em; line-height: 1.3;  background: #361206; text-align: center; padding:7px 5px; letter-spacing: -0.05em; position:relative; z-index:999;}
.news .datebg { display: inline-block; color:#000; font-weight: bold; height: auto; width: 26px; margin-right: 2px; background-color: #fff; border-radius: 8px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .2), inset 2px 4px 0 0 rgba(255, 255, 255, .08); padding: 5px 0;}
.news .datebg2 { display: inline-block; color:#fff; font-weight: 400; margin-top: 5px; }
.news .datebg2 p {animation:change_color 2s  infinite; margin: 0}
@keyframes change_color{
  0% {background-color: #d50e0e;}
  50% {background-color: #000;}
  100% {background-color: #d50e0e;}
}
.news .date2::after, .news .date4::after {padding-left:10px;}
.news .form1 {
	overflow: hidden;
}
.news .form1 table {
	width: 98%;
	margin: 15px auto;
	padding: 20px;
}
.news .form1 th, .news .form1 td {
	padding: 6px 0;
}
.news .form1 th {
	padding-right: 10px;
	padding-left: 50px;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -1px;
	text-align: left;
	white-space: nowrap;
}
.news .form1 td {
	font-size: 17px;
	text-align: left;
	vertical-align: middle;
}
.news .form1 input {
	border: 1px solid #ccc;
	background: #fff;
	font-size: 16px;
	border-radius: 7px;
	width: 90%;
	height: 40px;
	padding: 5px 4px;
}
.news .form1 select {
	border: 1px solid #ccc;
	background: #fff;
	font-size: 16px;
	border-radius: 7px;
	width: 80%;
	height: 40px;
	padding: 5px 4px;
}
.news .form1 input[type=checkbox] {
	width: auto;
}
.news .result {
	background: #f5f5f5;
	border: 1px solid #ccc;
	font-size: 15px;
	padding: 10px 0;

}
.news .result input {
	border: 1px solid #ccc;
	height: 27px;
	border-radius: 7px;
	width: 25%;
	font-size: 17px;
	margin: 0.5% 0;
}
.news .agree label {
	
	
	font-size: 12px;
	color: #000;
	line-height: 16px;
	letter-spacing: -0.5px;
	text-align: center;
}
.news .agree input[type=checkbox] {
	margin: 0 0 0 3px;
	height: auto;
}
.news .form1 img {
	padding-top: 0;
}
.news img {
	border: 0;
	width: 100%;
}
.news .reply {width: 90%; max-width: 680px; padding-top: 20px; margin: 0 auto; text-align:left}
.news .reply .retop {width:100%;padding:0 5%;box-sizing:border-box;margin:0 auto;position:relative;height:40px;border-bottom:1px solid #a9a9a9;
               font-size: 15px; }
.news .reply .retop p {display:inline-block;font-weight:700;margin:0;line-height:40px;letter-spacing:-.035em}
.news .reply .retop button {position:absolute;right:5%;bottom:7px;font-size:11px;font-weight:700;background:#f2f2f2;border:1px solid #ccc;height:30px}
.news .reply .retop button span {font-size:13px;color:#ccc}
.news .reply .retap {white-space:nowrap;border-top:1px solid #ddd}
.news .reply .retap li {float:left;height:40px;line-height:40px;width:50%;box-sizing:border-box;text-align:center;font-weight:700;font-size: 15px;}
.news .reply .retap li:first-child {background:#fff;border-bottom:1px solid #ddd;border-right:1px solid #ddd}
.news .reply .retap li:last-child {color:#396dba;background:#f7f7f7}
.news .reply .retap::after {content:'';display:block;clear:both}
.news .reply .retxt {margin:4% 5%;border-bottom:1px solid #ccc;}
.news .reply .retxt>h4 {font-size: 16px; width: 30%;  float: left }
.news .reply .retxt h4 span {font-size:10px;padding:2px 6px;background:red;color:#fff;border-radius:2px}
.news .reply .retxt .retime { margin-top: 10px; color:#777;font-size:11px; margin-bottom: 20px; float: right}
.news .reply .rebtn {position:relative;height:30px;margin:.6em 0}
.news .reply .rebtn button {font-size:11px;font-weight:700;background:#fbfbfb;border:1px solid #cdcdcd;height:25px; color: #333}
.news .reply .rebtn ul {float:right}
.news .reply .rebtn ul li {float:left;margin-left:.4em}
.news .reply .rebtn ul li button {padding-left:20px;position:relative}
.news .renum {text-align:center ; margin-top: 20px; margin-bottom: 20px}
.news .renum li {font-size:12px;display:inline-block;width:30px;height:30px;line-height:30px;border:1px solid #ccc;margin:0 5px}
.news .renum li:first-child {font-weight:700}
.news .reply img {width:100%;margin-top: 20px; margin-bottom: 10px }
.news .re_img {width: 30%; vertical-align: middle}
.news .re_txt {width: 70%; font-size: 16px; padding-left: 20px; vertical-align: top ; color:#666; line-height: 21px ; padding-top: 30px; font-weight: 500}
.news .re_best { display: inline-block; width: 50px; height: 20px; line-height: 20px; background: red; border-radius: 50px; color: #fff; font-size: 0.7em; font-weight: bold; text-align: center; margin: 5px 0;}
.news .re_name { font-size: 0.950em; height: 30px; line-height: 30px; font-weight: bold; margin-left: 5px;}
.news .re_time { font-size: 0.950em; height: 30px; line-height: 30px; font-weight:500; margin-left: 5px; color: #999999}
.news footer {
margin-top: 40px;

	margin: auto;
	line-height: 20px;
	font-size: 13px;
	padding: 40px;
	text-align: center;
	background: #eee;
	color: #999;
	border-top: 1px dotted #ddd;
	letter-spacing: -0.08em;
}
.news footer button {width:10%;margin-bottom: 30px; border:1px solid #c7c7c7;color: #222; height:35px;background:linear-gradient(to bottom,#fefefe,#eeefee);background:-webkit-linear-gradient(to bottom,#fefefe,#eeefee);background:-moz-linear-gradient(to bottom,#fefefe,#eeefee);background:-o-linear-gradient(to bottom,#fefefe,#eeefee)}
.news footer button a {color: #666; }
.news .agree {
	font-size: 12px;
	text-align: center !important;
	padding: 10px 0px 15px 10px
}
.news .agree input {
	width: 15px;
	height: 15px;
}
.news .btn {
	text-align: center;
}
.news #bottom {
	border-top: 1px solid #e5e5e5;
	margin-top: 20px;
	text-align: left;
}
.news .btncell { text-align: center; }
.news table button {
	height: 70px;
	position: relative;
	display: block;
	margin: 30px auto;
	width: 80%;
	padding: 10px 10px;
	border-radius: 40px;
	font-size: 1.5em;
	font-weight: 600;
	background: #db0000;
	color: #fff;
	animation: button 2s ease-in-out infinite;
	cursor: pointer;
}
.news table button {
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
	animation-name: button;
	border: none
}
.news .btn {
	text-align: center;
}
.news input[type=radio]:not(old) {
	width: 10%;
	height: 25px;
	margin: 5px 3px 0px 0px;
	padding: 5px;
	vertical-align: text-bottom;
}
.news table th span {
	color: red;
	font-size: 0.8em;
	font-weight: 400;
}
@keyframes button {
	0% {
		background-color: #db0000;
		top: 0;
	}

	60% {
		top: 5px;
		background-color: #000;
	}

	100% {
		top: 0px;
		background-color: #db0000;
	}
}
.news table img {
	display: block;
	margin: 0 auto;
	width: 85%;
}
.news table .result {

	font-size: 13px;
	text-align: center;
	border: 2px solid #eaeaea;
	background: #f7f7f7;
	border-radius: 5px;
	padding: 13px;
	margin-top: 40px;
}
.news table .result input[type=text] {
	height: 20px;
	line-height: 20px;
	width: 15%;
	background: #fff;
	border: 1px solid #c1c1c1;
	margin-right: 5px;
}
@media(max-width:640px) {
.fixbt{position:fixed;bottom:0;z-index:8; right:0}
.fixbt img{width:100px;margin:0 auto;float: right; padding:10px;}
	header {width: 100%;margin: 0px auto;text-align: left;margin-bottom: 10px;padding: 10px 0px;}
    header nav ul li {font-size: 15px;float: left; width: 20%; height: 40px; line-height: 40px; text-align: center}
    header .toptxt {padding: 20px 10px 10px;text-align: left}
    header .toptxt h2 { line-height: 1.375; font-size: 30px; letter-spacing: -.05em}
header .toptxt h2 u {text-decoration: none; border-bottom: 1px solid #000}
header .toptxt p {line-height: 1.25;padding-left: 10px;position: relative;-webkit-margin-after: 0;font-size: 20px;font-weight: 600;color: #1e1e1e}
.sub img {margin-left: 15px;width: 40px;margin-right: 12px;}
.txt .span1{font-size: 18px;color: red;font-weight: 600;}	
.atc p {font-size: 18px;line-height: 1.8;letter-spacing: -0.02em;}
.atcbottom {border-top:1px solid #e5e5e5;font-size: 13px;padding: 40px 0 40px 0;}
.atcbottom span{background: #eee;color: #222;line-height: 26px;}

.reply{width: 100%; max-width: 680px; padding-top: 20px; margin: 0 auto;}
    
.img_emo{width: 36%;float: left;padding-bottom: 6%;}
	
	
#wrap h2 {font-weight: 700;font-size: 22px;padding: 20px 0px;line-height: 1.3;color: #1d1d1d;}

.img_wrap .eom{width: 20%;float: left;padding-bottom: 6%;}
.imgtime {padding: 2% 3%!important; font-size: 10px!important; color: #9e9e9e; }
	
.form1 input {border: 1px solid #ccc;background: #fff;font-size: 16px;border-radius: 7px;width: 90%;height: 40px;padding: 5px 4px;}
.txt .b {font-size: 22px;}
table button {width: 90%;}
table button {height: 60px;position: relative;display: block;margin: 20px auto;width: 90%;padding: 10px 10px;border-radius: 40px;font-size: 1.3em;font-weight: 600;background: #ff0000;
color: #fff;animation: button 2s ease-in-out infinite;}

.reply p img {width: 100%;}
.sub2 img {float: left;width:120px;margin-right: 10px;margin-top: 10px;}
	
.re {font-size: 15px;padding: 10px 15px 10px 15px;color: #444;}
	
	
.sub3{float: left; font-size: 15px;}
.sub4{float: left; font-size: 13px; padding-top: 15px; color:#9d9d9d;font-weight: 300;}
	
	
.text_wrap {overflow: hidden;width: 95%;font-size: 1.5em;line-height: 1.7;letter-spacing: -0.5px;padding: 5% 0% 5% 0%;  margin: 0 auto;}
.ht {width: 100%;height: 20px;color: #999999;font-size: 10px;}
    
    .text_wrap h1 {font-size: 21px;padding-top: 1%;}

	
	
footer button{width:20%;margin-bottom: 30px; border:1px solid #c7c7c7;color: #222; height:35px;background:linear-gradient(to bottom,#fefefe,#eeefee);background:-webkit-linear-gradient(to bottom,#fefefe,#eeefee);background:-moz-linear-gradient(to bottom,#fefefe,#eeefee);background:-o-linear-gradient(to bottom,#fefefe,#eeefee)}

	
	
	.form1 th {
	padding-right: 10px;
	padding-left: 20px;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: -1px;
	text-align: left;
	white-space: nowrap;
}
	
	.form1 table {
	width: 100%;
	margin: 15px auto;
	padding: 5px;
}

	footer {

		line-height: 15px;
		font-size: 12px;
		padding: 25px;
		text-align: center;
		background: #eee;
		color: #999;
		border-top: 1px dotted #ddd;
		letter-spacing: -0.08em;
	}

	.txt .v {
		font-size: 20px;
		color: #db0000;
		font-weight: bold;
		border-bottom: 2px solid#db0000;
	}
    
    .re_txt {width: 70%; font-size: 14px; padding-left: 15px; vertical-align: top ; color:#666; line-height: 21px ; padding-top: 20px; font-weight: 500}


}
@media(max-width:450px) {
    
    header nav ul li {font-size: 13px;float: left;width: 20%;height: 40px;line-height: 40px;text-align: center}
    header .toptxt {padding: 20px 10px 10px;text-align: left}
header .toptxt h2 {line-height: 1.375;font-size: 20px;letter-spacing: -.05em}
header .toptxt h2 u {text-decoration: none;border-bottom: 1px solid #000}
header .toptxt p { line-height: 1.5; padding-left: 10px; position: relative; -webkit-margin-after: 0; font-size: 14px; font-weight: 600; color: #454545;}
    
    .re_txt {width: 70%; font-size: 13px; padding-left: 15px; vertical-align: top ; color:#666; line-height: 21px ; padding-top: 10px; font-weight: 500}
    .re_best { display: inline-block; width: 40px; height: 20px; line-height: 20px; background: red; border-radius: 50px; color: #fff; font-size: 0.7em; font-weight: bold; text-align: center; margin: 5px 0;}
.re_name { font-size: 13px; height: 30px; line-height: 30px; font-weight: bold; margin-left: 5px;}
.re_time { font-size: 13px; height: 30px; line-height: 30px; font-weight:500; margin-left: 5px; color: #999999}
    
    .userCounter { font-size: 1.1em; line-height: 1.3;  background: #361206; text-align: center; padding:5px 3px; letter-spacing: -0.05em; position:relative; z-index:999;}
.datebg { display: inline-block; color:#000; font-weight: bold; height: auto; width: 20px; margin-right: 2px; background-color: #fff; border-radius: 5px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .2), inset 2px 4px 0 0 rgba(255, 255, 255, .08); padding: 5px 0;}
.datebg2{ display: inline-block; color:#fff; font-weight: 400; margin-top: 5px}
.date2::after, .date4::after{padding-left:10px; padding-top: 10px}
    
}
@media(max-width:400px) {
    header .toptxt h2 {line-height: 1.375;font-size: 20px;letter-spacing: -.05em}
    header .toptxt p { line-height: 1.25; padding-left: 10px; position: relative; -webkit-margin-after: 0; font-size: 14px; font-weight: 600; color: #1e1e1e}
    .atc p {font-size: 18px;line-height: 1.7;letter-spacing: -0.04em;}
    .re_txt {width: 70%; font-size: 12px; padding-left: 10px; vertical-align: top ; color:#666; line-height: 21px ; padding-top: 5px; font-weight: 500}
    
    .userCounter { font-size: 0.9em; line-height: 1.3;  background: #361206; text-align: center; padding:5px 3px; letter-spacing: -0.05em; position:relative; z-index:999;}
}
.news .imgtime {font-size: 8px;}
.news .notosanskr * {
	font-family: 'Noto Sans KR', sans-serif;
}
.news .icon {
	width: 18px;vertical-align: bottom;
}
.news .w90 {width:100%; display:block; margin:0 auto 0;}

/* ── 여기부터는 현장 추가분 (원본에 없음) ───────────────────────── */

/* 이미지 플레이스홀더 — 사진은 나중에 직접 채운다.
   <p class="img_wrap"><span class="ph">설명</span></p> 형태로 쓴다. */
.news .ph {
  /* flex/grid 로 가운데 정렬하면 익명 아이템의 min-width:auto 때문에
     긴 한 줄이 상자 밖으로 삐져나간다. 그래서 그냥 block + padding 으로 높이를 만든다. */
  display: block;
  width: 100%;
  padding: 90px 24px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 12px, #eceef1 12px, #eceef1 24px);
  border: 1px dashed #c3c7cd;
  border-radius: 4px;
  color: #8a9099;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.02em;
}
.news .ph--wide { padding: 130px 24px; }
.news .ph--tall { padding: 190px 24px; }

/* 고정 우하단 버튼 — 원본은 이미지(f_btn.gif)였다. 이미지 의존을 없애려 텍스트로. */
.news .fixbt {
  right: 12px;
  bottom: 12px;
  /* 원형 — 가로세로 같은 크기에 radius 50% */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  padding: 0;
  border-radius: 50%;
  background: #db0000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  animation: news-fixbt 2s ease-in-out infinite;
}
@keyframes news-fixbt {
  0%, 100% { transform: translateY(0); background: #db0000; }
  50% { transform: translateY(-4px); background: #111; }
}

/* 상단 바 로고 — 분양비서 로고 이미지(1024x194, 약 5.3:1).
   .news img{width:100%} 리셋이 있어서 높이를 고정하고 width:auto 로 비율을 잡는다. */
.news .top {
  display: flex;
  align-items: center;      /* 세로 가운데 */
  justify-content: center;  /* 가로 가운데 */
}
.news .top .brand {
  display: inline-flex;
  align-items: center;
  height: 50px;
}
.news .top .brand img {
  width: auto;
  height: 20px;             /* 22px 의 0.9배 */
  display: block;
}

/* 상담폼 — 분양비서 배선(form.js)용. 원본 form1 위에 얹는 보정. */
.news .form1 { border: 4px solid #000f0c; }
.news .form1 .done-panel { padding: 40px 20px; text-align: center; }
.news .form1 .done-panel h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.news .form1 .done-panel p { font-size: 16px; line-height: 1.6; color: #555; }
.news .form1 .tel-row {
  display: block;
  padding: 14px 10px;
  background: #111;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}
.news .form1 .tel-row b { color: #ffd34d; font-size: 21px; }

/* ── 페이지 바탕 ────────────────────────────────────────────────
   style.css 를 싣지 않으므로 body 는 여기서 잡는다. 폭은 기존 사이트의
   모바일 셸(--shell: 768px)과 같게 맞춰 푸터 폭이 달라 보이지 않게 한다. */
body {
  max-width: 768px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 60px rgba(2, 37, 75, .18);
}

/* ── 원본 head 의 인라인 <style> (증상 선택 체크박스) ───────────── */
.news .symptom-select { padding: 15px 0; }
.news .symptom-title { font-weight: bold; margin: 0 0 10px 0; }
.news .dbq { display: flex; gap: 8px; flex-wrap: wrap; }
.news .dbq input[type="checkbox"] { display: none; }
.news .dbq label {
  flex: 1;
  min-width: 70px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px 5px;
  cursor: pointer;
  color: #888;
  font-size: 14px;
  box-sizing: border-box;
  user-select: none;
  margin: 0;
}
.news .dbq input[type="checkbox"]:checked + label {
  background-color: #e10000;
  border-color: #e10000;
  color: #fff;
  font-weight: bold;
}
.news video { outline: none; border: 0; }

/* ════════════════════════════════════════════════════════════════
   타이포그래피 — 동아일보 실제 기사 실측값에 맞춤 (2026-10-13 측정)
   https://www.donga.com/news/.../134833214/1

   측정값(모바일 390px / PC 1280px):
     기사 제목 h1   24px / 1.4 / 700        →  PC 34px / 1.4 / 700
     부제 .sub_tit  18px / 1.8 / 700 / -0.3px  (PC 동일)
     본문 .news_view 18px / 1.8 / 400 / -0.3px (PC 동일)
     날짜 .date     13px / #5a5a5a            (PC 동일)
     본문 폭                                   PC 935px

   핵심: 본문은 모바일·PC가 같은 18px/1.8 이고, 제목만 커진다.
   아래 블록은 원본(max10) CSS의 440/640px 미디어쿼리보다 뒤에 와야
   같은 특정도에서 이긴다 — 파일 맨 끝을 유지할 것.
   ════════════════════════════════════════════════════════════════ */

/* ── 기사 제목 / 부제 ─────────────────────────────────────────── */
/* 헤더 안쪽 래퍼 — 예전엔 index.html 인라인 style 이었다(max-width:750px). */
.news .head-inner { max-width: 750px; margin: 0 auto; }

.news header .toptxt { padding: 0 16px 10px; }


.news header .toptxt h2 {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #111;
  /* 탭 메뉴(스티키헤더처럼 보이는 줄)와 제목 사이 간격 — 사용자 지정 60px.
     .toptxt 의 위 패딩은 0 으로 내려서, 간격을 만드는 곳을 여기 한 군데로 모았다. */
  margin-top: 60px;
}

.news header .toptxt p {
  /* 동아 부제는 18px 이지만 사용자 지정으로 14px (2026-10-14) */
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #111;
  padding-left: 14px;
  margin-top: 18px;
}

/* 작성시각 — 동아 .date 13px/#5a5a5a */
.news header .toptxt .top_btn { padding: 18px 0; height: auto; line-height: 1; }
/* 아이콘 줄(가·☆·↗·▤)과 상단 바 아이콘은 index.html 에서 지웠다 — 작성시각만 남는다 */
.news header .top i { display: none; }
.news header .toptxt .top_btn ul { display: none; }
.news header .toptxt .top_btn .time { font-size: 13px; color: #5a5a5a; line-height: 30px; }

/* ── 본문 ─────────────────────────────────────────────────────── */
.news .text_wrap {
  width: auto;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: -0.3px;
  padding: 10px 16px 20px;
  margin: 0;
}

.news .atc p,
.news .text_wrap p,
.news .text_wrap p.txt {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: #111;
}

/* 소제목(◆ …) — 동아에는 없는 요소라 본문 18px 기준으로 한 단 키웠다 */
.news .text_wrap h1 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #111;
  padding-top: 18px;
  padding-bottom: 4px;
}

/* 이미지 캡션 — 동아 .date 와 같은 13px/#5a5a5a 계열 */
.news .cap {
  display: block;
  text-align: right;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 2px 0 0;
}

.news .ph { font-size: 15px; }

/* ── 댓글 ─────────────────────────────────────────────────────── */
.news .reply .retop p { font-size: 15px; }
.news .reply .retap li { font-size: 15px; }
.news .re_name { font-size: 14px; }
.news .re_time { font-size: 13px; color: #5a5a5a; }
.news .re_txt {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.3px;
  color: #444;
  font-weight: 400;
  padding-top: 4px;
}

/* ── 폼 ───────────────────────────────────────────────────────── */
.news .form1 th { font-size: 17px; letter-spacing: -0.3px; padding-left: 16px; }
.news .form1 td { font-size: 16px; }
.news .form1 input { font-size: 16px; }
.news .symptom-title { font-size: 16px; letter-spacing: -0.3px; }
.news .dbq label { font-size: 15px; }
.news .agree label { font-size: 13px; letter-spacing: -0.3px; }
.news table button { font-size: 20px; letter-spacing: -0.3px; }

/* ════ PC ════════════════════════════════════════════════════════
   동아 PC 기준: 제목만 34px 로 커지고 본문은 18px 그대로.
   본문 폭은 935px(동아 .news_view 실측)에 맞춘다. */
@media (min-width: 768px) {
  body { max-width: 1000px; }

  .news .head-inner,
  .news #wrap,
  .news .reply { max-width: 935px; }

  /* PC 에서 탭 메뉴 줄이 10px 로 떨어진다 — 원본 CSS 가 모바일 미디어쿼리에서만
     글자 크기를 주고, PC 는 .news 의 font-size:10px 를 그대로 물려받기 때문. */
  .news header nav ul li { font-size: 12px; }

  .news header .toptxt { padding: 0 20px 20px; }

  .news header .toptxt h2 {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -0.3px;
  }

  .news header .toptxt p { font-size: 14px; line-height: 1.8; }

  /* 본문은 모바일과 같은 18px/1.8 — 동아도 PC에서 키우지 않는다 */
  .news .text_wrap { font-size: 16px; line-height: 1.8; padding: 10px 20px 24px; }
  .news .atc p,
  .news .text_wrap p,
  .news .text_wrap p.txt { font-size: 16px; line-height: 1.8; }
  .news .text_wrap h1 { font-size: 22px; padding-top: 24px; }

  .news .ph { font-size: 16px; }
}

/* ── 댓글: 배경·선은 화면 끝까지, 글·배지는 본문과 같은 선에 ──────
   `--re-pad` 한 변수로 안쪽 여백을 관리한다. 값은 "본문 글이 시작하는 x"와
   같게 계산한다: 본문은 가운데 정렬된 #wrap(모바일 680 / PC 935) 안에서
   다시 좌우 패딩(20px)을 받으므로, 글의 x = (화면폭 - wrap)/2 + 20
                                      = (화면폭 - (wrap - 40)) / 2
   화면이 wrap 보다 좁으면 그냥 20px. 그래서 max() 로 묶었다.
   패딩은 요소 '안'이라 배경은 그대로 꽉 차고, 구분선은 border-bottom 으로
   바꿔서(테두리는 패딩 바깥) 음수 마진 없이도 끝까지 간다. */
.news .reply {
  --re-pad: max(20px, calc((100% - 640px) / 2));
  width: 100%;
  max-width: none;
  padding: 20px 0 0;
  box-sizing: border-box;
}

.news .reply .retop {
  padding: 0 var(--re-pad);
  width: 100%;
  box-sizing: border-box;
}
.news .reply .retop button { right: var(--re-pad); }

.news .reply .retxt {
  background: #f7f7f7;
  margin: 0;
  padding: 14px var(--re-pad);
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.news .reply .retxt--last { border-bottom: none; }
.news .reply .retxt table { width: 100%; }
.news .reply .re_txt { padding-left: 0; padding-right: 0; }

.news .reply .renum { padding: 20px var(--re-pad); margin: 0; }

@media (min-width: 768px) {
  /* PC 는 본문 폭이 935px — 글 시작선을 거기에 맞춘다 */
  .news .reply { --re-pad: max(20px, calc((100% - 895px) / 2)); }
}

/* ── 댓글 탭 / 페이지 번호 (news.js 가 .is-active 를 갈아끼운다) ──
   원본 max10 은 :first-child / :last-child 로 '첫 번째가 선택됨'을 박아놨다.
   실제로 눌리게 만들려면 상태를 클래스로 빼야 해서 아래로 덮는다. */
.news .reply .retap li {
  position: relative;
  background: #eceef1;          /* 선택 안 된 탭 — 눌러 들어간 느낌 */
  color: #8a9099;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}
/* 원본이 ':first-child 는 흰 배경, :last-child 는 파란 글씨' 로 박아놔서
   같은 특정도로는 못 이긴다. 두 선택자를 직접 불러 꺼준다. */
.news .reply .retap li:first-child,
.news .reply .retap li:last-child {
  background: #eceef1;
  color: #8a9099;
}
.news .reply .retap li:first-child { border-right: 1px solid #ddd; }
.news .reply .retap li:hover { color: #396dba; }

.news .reply .retap li.is-active,
.news .reply .retap li.is-active:first-child,
.news .reply .retap li.is-active:last-child {
  background: #fff;             /* 선택된 탭만 흰 배경 */
  color: #111;
  font-weight: 700;
  border-bottom-color: transparent;
}
/* 선택된 탭 위에 강조선 — 배경 차이만으로는 약해서 한 줄 더 얹는다 */
.news .reply .retap li.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #d50e0e;
}

.news .reply .retxt.is-last { border-bottom: none; }

.news .reply .renum li {
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  background: #fff;
  color: #555;
}
.news .reply .renum li.is-active {
  font-weight: 700;
  background: #f2f2f2;
  border-color: #999;
  color: #171717;
}