@import "./variables.less";

html {
    line-height: 1.2;
}

body, input, textarea, select, optgroup, option, button {
    margin: 0;
	font-family: "Helvetica Neue",
        "HiraKakuProN-W3","Hiragino Sans GB W3",
        "Nanum Gothic",
        "Apple SD Gothic Neo","Malgun Gothic",
        sans-serif;
}

// Grids

.grid-row {
    clear: both;
}

.grid-column (@size) {
    padding-left: @grid-spacing;
    padding-right: @grid-spacing;
    box-sizing: border-box;
    width: percentage((@size / @grid-columns));
}

.generate-columns(@prefix, @n, @i: 1) when (@i =< @n) {
    .grid-@{prefix}-@{i} {
        .grid-column(@i);
    }
    .generate-columns(@prefix, @n, (@i + 1));
}

@media (max-width: 480px) {
    .generate-columns(column-sm, 12);

    .hide-mobile {
        display: none;
    }
}

@media (min-width: 481px) {
    .generate-columns(column, 12);

    .show-mobile {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 999px) {
    .generate-columns(column-md, 12);

    .grid-row {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (min-width: 980px) {
    .grid-row {
        margin-left: auto;
        margin-right: auto;
        max-width: (@grid-spacing * 2 + @grid-width) * @grid-columns;
    }
}
